5

私は現在、レスポンシブウェブデザインに取り組んでいます。私のクライアントはもう少し予算を取得する必要があるため、「スマートフォンビュー」はまだ準備ができていません。

したがって、スマートフォンでのみアクティブ化される固定ビューポートで実現したい一時的なビューを実装する必要があります。

次の方法でビューポートを設定します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

次のメディアクエリがトリガーされた場合、デバイス幅を700ピクセルに変更したいと思います。

@media only screen and (max-width:700px){

}

次のコードは機能しませんでした。

@media only screen and (max-width:700px){
    .pagewrapper{
        width:700px;
    }

    @-ms-viewport{
        width:700px;
    }

    @-o-viewport {
        width: 700px;
    }

    @viewport {
        width: 700px;
    }

}

これを行うための他の解決策を知っていますか？たぶんJavaScript/jQueryを使用していますか？

4

5 に答える 5

6

受け入れられた答えは正しいですが、jQueryを使用している場合は、jQueryの準備ができている必要があります。低速の接続では、そのコードで問題が発生するため、'$' undefinedエラーが発生する可能性があります。

そのため、この場合は純粋なJavaScriptを使用します。

<meta name="viewport" id="viewport" content="width=device-width; initial-scale=1">
<script type="text/javascript">
    (function setViewPort() {

        if (screen.width < 640 && (window.orientation == 0 || window.orientation == 180)) {
         document.getElementById("viewport").setAttribute("content", "width=480, initial-scale=0.68");
         //alert('480 @ 0.68, landscape');
        } else if (screen.width < 640) {
         // document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1");
         // disabled, since its the same as the default. if this one is different, uncomment line above
         //alert('device-width @ 1, landscape');
        } else if (screen.width >= 640) {
         document.getElementById("viewport").setAttribute("content", "width=640; initial-scale=0.5");
         //alert('640, high res phones');
        }
    })();
</script>

私の場合、縦向きに4.68ズームで480ピクセル、横向きに1ズームで320ピクセルに設定して、pplがより大きなテキストを表示できるようにし、screen.widthが640より大きい場合（Android 5 "のように） 1900x1080の画面サイズの電話）から640px、0.5ズーム（幅は常に320pxのままであるため）。

よろしく、マックス

于 2014-06-05T12:42:36.150 に答える
3

これは私の解決策であり、素晴らしい働きをします。このように、スクリプトは1回だけ実行され、ドキュメントの準備ができる前に実行されます。また、no-jsもサポートされています。ご協力いただきありがとうございます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
    if($(window).width() < 765)
    {
        x=1;
        if(x==1)
        {
            $('meta[name=viewport]').remove();
            $('head').append('<meta name="viewport" content="width=765px, initial-scale=1.0">');
            x=0;
        };
    };
</script>
于 2013-03-20T11:31:25.813 に答える
0 
@media only screen and (min-width:700px){

}

このタイプのメディアクエリを使用してのみ、CSSを変更できます。これがヒットした場合は、これをmin-width:700pxCSSに書き込んでください。そして、コンテナの幅を変更します。<div class="pagewrapper"></div>

次のメタタグは完璧です：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

于 2013-03-19T18:06:43.967 に答える
0

デバイスのみをターゲットにしている場合は、max-widthやmin-widthの代わりにmax-device-widthを試すことができると思います。

于 2013-03-19T18:55:18.020 に答える
0 
if ($('body').width() < 700){   
      $('head').append('<meta name="viewport" content="width=700, initial-scale=1.0">');
}
else{
      $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
}
于 2013-03-19T22:41:14.570 に答える