Изменение ширины видового экрана на ширине устройства

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

Другой наоборот, если я изложу:

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

В head моего сайта Я не могу t изменить его на меньших экранах. Потому что все устройства, чем думают, имеют ширину 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>

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

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

источник

2014-10-15 caramba

может быть ошибка может быть, что вы только установить максимальную ширину, но не мин-ширину и поэтому сайт Doesnt НАСТОЯЩЕМУ load с px, которые вы указываете для порта представления –

@FerdinandFatal, который не является частью проблемы. Если вы попробуете приведенный выше код, вы увидите, что он работает нормально. – caramba

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

Add ширина: 100%; max-width: 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; 
    } 
}

источник

2014-10-15 10:20:04

Спасибо, но это не работает на экранах размером меньше 768 пикселей. – caramba

Что не работает? –

Если я проверяю iPhone, я бы хотел, чтобы он был отзывчивым (ширина 320 пикселей), поэтому в этом примере он должен стать «серым» – caramba

Изменение ширины видового экрана на ширине устройства

ответ

Смежные вопросы