Что происходит, если видовой экран макета меньше визуального?

Question

Что происходит, если видовой экран макета меньше визуального?

Объяснениевидового экрана компоновки ивизуального видового экрана можно найтиздесь .

Я прочитал здесь и здесь , что следует использовать

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

Если вы хотите оптимизировать веб-страницу для мобильных устройств.

Я хотел бы понять последствия этого для iphone4 в ландшафтном режиме. Я думаю, что происходит следующее:

Width=device-width
Ширина устройства iphone4 составляет 320px в ландшафте (смотрите здесь ), хотя iphone 4 имеет ширину экрана 480 пикселей в ландшафтном режиме. Таким образом, видовой экран макета установлен на 320px.

Начальный масштаб=1.0 это устанавливает 1 пиксель CSS на 1 пиксель устройства (см. здесь). Теперь, поскольку iphone4 имеет ширину 480 пикселей устройства, это означает для меня, что визуальный видовой экран имеет ширину 480 пикселей.

Таким образом, видовой экран макета установлен на 320px, а визуальный-на 480px. Не означает ли это, что веб-страница отображается только на первые 320 пикселей визуального обзорного экрана и реминг 160px остаются пустыми?

Чтобы привести более конкретный пример: рассмотрим следующую веб-страницу

<!DOCTYPE html >

<html >

  <head>    

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

  </head>

  <body>

    <div style='background-color:red;width:100%'>Test</div>     

  </body>

</html>

Тогда, в моем понимании, это должно только заполнить экран iphone4 в альбомной ориентации до 320/480=66,66% красным цветом, потому что видовой экран макета получит длину 320px, а поскольку div-размер относительно видового экрана, ширина: 100% совпадает с ширина: 320 px , см. здесь:

Компоновка CSS, особенно процентные ширины, вычисляются относительно
на видовом экране

Я предполагаю, что я ошибаюсь и что iphone4, вероятно, отобразит вышеупомянутую страницу в альбомной ориентации со 100% красным цветом - но почему? Я что-то не так понял?

Примечание: я нашел этот вопрос могу ли я иметь более 320px контента в iPhone, используя тег viewport с шириной устройства и начальным масштабом = 1? который тесно связан с моим вопросом, но не имеет никакого отношения ответ.

576 3

css iphone viewport

3 ответов:

Comments

Ничего не найдено.

davidcl · Accepted Answer · 2016-01-12 00:49:09

Документация Mozilla по мета-тегу viewport довольно хорошо объясняет это поведение (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag )
Для страниц, задающих начальный или максимальный масштаб, это означает, что свойство width фактически преобразуется в минимальную ширину видового экрана. Например, если ваш макет должен иметь ширину не менее 500 пикселей, вы можете использовать следующую разметку. При ширине экрана более 500 пикселей браузер будет расширяться видовое окно (вместо увеличения), чтобы соответствовать экрану:
<meta name="viewport" content="width=500, initial-scale=1">
По расширению, если width=device-width имеет разрешение 320, но экран имеет ширину 480 пикселей, браузер также расширит видовой экран макета до 480.

Также из того же документа:

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

Я думаю, что поведение несколько изменилось в последние версии iOS, но это может привести к путанице в понимании того, что происходит, так как на некоторых устройствах видовой экран макета иногда будет отличаться, когда страница загружается в альбомной ориентации, а затем поворачивается в альбомной ориентации.

Mozilla продолжает говорить:
Если веб-разработчики хотят, чтобы их настройки масштаба оставались согласованными при переключении ориентаций на iPhone, они должны добавить максимальное значение масштаба, чтобы предотвратить это масштабирование, которое имеет иногда нежелательный побочный эффект предотвращения увеличения масштаба пользователями:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Я не поклонник этой техники; я думаю, что лечение в большинстве случаев хуже, чем болезнь.

Mike Kor · Accepted Answer · 2017-05-23 14:55:14

Это потому, что он вращает страницу, отрисованную в портретном режиме. Вам придется перерисовать страницу. Вот похожий Вопрос .

Emanuele Parisio · Accepted Answer · 2016-01-08 15:34:25

Я думаю, что проблема в том, что вы путаете ширину устройства и разрешение экрана/браузера.

Как в примере вы публикуете:

Эти пиксели не имеют ничего общего с фактической плотностью пикселей устройства или даже со слухами о предстоящем промежуточном слое. По сути, это абстрактная конструкция, созданная специально для нас, веб-разработчиков.

Другими словами, ширина / высота отражает значения документа. функцию documentelement. clientWidth / Height, в то время как device-width/height отражает значения экрана.ширина / высота. (На самом деле они делают это во всех браузерах, даже если зеркальные значения неверны.)

Это дисплей retina, и разница только в большем пиксельном рендеринге от iphone, поэтому браузер будет рендерить полный экран даже с шириной устройства 320px в ландшафте. большая проблема с iphone заключается в том, что эта разница не меняется между портрет / пейзаж.

И

Вы можете задать ширину видового экрана макета для любого размера, включая ширину устройства. Этот последний берет экран.ширина (в пикселях устройства) как его ссылка и изменяет размер видового экрана макета соответственно.

Где пиксель устройства (The screen) отличается от visual viewport
<meta name="viewport" content="width=device-width;initial-scale=1.0" />
Там ширина устройства всегда будет иметь 100% ширину экрана.
<meta name="viewport" content="width=320px;initial-scale=1.0" />
Там вы должны проверить, если нет никаких изменений на iphone или DIV будет удлинение / разрыв экрана в ландшафте

Я думаю, что этот источник корректен только при использовании media-query с шириной устройства (не видимой на iphone), потому что если вы используете обычный media query, вы можете увидеть, что эффективное соотношение пикселей рендеринга браузера изменяется от 320px до 480px

Max-width-это ширина целевой области отображения, например браузера; max-device-width-это ширина всей области отображения устройства, то есть собственно экрана устройства.

Если вы используете max-device-width, то при изменении размера окна браузера на рабочем столе стиль CSS не изменится на другую настройку запроса мультимедиа;

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