レスポンシブ（スマートフォン）対応メモ | 滋賀県からホームページ制作・作成！Web for Art | 草津駅すぐのホームページ制作会社

クライアント様が作ったホームページを下請けでレスポンシブ（スマートフォン）対応する制作案件があったのでメモ。

ｃｓｓは

@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">');
}

で対応。