RWD и размер экрана смартфона x размер окна браузера

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

Browser window size: 980 x 1392
Screen size: 360 x 640

Каким-то образом окно браузера становится намного больше экрана, и сайт выглядит как на рабочем столе. Кажется, мне нужно, чтобы Browser window size было примерно таким же, как Screen size, чтобы на смартфоне появлялась "маленькая версия" сайта. Как мне этого добиться?

РЕДАКТИРОВАТЬ

После того, как я добавил

<meta name='viewport' content='width=device-width, initial-scale=1'>

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


css responsive-design screen-size smartphone
person Rodrigo    schedule 15.08.2018    source источник
comment
Ваше требование очистить. Не путайте между собой размер окна браузера и размер окна экрана. Размер окна экрана будет постоянным при изменении размера, а окно браузера изменится при изменении размера.   -  person Aravind S    schedule 15.08.2018
comment
@AravindS Я даже не могу изменить размер окна браузера на своем смартфоне. Я не думаю, что вы поняли мою мысль.   -  person Rodrigo    schedule 15.08.2018
comment
Возможно, эта статья объясняет странное поведение мобильных браузеров по умолчанию: quirksmode.org/mobile/viewports2.html   -  person Ilya Streltsyn    schedule 18.08.2018

Ответы (2)


arrow_upward
1
arrow_downward

Если вы разрабатываете веб-сайт и хотите, чтобы он был RWD, вы должны покрывать большую часть экрана, например настольные компьютеры, планшеты и мобильные устройства, поэтому загрузочные медиа-запросы могут быть хорошим выбором для вашего веб-сайта, но если вы решили использовать 640 пикселей в качестве точки перехода между мобильным и настольным компьютером! тогда как насчет другого размера экрана, вам, вероятно, понадобится что-то вроде следующего кода, чтобы охватить большинство экранов.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

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

browsersize — это инструменты для тестирования веб-страниц определенного размера, например инструменты Chrome Inspect Element Response.

Но viewport — это быстрое решение вашей проблемы.

<meta name='viewport' content='width=device-width, initial-scale=1'>

Элемент <meta> окна просмотра дает браузеру инструкции о том, как управлять размерами и масштабированием страницы.

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая зависит от устройства).

Часть initial-scale=1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером. ссылка

person Nazari    schedule 21.08.2018

arrow_upward
1
arrow_downward

Это связано с разницей между window.innerWidth и screen.width.

  • window.innerWidth дает физические пиксели окна (внутреннюю ширину окна или, точнее, область просмотра), которое включает полосы прокрутки.
  • screen.width предоставляет логические (пиксели CSS) экран (не только окно браузера)

Также добавление метатега viewport устанавливает ширину страницы в соответствии с шириной экрана устройства.

Это функция, которую https://browsersize.com/ использует для отображения размеров:

function updateSizes() {

    var uniwin = {
        width: window.innerWidth || document.documentElement.clientWidth
            || document.body.offsetWidth,
        height: window.innerHeight || document.documentElement.clientHeight
            || document.body.offsetHeight
    };

    $("info_sw").innerHTML = screen.width;
    $("info_sh").innerHTML = screen.height;
    $("info_ww").innerHTML = uniwin.width;
    $("info_wh").innerHTML = uniwin.height;
}
person Saeed    schedule 19.08.2018