ホームページ作成あれやこれサイト制作-忘備録ジャバスクリプト

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

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

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

で対応。

 

コメントを残す

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

CAPTCHA


ホームページ制作、作成のサポートからデザイン等お見積、調査、ご提案、ちょっとしたご相談は無料です。

ご依頼・ご相談、お問合せはお電話かメールにて承っております。お気軽にお問合せください。

滋賀県からホームページ制作・作成!ウェブフォーアート ウェブフォーアート への電話番号077-564-4699電話受付:10:00~17:00 (土日祝除く)メールでのお問い合わせメールでのお問い合わせメールでのお問い合わせ

滋賀県の草津、栗東、南草津、大津、石山、瀬田、守山等、湖南エリアでのご相談、打合せは無料でお伺い致します。

京都や大阪、湖西・遠方等、上記以外の地域での打合せも可能ですが、別途交通費を頂く場合がございます。