CSS Media Queries - Viewport ширина игнорируется iPhone

Question

У меня есть этот мета-тег:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

У меня есть этот CSS:

@media (max-width: 1100px) and (max-device-width: 1100px) { 
    .wrapper { 
     width: 200px; 
    } 
    .page { 
     width: 100%; 
    } 

Я также попытался следующие правила CSS:

@media (max-width: 1100px) and (max-device-width: 1100px) { 

и

@media only screen and (max-width : 767px) { .wrapper { width: 100%; } } 

не

и

@media only screen and (min-width: 1024px) and (max-width: 1280px) 

и

@media only screen and (min-width: 993px) and (max-width: 1024px) 

Ни одно из этих правил CSS работы.

Его все полностью игнорируются на iPhone.

Но он отлично работает в браузере, измененном на размер iphone.

Посмотрите сами:

http://www.moonshineandfuggles.com/

Ive продлил максимальную ширину до смешных значений, чтобы попытаться включить айфоны.

Я не хочу, чтобы .wrapper был 200px, я хочу, чтобы он был на 100%, и чтобы он учитывал ширину устройства.

Кажется, iPhone считает, что эта страница должна составлять около 700ish пикселей в ширину.

Как я могу сделать iPhone понятным? Я сделал этот сайт отзывчивым, поэтому он подходит к правильному размеру?

Answer 1

Следующая имеет некоторую информацию, которую вы могли бы оказаться полезными для запросов СМИ -

What is the difference between "screen" and "only screen" in media queries?

Моя первая рекомендация состоит в том, что вы проектируете поток вашего CSS для работы с вашей маленькой поддерживаемым разрешением наружу, таких как проектирование ваш файл CSS для поддержки мобильных устройств, а затем используя медиа-запросы, чтобы иметь дело с изменением свойств в вашем файле CSS для поддержки окон/устройств большего разрешения.

Следующая ссылка объясняет преимущества этого более четко, чем я когда-либо был - http://unmatchedstyle.com/news/working-with-media-queries-and-min-width.php.

Использование этого подхода к дизайну упрощает решение вопросов, которые могут возникнуть при попытке использовать медиа-запрос для переопределения уже определенного свойства. Один из способов избежать таких конфликтов я получил от Media Query Styles Not Overriding Original Styles - обратите внимание на использование тела Адрифт.

Вам не нужно использовать медиа-запросы, чтобы переопределить свойство, если вы не собираетесь его изменять.вам не нужно указывать ширину обертки в ваших медиа-запросах, поскольку она уже определена в основной части вашего файла CSS.

Что касается ваших проблем относительно ширины, попробуйте установить ширину тела (или, если это не так, обертка) до 100vw, если у вас возникли проблемы со 100%.

Надеюсь, что вышеизложенное не слишком смущает.

Если у вас есть какие-либо вопросы, пожалуйста, не стесняйтесь отвечать.