Перейти к содержимому

Фотография
- - - - -

Разница между разрешением экрана планшета и браузера


  • Вы не можете создать новую тему
  • Закрытая тема Тема закрыта
В теме одно сообщение

#1 Erik-lv

Erik-lv

    Прохожий

    Топикстартер
  • Новичок
  • 0
    1 сообщ.

Отправлено 25 Июль 2018 в 16:25

Возникла проблема при тестировании сайта на планшете. Дизайн, рассчитанный на данное разрешение, не отображается. Планшет Lenovo 8 дюймов 800х1280, все стандартное (Андроид, Хром), со всеми апдейтами.

 

Проверил разрешение онлайн. Разрешение экрана 800х1280, а разрешение браузера 601х794, т.е. существенно меньше.  Вот по этому разрешению и загружается сайт, т.е. версия для смартфонов.

 

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

 

В итоге оба варианта выглядят плохо. Разработчик утверждает, что все сделал праильно, для самых популярных стандартных разрешений 768х1024, проверил на адаптивных сайтах, все должно работать. Он уверен, что разница в разрешении экрана и браузера - индивидуальная проблема.

 

Я проверил еще с нескольких планшетов, с аналогичным результатом. Например, на 7 дюймовом планшете при вертикальном просмотре ширина экрана 800 пикселей, а разрешение браузера - 536. Соответственно дизайн для 768 пикселей не отображается.

 

Разбираясь в проблеме, я выяснил, что все браузеры используют авто-масштабирование. Оно зависит от диагонали экрана и тем сильнее, чем диагональ меньше. В Мозиле я даже нашел способ убрать эту функцию, изменив один параметр в конфиге. Только после этого разрешение браузера совпало с физическим и я увидел нужный дизайн. Это по факту значит, что физические разрешения 766 и 1024 неактуальны, так как в браузере они существенно меньше. Разработчик несогласен.

 

Для проверки разрешения использовал сайт myresolutionis.ru

Приложил скриншот, на кором видна разница разрешений.

 

Может кто-нибудь объяснить это противоречие между теорией и реальностью?

Прикрепленные изображения

  • Screenshot_20180723-195850.png

  • 0

Спонсор

#2 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1016
    3 719 сообщ.

Отправлено 25 Июль 2018 в 18:33

Разработчик утверждает, что все сделал праильно, для самых популярных стандартных разрешений 768х1024, проверил на адаптивных сайтах, все должно работать. Он уверен, что разница в разрешении экрана и браузера - индивидуальная проблема.

Значит плохой у вас разработчик. Адаптивный дизайн на то и адаптивный, чтобы подстраивался под 99% разрешений (в данном случае не экрана, а страницы, то есть браузера). Адаптивные вёрстки подстраиваются под большинство разрешений, начиная с 320px по ширине и до.... оговаривается отдельно и зависит от макета, обычно заканчивается в районе 720p (~1200px), но может быть и до 4K (4096px), если это оговорено отдельно.

 

 

 

Разбираясь в проблеме, я выяснил, что все браузеры используют авто-масштабирование.

Попробуйте добавить в HEAD вашего файла такую строчку

<meta name="viewport" content="width=device-width, initial-scale=1" />
Для проверки разрешения использовал сайт

Забудьте про эти сайты, это как корове пятая нога. Как говорит Татьяныч: "нет ничего лучше бразуера для проверок" (не дословно). То есть проверять лучше на настоящих устройствах и браузерах.

 

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

 

В Firefox - нажать CTRL+M, в хромоподобных (и вроде в Сафари тоже есть) F12 и там значок в виде телефона (сейчас название кнопки не скажу, только что переустановил ОС на новый HDD, сижу без многих программ ещё), в IE последних версий тоже есть подобное в "Инструментах разработчика" кнопочка похожая. Там можно "играться" разрешениями и некоторыми другими параметрами.


  • 0



Похожие темы Свернуть

Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей