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>

在我的情况下，我将纵向设置为 480 像素，缩放为 0.68，横向设置为 320 像素，以便用户可以看到更大的文本（因为这是一个仅限移动设备的页面），如果 screen.width 高于 640（比如在我的 android 5 上）屏幕尺寸为 1900x1080 的手机）到 640 像素，缩放为 0.5（因为宽度始终保持在 320 像素）。

问候， 马克斯

于 2014-06-05T12:42:36.150 回答
3

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

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

于 2013-03-19T18:55:18.020 回答
0 
@media only screen and (min-width:700px){

}

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

以下元标记是完美的：

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

于 2013-03-19T18:06:43.967 回答
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 回答