在媒体查询中更改视口

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

@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 2

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

Answer 3

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

Answer 4

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

接受的答案是正确的，但如果您使用的是 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，因此 ppl 可以看到更大的文本，并且（因为这是一个仅限移动设备的页面）如果 screen.width 高于 640（就像我的android 5" 手机，屏幕尺寸为 1900x1080）到 640px，缩放 0.5（因为宽度始终保持在 320px）。

问候，马克斯