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

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

标签

html

css

mobile

media-queries

viewport