change viewport in media query

Question

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?

Answer 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

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