5

コンテンツの最小幅を 480px に設定する必要があります。これにより、画面を表示しているすべての人がコンテンツを表示するために横にスクロールする必要があります。これは、この解像度以下ではレイアウトを機能させることができないためです。

これが私が持っているものです

<meta name="viewport" content="width=device-width,  initial-scale=1, maximum-scale=1, minimum-scale=1">

このようなものが必要ですが、明らかにこれは機能しません

<meta name="viewport" content="width=device-width,, min-width=480px,  initial-scale=1, maximum-scale=1, minimum-scale=1">
4

5 に答える 5

3

これは、タブレットとデスクトップ専用の Web のレスポンシブ バージョンを使用するためのソリューションです。

このコードでは、モバイル バージョンを動的に無効にします。モバイルの場合:

<!-- Meta Responsive -->
<meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script>
window.onload = function () {
    if(screen.width <= 767) {
        var mvp = document.getElementById('myViewport');
        mvp.setAttribute('content','width=767');
    }
}
</script>
<!-- End of Meta Responsive -->
于 2014-03-31T17:35:20.890 に答える
2

ビューポート自体ではなく、ページ上のコンテンツの最小幅を設定しようとしているようです。この記事はあなたを助けるかもしれません。

あなたはおそらくやろうとしている：

@media all and (max-width: 480px) {
    // styles assigned when width is smaller than 480px;

}

このようなもので、そのブロックでは、幅が480px以下の画面のコンテンツのスタイルを送信できます。

それがあなたが探しているものであることを願っています。

于 2012-11-02T18:44:35.837 に答える
0

私は多くのコードを試し、ビューポートの再読み込みのようなものを実行していくつかの良い結果を達成しました...しかし、最善の方法は完全にレスポンシブな Web サイトを作成することだと思います (最大 320px ;)

それが最善のアプローチです：

<script>
//VIEWPORT

function mobileFriendly() {
    setTimeout(function () {
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
            var ww = ( document.documentElement.clientWidth < window.screen.width ) ? jQuery(window).width() : window.screen.width; //get proper width
            var mw = 725; 
            //alert ("width" + ww);
            var ratio = ww / mw; //calculate ratio
            //alert ("ratio: " + ratio);
                if( ratio < 1 ){ //smaller than minimum size
                    jQuery("meta[name='viewport']").attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + mw);
                }else{ //regular size
                    jQuery("meta[name='viewport']").attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
                }
            }
        }, 600);
    }
    jQuery( document ).ready( function(){
    mobileFriendly()
    });
    window.addEventListener("orientationchange", mobileFriendly, false);

</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta content="user-scalable=yes, maximum-scale=1.6, width=device-width, initial-scale=1, target-densitydpi=device-dpi" name="viewport">

于 2016-03-21T23:23:25.830 に答える
-2

あなたの 2 番目の解決策は実際には機能しますwidth=device-width。私はそれをコピーしましたが、問題はありませんでした。

時には新鮮な目がすべてを行います。

編集：ただし、はい、あなたの場合、メディアクエリはまさに必要なものです。

于 2013-04-24T18:14:16.277 に答える
-4 
<script>
        //viewport just for screens under/with 480px width other screen widths show the whole page resized
        if(screen.width <= 480) {
            document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;");} 
        //for devices with more and less/equal than 480px width 
        window.onresize = changeViewport;
            function changeViewport(){
                if(screen.width <= 480) {
                    document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;");} 
                if(screen.width > 480) {
                    document.getElementById("viewport").setAttribute("content", "");}           
                }
    </script>
于 2013-06-19T09:18:48.367 に答える