javascriptでアクセスしてきた端末をpc/spに振り分けて、bodyにクラスを追加
javascript
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
$('body').addClass('env-sp');
} else {
$('body').addClass('env-pc');
}
たとえばtopページなら・・・
top.scss
/*
共通部分
画像、変数、mixinなど
*/
@import 'pages/top-pc', 'pages/top-sp';
top-pc.scss
/* ======================================
* pc
* ====================================== */
.env-pc{
}
top-sp.scss
/* ======================================
* sp
* ====================================== */
.env-sp{
}
もしくはpc.cssとsp.cssを用意しておいて、jsでlinkタグを生成する。
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text.css';
link.href = 'css/pc.css';
document.getElementsByTagName('head')[0].appendChild(link);
domは用意してあるけどspでは表示しない場合
.env-sp{
.sp-none{
display: none;
}
}
参考
端末判定
http://html5-css3.jp/smartphone/pc-iphone-android-php-javascript-htaccess.html
spサイト基本知識
- font-size 14~16px
- line-height 1.4~1.6
- 左右の余白10px
- リンクやボタンは縦幅44pxがタップしやすい
- 操作が多いサイトではユーザーのズームを制限した方が良い
- 横幅は320pxが基準
- retina対応で画像は2倍サイズを用意
- iPhone,iPadではスクロールバーが表示されないので、
overflow-y:auto;とか使う
PhoneやiPadでスクロールバーを表示する - spでpcのmouseoverと同じ動きをしたい場合
iPhone/iPadでPCと同じJavaScriptのイベントを実装する