Change viewport width on device width

Question

Trying to change the meta tag viewport content width on device width with no chance to accomplish what I need. I have to following code:

with:

<meta id="viewport" name="viewport" content="width=device-width">

Now if it is is an iPad the window.innerWidth will return 768 which is right. Now if so, I would like to set the meta tag to:

<meta id="viewport" name="viewport" content="width=1024">

So the iPad size screens should scale my site to those 1024px. Which works if I put that in head section. But as I've tried for almost a day now there is no chance to change that with Javascript. And I need to change it with javscript cause if I dont every device scales to the size of those 1024px which I dont want. If device is smaller than iPad Portrait width (768) I would like to make it more responsive...

The other way round if I set:

<meta id="viewport" name="viewport" content="width=1024">

In the head of my site I can't change it back on smaller screens. Cause all devices than think they have a width of 1024... .

Here is all the code needed.

<!DOCTYPE html>
<html lang="de-DE">
<head>
    <meta id="viewport" name="viewport" content="width=device-width">
    <!-- <meta id="viewport" name="viewport" content="width=1024">-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            width: 1024px;
            background-color: red;
        }

        @media all and (max-width: 767px) {
            #container {
                width: 100%;
                margin: 0 auto;
                background-color: gray;
            }
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        alert(window.innerWidth);
        if(window.innerWidth === 768) {
            alert($("#viewport").attr("content"));
            document.getElementById("viewport").setAttribute("content", "width=1024");
            alert($("#viewport").attr("content"));
        }
    </script>
</head>
    <body>
        <div id="container">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
    </body>
</html>

What I'm trying to get is. On iPads which have a Portrait Width 768 I would like to scale and show width of 1024px as 100%. On smaller devices though I would like to write media queries and make it responsive.

Am I doing something completely wrong? Thanks for advices.

maybe the mistake could be that you only set a max-width but no min-width and therefore the site doesnt realy load with the px you give for a view port — Ferdinand Fatal
@FerdinandFatal that's not part of the problem. If you try the above code you will see that works fine. — caramba

Bojan Petkovski Bojan Petkovski · Accepted Answer · 2014-10-15T10:20:04

Why don't you make it simple like this http://jsfiddle.net/fx2sudxg/1/embedded/result/

Add width:100%; max-width: 1024px; to the #container and it will scale according to the viewport :)

The CSS

* { 
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
    max-width: 1024px;
    background-color: red;
    margin: 0 auto;
}
@media all and (max-width: 767px) and (max-device-width: 767px) {
    #container {
        background-color: gray;
    }
}

Change viewport width on device width

1 Answers