在媒体查询中更改视口

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(就像我的机器人5"手机屏幕尺寸为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>