[Настройка Linux, Разработка веб-сайтов, CSS, JavaScript] Просто вертикальный монитор не значит, что я на телефоне (перевод)
Автор
Сообщение
news_bot ®
Стаж: 7 лет 8 месяцев
Сообщений: 27286
YouTube на вертикальном экране
Да, я странный человек, полностью признаю. На домашнем компьютере у меня установлен вертикальный монитор. Я составляю и читаю и много длинных документов — и такой форм-фактор меня вполне устраивает.
Я давно так делаю. Это естественная часть моего рабочего процесса. Такая ориентация экрана лучше подходит для любых документов, которые длиннее электронного письма. Большинство приложений Linux нормально работают в таком формате, хотя меню не всегда помещается на экране.
Но сайты в интернете — это что-то совершенно ненормальное! Многие думают, что вертикальный экран — это обязательно мобильное устройство!
Да, проблема мелкая и касается лично меня, но всё-таки есть смысл пояснить, какие последствия возникают, в чём причина и как её исправить.
Примеры
Вот некоторые типичные веб-сайты на моём 24-дюймовом вертикальном мониторе. Слева реальный рендер, и справа — как должно быть.
Just Eat
The Guardian
Poular Science
Проблемы
В такой ситуации у меня возникает несколько проблем:
- Панель навигации прячется за кнопкой?
- Некоторые элементы типа каруселей работают только на тачскрине
- Изображения загружаются с низким разрешением для 6-дюймовых экранов, а затем растягиваются на 24 дюйма
- Много пространства тратится впустую на «главные изображения» и кнопки, удобные для пальцев
- Некоторые материалы просто недоступны для мобильных пользователей
Почему так происходит
Нативное разрешение монитора 1080*1920. Но при таком разрешении шрифты для меня слишком маленькие — учитывая, как далеко я сижу от экрана. В дистрибутиве Pop_OS Linux есть утилита Gnome Tweaks, который позволяет масштабировать конкретно шрифты, а не разрешение.
Gnome Tweaks c коэффициентом масштабирования шрифтов
Коэффициент масштабирования 1,5 означает эффективное разрешение экрана 720*1280.
Сниффинг юзер-агента считается плохой практикой и не рекомендуется. Поэтому большинство сайтов не утруждают себя проверкой iPhone или Android, а вместо этого проверяют разрешение экрана средствами JavaScript или CSS.
Они видят экран 720p в вертикальной ориентации и разумно предполагают, что это маленькое экранное устройство.
Решение (с пользовательской стороны)
Уменьшаем масштаб в браузере! Это очевидный ответ. Если трижды нажать Ctrl минус, то эффективное разрешение вернётся на 1080*1920. Но тогда некоторые сайты станут слишком мелкими для нормального чтения. То есть нужно уменьшить масштаб страницы и увеличить шрифт.
Я попробовал Fractional Scaling — оно нормально работает в Wayland, но шрифты расплываются и становятся нечёткими.
Поэтому я установил масштаб шрифта на 1,36, что даёт разрешение 864*1536 — этого достаточно, чтобы большинство сайтов не распознавали крошечное мобильное устройство.
Но это не моя проблема.
Решение (с серверной стороны)
ПЕРЕСТАНЬТЕ НАИВНО ИСПОЛЬЗОВАТЬ РАЗРЕШЕНИЕ!
Да, нет никакого способа узнать физический размер экрана пользователя. Такой функциональности просто не существует ни в JavaScript, ни в CSS.
Но вы можете узнать DPI. Ну, примерно…
CSS позволяет узнать DPI экрана
Сайт https://DPI.lv/ Леа Веру верно распознаёт разрешение моего монитора 1080*1920! Независимо от масштабирования шрифтов — он всегда показывает правильное разрешение.
var dppx = window.devicePixelRatio;
var screenWidth = screen.width * dppx;
var screenHeight = screen.height * dppx;
Именно так определяется реальное разрешение независимо от масштабирования на уровне ОС.
Другой детектор DPI показывает количество точек на дюйм. Мой вертикальный монитор определяется как 120 DPI.
Это не совсем правильно. И разные браузерные движки по-разному вычисляют DPI. Вот какие результаты получаются у меня в Linux на трёх основных движках для рендеринга:
- Chrome: 5,14 пикселей/мм
- Firefox: 4,73 пикселей/мм
- WebKit: 3.78 пикселей/мм
Если физически измерить экран, то получается около 3,62 пикселей/мм!
Очевидно, что метрика не совсем точная, но она даёт веб-разработчику хотя бы приблизительное представление о физическом размере экрана.
===========
Источник:
habr.com
===========
===========
Автор оригинала: Terence Eden
===========Похожие новости:
- [JavaScript, Монетизация мобильных приложений, Голосовые интерфейсы] Как создавать навыки для виртуальных ассистентов Салют, выйти на многомиллионную аудиторию Сбера и выиграть 2,5 млн руб?
- [JavaScript, ReactJS] createRef, setRef, useRef и зачем нужен current в ref
- [Настройка Linux, Open source, Системное администрирование, IT-инфраструктура, Серверное администрирование] Тиражирование Fedora из-под Fedora
- [Разработка веб-сайтов, *nix, Разработка под e-commerce, Управление e-commerce] Интернет-магазин «на минималках»
- [IT-стандарты, VueJS, TypeScript] Идеальное Vue приложение на Typescript
- [Разработка веб-сайтов, JavaScript] Основы отладки клиентских JS-приложений
- [Open source, DIY или Сделай сам, Микросервисы, Kubernetes] Новая версия нашего самописного плагина, который скачали 250 тысяч раз
- [Разработка веб-сайтов, JavaScript, Проектирование и рефакторинг, ReactJS] Архитектурный паттерн Dependency Injection в React-приложении
- [Разработка веб-сайтов, PHP, Проектирование и рефакторинг, API] Хьюстон, у нас проблема с интерпретацией ошибок
- [Настройка Linux, Серверное администрирование] Почему линукс использует swap-файл
Теги для поиска: #_nastrojka_linux (Настройка Linux), #_razrabotka_vebsajtov (Разработка веб-сайтов), #_css, #_javascript, #_monitor (монитор), #_vertikalnyj_ekran (вертикальный экран), #_masshtabirovanie_shriftov (масштабирование шрифтов), #_gnome_tweaks, #_fractional_scaling, #_wayland, #_gnome, #_razreshenie_ekrana (разрешение экрана), #_detektor_dpi (детектор DPI), [url=https://torrents-local.xyz/search.php?nm=%23_blog_kompanii_datatsentr_«miran»&to=0&allw=0&o=1&s=0&f%5B%5D=820&f%5B%5D=959&f%5B%5D=958&f%5B%5D=872&f%5B%5D=967&f%5B%5D=954&f%5B%5D=885&f%5B%5D=882&f%5B%5D=863&f%5B%5D=881&f%5B%5D=860&f%5B%5D=884&f%5B%5D=865&f%5B%5D=873&f%5B%5D=861&f%5B%5D=864&f%5B%5D=883&f%5B%5D=957&f%5B%5D=859&f%5B%5D=966&f%5B%5D=956&f%5B%5D=955]#_blog_kompanii_datatsentr_«miran» (
Блог компании Дата-центр «Миран»
)[/url], #_nastrojka_linux (
Настройка Linux
), #_razrabotka_vebsajtov (
Разработка веб-сайтов
), #_css, #_javascript
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 31-Окт 19:07
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 7 лет 8 месяцев |
|
 YouTube на вертикальном экране Да, я странный человек, полностью признаю. На домашнем компьютере у меня установлен вертикальный монитор. Я составляю и читаю и много длинных документов — и такой форм-фактор меня вполне устраивает. Я давно так делаю. Это естественная часть моего рабочего процесса. Такая ориентация экрана лучше подходит для любых документов, которые длиннее электронного письма. Большинство приложений Linux нормально работают в таком формате, хотя меню не всегда помещается на экране. Но сайты в интернете — это что-то совершенно ненормальное! Многие думают, что вертикальный экран — это обязательно мобильное устройство! Да, проблема мелкая и касается лично меня, но всё-таки есть смысл пояснить, какие последствия возникают, в чём причина и как её исправить. Примеры Вот некоторые типичные веб-сайты на моём 24-дюймовом вертикальном мониторе. Слева реальный рендер, и справа — как должно быть.  Just Eat  The Guardian  Poular Science Проблемы В такой ситуации у меня возникает несколько проблем:
Почему так происходит Нативное разрешение монитора 1080*1920. Но при таком разрешении шрифты для меня слишком маленькие — учитывая, как далеко я сижу от экрана. В дистрибутиве Pop_OS Linux есть утилита Gnome Tweaks, который позволяет масштабировать конкретно шрифты, а не разрешение.  Gnome Tweaks c коэффициентом масштабирования шрифтов Коэффициент масштабирования 1,5 означает эффективное разрешение экрана 720*1280. Сниффинг юзер-агента считается плохой практикой и не рекомендуется. Поэтому большинство сайтов не утруждают себя проверкой iPhone или Android, а вместо этого проверяют разрешение экрана средствами JavaScript или CSS. Они видят экран 720p в вертикальной ориентации и разумно предполагают, что это маленькое экранное устройство. Решение (с пользовательской стороны) Уменьшаем масштаб в браузере! Это очевидный ответ. Если трижды нажать Ctrl минус, то эффективное разрешение вернётся на 1080*1920. Но тогда некоторые сайты станут слишком мелкими для нормального чтения. То есть нужно уменьшить масштаб страницы и увеличить шрифт. Я попробовал Fractional Scaling — оно нормально работает в Wayland, но шрифты расплываются и становятся нечёткими. Поэтому я установил масштаб шрифта на 1,36, что даёт разрешение 864*1536 — этого достаточно, чтобы большинство сайтов не распознавали крошечное мобильное устройство. Но это не моя проблема. Решение (с серверной стороны) ПЕРЕСТАНЬТЕ НАИВНО ИСПОЛЬЗОВАТЬ РАЗРЕШЕНИЕ! Да, нет никакого способа узнать физический размер экрана пользователя. Такой функциональности просто не существует ни в JavaScript, ни в CSS. Но вы можете узнать DPI. Ну, примерно… CSS позволяет узнать DPI экрана Сайт https://DPI.lv/ Леа Веру верно распознаёт разрешение моего монитора 1080*1920! Независимо от масштабирования шрифтов — он всегда показывает правильное разрешение. var dppx = window.devicePixelRatio;
var screenWidth = screen.width * dppx; var screenHeight = screen.height * dppx; Именно так определяется реальное разрешение независимо от масштабирования на уровне ОС. Другой детектор DPI показывает количество точек на дюйм. Мой вертикальный монитор определяется как 120 DPI. Это не совсем правильно. И разные браузерные движки по-разному вычисляют DPI. Вот какие результаты получаются у меня в Linux на трёх основных движках для рендеринга:
Если физически измерить экран, то получается около 3,62 пикселей/мм! Очевидно, что метрика не совсем точная, но она даёт веб-разработчику хотя бы приблизительное представление о физическом размере экрана. =========== Источник: habr.com =========== =========== Автор оригинала: Terence Eden ===========Похожие новости:
Блог компании Дата-центр «Миран» )[/url], #_nastrojka_linux ( Настройка Linux ), #_razrabotka_vebsajtov ( Разработка веб-сайтов ), #_css, #_javascript |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 31-Окт 19:07
Часовой пояс: UTC + 5