Question

尝试更改设备宽度上的meta tag viewport content width而无法完成我需要的任务。我必须遵循以下代码：

使用：

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

现在，如果它是iPad，window.innerWidth将返回768，这是正确的。现在如果是这样，我想将meta tag设置为：

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

因此，iPad尺寸屏幕应该将我的网站扩展到1024px。如果我把它放在头部，这是有效的。但正如我已经尝试了近一天，现在没有机会用Javascript改变它。如果我不是每个设备都缩放到我不想要的1024px的大小，我需要用javscript来改变它。如果设备小于iPad纵向宽度（768），我想让它更具响应性......

如果我设置了反过来：

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

在我网站的head中，我无法在较小的屏幕上将其更改回来。导致所有设备认为它们的宽度为1024 ....

以下是所需的所有代码。

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

我想要的是。在具有肖像宽度768的iPad上，我想缩放并将1024px的宽度显示为100％。在较小的设备上虽然我想编写媒体查询并使其响应。

我做错了吗？谢谢你的建议。

Answer 1

为什么不像http://jsfiddle.net/fx2sudxg/1/embedded/result/

那样简单

添加宽度：100％;最大宽度：1024px;到#container，它将根据视口进行缩放：）

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;
    }
}

更改设备宽度上的视口宽度

1 个答案: