スタッフのきまぐれブログ

スタッフブログ

レスポンシブ(スマートフォン)対応メモ

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

cssは

@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) {}

でうちは統一。理由はいろいろ。。。

 

htmlのヘッダーには

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

で対応。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

滋賀県でホームページ制作ならウェブフォーアート ページトップへ
MENU