レスポンシブWebデザインでタブレット版がないときの対応

レスポンシブサイトを作るときに、タブレットは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" />');
}

振り分けを行ったviewportのデモページ

このエントリーをはてなブックマークに追加

関連記事

7件のコメント

  1. […] レスポンシブWebデザインでタブレット版がないときの対応 […]

  2. pololo より:

    はじめまして。
    現在、ちょうどこのレスポンシブデザインでタブレットがないときの対応をしている最中で、
    この記事にたどりつきました。
    つかぬことをお伺いしますが、
    この対応は、ウェブサイトの横幅が1024px以上でもうまくいくのでしょうか?

    現在、横幅1050pxのサイトに適応させようとしていますが、
    20pxほどの余白が右側にできてしまい、スクロールがでてしまっています。
    どのように対応すればよいか、おわかりになりましたら、ご教授頂けますと幸いです。

    すみませんが、よろしくお願い致します。

    • cly7796.net より:

      pololoさん
      コメントありがとうございます。

      実際のコードを見ていないので推測でしか回答できませんが、
      横幅1050pxのサイトとのことですので、
      content=”width=960″となっている箇所を
      content=”width=1050″としていただければ対応可能かと思います。

      • pololo より:

        返答頂きありがとうございます。

        Safariのレスポンシブデザインモードで確認していましたところ、
        Safariのレスポンシブデザインモードでは、jQueryでのviewportのwidth指定が
        そもそも効いていないようでした。

        Chromeで確認したところ、スクロールバーは出ず、
        きちんと指定がされていました。
        実機での検証がすぐにはできなかったため、
        実機で検証する機会を作って、検証したいと思います。

        お手数おかけしました。
        ありがとうございました!

      • pololo より:

        返答頂きありがとうございます。

        Safariのレスポンシブデザインモードで確認していましたところ、
        Safariのレスポンシブデザインモードでは、jQueryでのviewportのwidth指定が
        そもそも効いていないようでした。

        Chromeで確認したところ、スクロールバーは出ず、
        きちんと指定がされていました。
        実機での検証がすぐにはできなかったため、
        実機で検証する機会を作って、検証したいと思います。

        お手数おかけしました。
        ありがとうございました!

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31