change viewport in media query

Problem

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?

Problem courtesy of: shutdown-i

Solution

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>
Solution courtesy of: shutdown-i

Discussion

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">');
}
Discussion courtesy of: im_benton

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

Discussion courtesy of: Markus

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

Discussion courtesy of: Jason Lydon
@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">

Discussion courtesy of: Mustafa Amin

This recipe can be found in it's original form on Stack Over Flow.