Geek asks and answers

Change viewport in media query

I am currently working on responsive web design. Smartphone View isn’t ready yet, because my client needs to get an even bigger budget.

Therefore, I need to implement a temporary view, which I want to implement with a fixed viewport, which is activated only on smartphones.

I set the viewport using this method:

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

I want to change the width of the device to 700 pixels if the following media query is run:

@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 do this? Perhaps using JavaScript / jQuery?

+5
source share
5 answers

, . , script , . 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>
+3

, 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 , 320 1 , ppl ( ), screen.width 640 (, android 5 " 1900x1080) 640px 0,5 ( 320px).

,

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

}

CSS -. min-width:700px, css w.r.t. , <div class="pagewrapper"></div>

The meta i> tag is perfect:

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

0
source

If you only use targeted devices, I think you can try max-device-width instead of max-width or min-width.

0
source 
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">');
}
0
source

More articles:


All Articles