change viewport in media query

北城以北 提交于 2020-07-18 18:14:36

问题


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

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

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

}

The following code did not work:

@media only screen and (max-width:700px){
    .pagewrapper{
        width:700px;
    }

    @-ms-viewport{
        width:700px;
    }

    @-o-viewport {
        width: 700px;
    }

    @viewport {
        width: 700px;
    }

}

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


回答1:


The accepted answer is correct, but if you're using jQuery and jQuery needs to be ready. On slow connections you get a problem with that code, so you might get '$' undefined errors.

That's why I prefer pure JavaScript in this case:

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

In my case I set 480px with 0.68 zoom for portrait, 320px with 1 zoom for landscape so the ppl can see bigger text and (because this is a mobile only page) if screen.width is higher than 640 (like on my android 5" phone with 1900x1080 screen size) to 640px with 0.5 zoom (since the width always stays at 320px).

Regards, Max




回答2:


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>



回答3:


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

}

You can only change your css using this type of media query. If this gets hit min-width:700px write your css w.r.t this. And change your container width e.g <div class="pagewrapper"></div>

Following meta tag is perfect:

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




回答4:


If you are only targeting devices, I think you could try max-device-width instead of max-width or min-width.




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


来源:https://stackoverflow.com/questions/15506993/change-viewport-in-media-query

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!