Почему некоторые веб-сайты для настольных компьютеров переключаются в мобильный режим при определенном процентном увеличении?

Question

Например, когда я захожу на этот сайт на своем рабочем столе и увеличиваю до 300%, веб-сайт превращается в мобильный режим. Кнопка меню появляется примерно с 300% увеличением (Google Chrome с разрешением экрана 1920 x 1080).

Так активируется мобильный режим или мобильные сайты - это разрешение экрана?

Answer 1

Так активируется мобильный режим или мобильные сайты - это разрешение экрана?

Да, именно так многие веб-сайты адаптируются под имеющееся пространство.

Смотрите Адаптивный веб-дизайн

Типичным способом достижения этого было бы иметь что-то вроде следующего в CSS

 /* ======== Styling common to all sized devices ======== */
 ...
 /* ========= Styling for desktops ===================== */
 @media screen and (min-width: 901px) {
 ...
 /* ========= Styling for tablets ===================== */
 @media screen and (min-width: 671px) and (max-width: 900px) {
 ...

Где основная часть CSS (скажем, 95%) находится в первом разделе, который сам по себе подходит для телефонов. Это отменяется в последующих разделах, чтобы переставить меню и показать дополнительные боковые панели и т.д.

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

Современные браузеры очень стараются делать "правильные вещи" при увеличении масштаба. Несмотря на то, что окно не изменило размер, они увеличивают контент и признают, что это в некотором роде эквивалентно уменьшению размера окна - поэтому они соответственно интерпретируют CSS.

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

Answer 2

Это зависит от того, как кодируется сайт, но обычно это связано с «виртуальным» разрешением - разрешением, при котором веб-браузер имеет разные уровни масштабирования. Таким образом, увеличение на 300% при 1920 x 1080 превращает его в область 640 x 360. Это разрешение, скорее всего, воспринимается веб-страницей как «мобильное» разрешение, следовательно, оно предоставляет вам мобильную версию.