更改媒体查询中的视口 [英] change viewport in media query

问题描述

我目前正在从事响应式网页设计. 智能手机视图"尚未准备就绪，因为我的客户必须获得更多预算.

I'm currently working on a responsive webdesign. The "smartphone view" is not yet ready because my client has to obtain some more budget.

因此，我需要实现一个临时视图，该视图需要使用仅在智能手机上激活的固定视口才能实现.

Therefore I need to implement a temporary view which I want to realize with an fixed viewport that only gets activated on smartphones.

我以这种方式设置视口:

I set the viewport using on this way:

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

如果要触发以下媒体查询，我想将设备宽度更改为700像素:

I want to change the device-width to 700 pixels if the following media query gets triggered:

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

Do you know other solutions to get this done? Maybe using JavaScript / jQuery?

推荐答案

这是我的解决方案，效果很好.这样，脚本只运行一次，并在文档准备好之前执行.还支持no-js.感谢您的帮助.

This is my solution, which works fantastic. This way the script just runs one time and gets executed before the document is ready. Also no-js is supported. Thanks for your help.

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

这篇关于更改媒体查询中的视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！