Определение ширины веб-страницы в дюймах

У меня есть таблица стилей CSS, которая использует медиа-запросы для изменения отображения страницы в зависимости от того, сколько дюймов она имеет ширину (например, если она меньше 4 дюймов или отображается на карманном устройстве, она предполагает, дружественный ЛАФ).

The problem I have is with its content. On the homepage, there is a dock-style interface that dynamically changes height based on the current height and width of the window so that the text and items never leave the screen. However, my JS that determines this size does not know when the stylesheet has changed for handheld devices or small screens, so the behavior continues unpredictably in this mode. How can I use JavaScript detect when the page is less than or equal to 4 inches so that I can disable the auto-resizing of the then-reformed dock?

6
nl ja de
@Shmiddty «Док» всегда виден. Когда экран становится <= 4 дюйма, он просто меняет форму, чтобы выглядеть как вертикальный список.
добавлено автор Supuhstar, источник
Вы действительно не можете в современных браузерах. Браузеры просто не говорят правду об их размерах экрана, и часто они просто ничего не знают. Все, что вы можете сделать - это код для размеров в пикселях (сообщает), и полагайте, что производители устройств разработали разумные экраны. (И иногда, как и iPad Mini, производители терпят неудачу).
добавлено автор Pointy, источник
@Shmiddty хорошо, да, вы могли бы собрать базу данных строк useragent, но, например, в случае iPad Mini, даже это не сработает - нет известного способа сказать iPad Mini с iPad 2. И вы не можете сказать если у меня есть ноутбук, подключенный к крошечному ЖК-экрану.
добавлено автор Pointy, источник
@Pointy достаточно справедливо. :)
добавлено автор Shmiddty, источник
@Pointy, это не совсем так. Каждое устройство имеет определенное разрешение (PPI), если вы знаете, с каким устройством вы работаете, вы знаете, сколько пикселей составляет дюйм для этого устройства. Хотя это не лучший способ сделать это длинным выстрелом, это должно быть возможно.
добавлено автор Shmiddty, источник
Вероятно, вам лучше было бы проверить, является ли док-станция «видимой», и отключить изменение размера, если это не так.
добавлено автор Shmiddty, источник

4 ответы

Это нетривиальная проблема.

Вот ссылка на сайт с функцией ( getUnits ), чтобы получить текущий вычисленный стиль в единицах измерения по вашему выбору (включая дюймы) http://upshots.org/javascript/javascript-get-current-style-as-any-unit

Using this function, you could check if (getUnits(document.body, "width").inch < 4). The way this function works, for the curious, is by creating a temporary element in the desired measurement space and reading off the ratio to pixels. In this way you let the browser respond based on its own knowledge the device's PPI. So this is sort of a polyfill for window.devicePixelRatio, however browsers mostly lie about their PPI. For these purposes, though, it doesn't matter since they will be applying the same lie to your inch-unit CSS.

7
добавлено
@Pointy Я думаю, что это личная предвзятость и неконструктивный комментарий, особенно учитывая, что это решение работает, по-видимому, в 100% случаев.
добавлено автор Supuhstar, источник
@Pointy Я думаю, что дело в том, что на этом пути все равно, прав ли браузер; он синхронно с измерениями CSS. Если браузер был изобретен, что точно с этими измерениями, то этот метод все равно будет работать.
добавлено автор Supuhstar, источник
Этот скрипт действительно не работает. Все браузеры относятся к 1in как к синониму 96px , независимо от размера экрана.
добавлено автор Pointy, источник

Я не тестирую это на реальных браузерах, но он должен работать:

  1. set a hidden <div id="screen" style="display:none"> in your HTML.

  2. In CSS, use media query like:

      @media screen
      { div#screen{color: blue;} }
    
      @media screen and (min-width: 13in)
      { div#screen{color: red;} }
    

Then you can read the div#screen color in JS to choose the actions.

Also, you should take windows resize event into JS consideration.

1
добавлено
Просто отметив, что я изменил ваш пример CSS. Раньше неясно, какой цвет будет размером всего в 13 дюймов. Теперь он по умолчанию синий, и красный или более 13 дюймов.
добавлено автор Supuhstar, источник

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

0
добавлено
@Pointy Много, да, но я считаю, что iOS 5+ Safari отлично справляется с измерениями в дюймах
добавлено автор Supuhstar, источник
Фактически, Safari мог бы хорошо справиться, если на экране было 192 физических ppi, потому что он сообщает 1in = 96px, а затем масштабирует любые данные, отличные от Retina, на 2. Но поскольку на самом деле экран имеет 326ppi, это даже не удаленно закрыть.
добавлено автор abarnert, источник
@Supuhstar jsbin.com/ovider/1 - все браузеры рассматривают 1in как что означает 96px , независимо от фактического шага точки экрана. В этом отношении Safari может выполнять только «хорошую работу», если на экране фактически имеется 96 физических пикселей на дюйм.
добавлено автор Pointy, источник
Браузеры занимаются физическими измерениями. Если вы создадите элемент с измерениями «cm» или «in», браузер применит фиксированное соотношение пикселей, которое может или не может иметь ничего общего с реальностью. Насколько мне известно, все мобильные и настольные браузеры сообщают, что дюйм содержит 96 пикселей, независимо от фактического размера экрана.
добавлено автор Pointy, источник

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

Ответ будет заключаться в сохранении известного набора устройств и их соответствующей высоты пикселей.

Например, iPhone 5 выше iPhone 4, это влияет на эффект, который вы собираетесь использовать.

0
добавлено
Итак, ваше решение состоит в том, чтобы создать базу данных Javascript всех версий iOS, Android, Symbian, Blackberry, OS X, Linux и Windows, а также всех возможных комбинаций из них?
добавлено автор Supuhstar, источник
плохое обнаружение браузера . Кроме того, я ищу для измерения ширины, а не высоты.
добавлено автор Supuhstar, источник
Это несвязанные советы. Обнаружение браузера плохое, если вы проверяете функции или возможности, вы должны использовать обнаружение функции. Здесь вам нужен список устройств и их размеры экрана. Это несвязанная проблема.
добавлено автор Halcyon, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)