レスポンシブサイトを作るときに、タブレットはPC版を表示させたい、といわれることが時々あります。
今回はその対応方法のメモ。
viewportの設定
通常のレスポンシブサイトの場合、
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
だいたいこんな感じでviewportを記述すると思いますが、
この場合、タブレットで見たときに横スクロールバーが出てしまいます。
通常のviewportでのデモページ
タブレットでPC版を表示したい場合、横幅をPCサイズに固定する必要があります。
<meta name="viewport" content="width=960" />
960の部分にPC版の横幅を入れて、表示幅を固定します。
タブレット向けのviewportのデモページ
上の2パターンのviewportをスマートフォンのとき、タブレットのときで出しわければよいので、
ユーザーエージェントを使って判別します。
var ua = navigator.userAgent;
if ((ua.indexOf('iPhone') > 0) || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)) {
// スマホのとき
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />');
}else{
// PC・タブレットのとき
$('head').prepend('<meta name="viewport" content="width=960" />');
}
はじめまして。
現在、ちょうどこのレスポンシブデザインでタブレットがないときの対応をしている最中で、
この記事にたどりつきました。
つかぬことをお伺いしますが、
この対応は、ウェブサイトの横幅が1024px以上でもうまくいくのでしょうか？
現在、横幅1050pxのサイトに適応させようとしていますが、
20pxほどの余白が右側にできてしまい、スクロールがでてしまっています。
どのように対応すればよいか、おわかりになりましたら、ご教授頂けますと幸いです。
すみませんが、よろしくお願い致します。
pololoさん
コメントありがとうございます。
実際のコードを見ていないので推測でしか回答できませんが、
横幅1050pxのサイトとのことですので、
content=”width=960″となっている箇所を
content=”width=1050″としていただければ対応可能かと思います。
返答頂きありがとうございます。
Safariのレスポンシブデザインモードで確認していましたところ、
Safariのレスポンシブデザインモードでは、jQueryでのviewportのwidth指定が
そもそも効いていないようでした。
Chromeで確認したところ、スクロールバーは出ず、
きちんと指定がされていました。
実機での検証がすぐにはできなかったため、
実機で検証する機会を作って、検証したいと思います。
お手数おかけしました。
ありがとうございました！
返答頂きありがとうございます。
Safariのレスポンシブデザインモードで確認していましたところ、
Safariのレスポンシブデザインモードでは、jQueryでのviewportのwidth指定が
そもそも効いていないようでした。
Chromeで確認したところ、スクロールバーは出ず、
きちんと指定がされていました。
実機での検証がすぐにはできなかったため、
実機で検証する機会を作って、検証したいと思います。
お手数おかけしました。
ありがとうございました！