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

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

У меня проблема с содержанием. На домашней странице есть интерфейс в стиле закрепления, который динамически изменяет высоту в зависимости от текущей высоты и ширины окна, чтобы текст и элементы никогда не покидали экран. Однако мой JS, который определяет этот размер, не знает, когда таблица стилей изменилась для портативных устройств или небольших экранов, поэтому поведение в этом режиме непредсказуемо продолжается. Как я могу использовать JavaScript, чтобы обнаружить, когда страница меньше или равна 4 дюймам, чтобы я мог отключить автоматическое изменение размера тогда преобразованного дока?

Источник

4 ответа

Решение

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

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

Используя эту функцию, вы можете проверить if (getUnits(document.body, "width").inch < 4), Для любопытных эта функция работает путем создания временного элемента в требуемом пространстве измерений и считывания отношения к пикселям. Таким образом, вы позволяете браузеру отвечать, основываясь на собственных знаниях PPI устройства. Так что это своего рода полифилл для window.devicePixelRatioОднако в основном браузеры лгут о своем PPI. Однако для этих целей это не имеет значения, поскольку они будут применять одну и ту же ложь к вашему дюймовому CSS.

Источник

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

  1. установить скрытый <div id="screen" style="display:none"> в вашем HTML.

  2. В CSS используйте медиа-запрос, например:

      @media screen
  { div#screen{color: blue;} }

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

Тогда вы можете прочитать div#screen цвет в JS, чтобы выбрать действия.

Кроме того, вы должны принять во внимание событие изменения размера окна JS.

Источник

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

Источник

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

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

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

Источник
Другие вопросы по тегам