0

基本的な質問:

ビューポート メタ タグが 768px 以下でのみ有効になるように設定する方法はありますか?

理由：

標準の @media ブラウザ サイズを使用してレスポンシブ e コマース サイトを構築しました。

1200px 以上 1025px ～ 1199px 980px ～ 1024px 768px ～ 979px

サイトが複雑なため、時間やレイアウトの観点から、@media クエリを使用してサイトをモバイル ブラウザーで使用できるようにすることは現実的ではありません。そのため、viewport メタ タグを使用して、すべての小さなモバイル ブラウザーに強制的に表示させたいと考えています。 768px から 979px のレイアウト。

これを行うには、次を簡単に使用できます。

<meta name="viewport" content="width=768px; />

これに関する唯一の問題は、iPad の横向き用に設計された 980px から 1024px の @media クエリをオーバーライドし、iPad の横向きに、私が iPad の縦向き用に設計した小さいレイアウト、つまり 768px から 979px のレイアウトを強制的に表示することです。

私の祈りへの答えは、ビューポート メタ タグを 768 ピクセル以下でのみ有効になるように設定できればよいのですが、それは可能ですか?

4

1 に答える 1

2

ブーム！修繕！

そうです、これは 6 時間という惨めな無駄遣いでした。

まず、かなり標準的な Viewport Meta Tag を functions.php ファイルに含めました。

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.2, user-scalable=yes" />

次に、header.php で jQuery Mobile を使用してブラウザーの幅を確認し、ブラウザーの幅が 700px 未満の場合はビューポートのサイズを 768px に変更しました。

    <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>

    <meta name="viewport" content="">

    <script>
        if($.mobile.media("screen and (max-device-width: 700px)")) {
            // Change viewport for smaller devices
            $('meta[name=viewport]').attr('content','width=768px');
        }
    </script>

これはうまく機能します - iPad の横向きと縦向きの素敵でレスポンシブなレイアウトを維持し、モバイル用の素敵なビューポート サイズを提供します。素晴らしい

于 2013-08-07T14:05:43.843 に答える