クライアント様が作ったホームページを下請けでレスポンシブ（スマートフォン）対応する制作案件があったのでメモ。
ｃｓｓは
@media screen and (max-width: 680px) {}
で書けば問題なし。
@media screen and (max-width: 682px) {}
@media screen and (max-width: 680px) {}
に分けて 変化をわかりやすくするやり方もあるようだが、時間効率悪いので不採用。
相手方もわかりにくいし。
ホームページ制作業者によって様々だが
@media screen and (max-width: 680px) {}
@media screen and (max-width: 480px) {}
でうちは統一。理由はいろいろ。。。
ｈｔｍｌのヘッダーには
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
を忘れず記述。こちらも書き方や考え方いろいろあるがうちはこれで統一。
ジャバスクリプトは
$(window).bind("load resize", init);//レスポンシブ
function init(){
var _width = $(window).width();
if(_width <= 480){//スマホ
}else{//PC
}
}
でわけたがiPadminiはPC表示で、、、ということだったので
var userAgent = window.navigator.userAgent.toLowerCase();
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1)
|| navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)
|| (navigator.userAgent.indexOf('Windows Phone') !== -1)
|| (navigator.userAgent.indexOf('BlackBerry') !== -1)){
document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
}
で対応。
