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

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>