在设备宽度上更改视口宽度答案

【问题标题】：Change viewport width on device width在设备宽度上更改视口宽度
【发布时间】：2014-10-15 10:00:32
【问题描述】：

尝试更改设备宽度上的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 尺寸的屏幕应该将我的网站缩放到 1024 像素。如果我把它放在头部，这会起作用。但是正如我已经尝试了将近一天一样，现在没有机会用 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 上，我想将 1024 像素的宽度缩放并显示为 100%。虽然我想在较小的设备上编写媒体查询并使其具有响应性。

我做错了什么吗？感谢您的建议。

【问题讨论】：

也许错误可能是您只设置了最大宽度但没有设置最小宽度，因此网站并没有真正加载您为视口提供的像素
@FerdinandFatal 这不是问题的一部分。如果您尝试上面的代码，您会发现效果很好。

标签： javascript html ios css viewport

【解决方案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;
    }
}

【讨论】：

如果我在 iPhone 上查看，我希望它具有响应性（320px 宽度），所以在这个例子中它应该变成gray
您只需要添加 (max-device-width: 767px) 即可。我已经更新了答案:)