Question

我目前正致力于响应式网页设计。 “智能手机视图”尚未准备就绪，因为我的客户必须获得更多预算。

因此，我需要实现一个临时视图，我希望通过固定视口实现，只能在智能手机上激活。

我以这种方式设置视口：

<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？

Answer 1

接受的答案是正确的，但如果您正在使用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>

在我的情况下，我为480px设置为0.68变焦为肖像，320px为1变焦为横向，因此如果screen.width高于640（如我的话），人们可以看到更大的文本和（因为这是一个仅限移动的页面） android 5＆＃34;手机屏幕尺寸为1900x1080）到640px，0.5变焦（因为宽度始终保持在320px）。

此致，Max

Answer 2

这是我的解决方案，效果很棒。这样，脚本只运行一次，并在文档准备好之前执行。也支持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>

Answer 3

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

}

您只能使用此类媒体查询更改您的CSS。如果这被击中min-width:700px请写下你的css w.r.t。并更改容器宽度，例如<div class="pagewrapper"></div>

以下 meta 标签是完美的：

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

Answer 4

如果您只定位设备，我认为您可以尝试使用max-device-width而不是max-width或min-width。

Answer 5

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">');
}

在媒体查询中更改视口

5 个答案: