在設備寬度上更改視口寬度

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