Изменить ширину области просмотра на ширину устройства

Попытка изменить ширину 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. И мне нужно изменить его с помощью javscript, потому что если я не масштабирую каждое устройство до размера тех 1024 пикселей, которые мне не нужны. Если устройство меньше ширины iPad Portrait (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>

То, что я пытаюсь получить, это. На iPad с портретной шириной 768 я хотел бы масштабировать и отображать ширину 1024 пикселей как 100%. Однако на небольших устройствах я хотел бы писать медиа-запросы и делать их отзывчивыми.

Я делаю что-то совершенно неправильно? Спасибо за советы.


ios javascript html css viewport
person caramba    schedule 15.10.2014    source источник
comment
возможно, ошибка может заключаться в том, что вы устанавливаете только максимальную ширину, но не минимальную ширину, и поэтому сайт действительно не загружается с пикселями, которые вы указываете для порта просмотра.   -  person Ferdinand Fatal    schedule 15.10.2014
comment
@FerdinandFatal это не часть проблемы. Если вы попробуете приведенный выше код, вы увидите, что он работает нормально.   -  person caramba    schedule 15.10.2014

Ответы (1)


arrow_upward
1
arrow_downward

Почему бы вам не сделать это проще, как это http://jsfiddle.net/fx2sudxg/1/embedded/result/

Добавить ширину: 100%; максимальная ширина: 1024 пикселей; в #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;
    }
}
person Bojan Petkovski    schedule 15.10.2014
comment
Если я проверю на iPhone, я бы хотел, чтобы он реагировал (ширина 320 пикселей), поэтому в этом примере он должен стать gray - person caramba; 15.10.2014
comment
Вам просто нужно добавить (max-device-width: 767px), и все заработает. Я обновил ответ :) - person Bojan Petkovski; 15.10.2014