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

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 个解决方案

解决方案1
2 已采纳 2014-10-15 10:20:04

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-10-15 10:20:04

解决方案1
2 已采纳 2014-10-15 10:20:04