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

Question

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

У меня есть таблица стилей 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

добавлено 09 Январь 2013 в 04:46 автор Supuhstar отредактировано 04 Август 2015 в 02:58

Просмотры: 8

источник

nl ja de

@Shmiddty «Док» всегда виден. Когда экран становится <= 4 дюйма, он просто меняет форму, чтобы выглядеть как вертикальный список.

добавлено 09 Январь 2013 в 11:42, автор Supuhstar, источник

Вы действительно не можете в современных браузерах. Браузеры просто не говорят правду об их размерах экрана, и часто они просто ничего не знают. Все, что вы можете сделать - это код для размеров в пикселях (сообщает), и полагайте, что производители устройств разработали разумные экраны. (И иногда, как и iPad Mini, производители терпят неудачу).

добавлено 09 Январь 2013 в 04:51, автор Pointy, источник

@Shmiddty хорошо, да, вы могли бы собрать базу данных строк useragent, но, например, в случае iPad Mini, даже это не сработает - нет известного способа сказать iPad Mini с iPad 2. И вы не можете сказать если у меня есть ноутбук, подключенный к крошечному ЖК-экрану.

добавлено 09 Январь 2013 в 04:56, автор Pointy, источник

@Pointy достаточно справедливо. :)

добавлено 09 Январь 2013 в 04:57, автор Shmiddty, источник

@Pointy, это не совсем так. Каждое устройство имеет определенное разрешение (PPI), если вы знаете, с каким устройством вы работаете, вы знаете, сколько пикселей составляет дюйм для этого устройства. Хотя это не лучший способ сделать это длинным выстрелом, это должно быть возможно.

добавлено 09 Январь 2013 в 04:54, автор Shmiddty, источник

Вероятно, вам лучше было бы проверить, является ли док-станция «видимой», и отключить изменение размера, если это не так.

добавлено 09 Январь 2013 в 04:52, автор Shmiddty, источник

4 ответы

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

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

Вот ссылка на сайт с функцией ( 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

добавлено 09 Январь 2013 в 04:54 автор Plynx

источник

@Pointy Я думаю, что это личная предвзятость и неконструктивный комментарий, особенно учитывая, что это решение работает, по-видимому, в 100% случаев.

добавлено 10 Январь 2013 в 06:07, автор Supuhstar, источник

@Pointy Я думаю, что дело в том, что на этом пути все равно, прав ли браузер; он синхронно с измерениями CSS. Если браузер был изобретен, что точно с этими измерениями, то этот метод все равно будет работать.

добавлено 10 Январь 2013 в 12:06, автор Supuhstar, источник

Этот скрипт действительно не работает. Все браузеры относятся к 1in как к синониму 96px , независимо от размера экрана.

добавлено 09 Январь 2013 в 11:53, автор Pointy, источник

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

Мини-курс по Angular и NgRx

16 видео-уроков

Инструменты успешного делегирования

Автор: Евгений Попов

автор Walkinraven · Answer 1 · 2013-12-31T03:14Z

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

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

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.

автор Diodeus - James MacFarlane · Answer 2 · 2013-01-09T04:53Z

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

0

добавлено 09 Январь 2013 в 04:53 автор Diodeus - James MacFarlane

источник

@Pointy Много, да, но я считаю, что iOS 5+ Safari отлично справляется с измерениями в дюймах

добавлено 09 Январь 2013 в 11:40, автор Supuhstar, источник

Фактически, Safari мог бы хорошо справиться, если на экране было 192 физических ppi, потому что он сообщает 1in = 96px, а затем масштабирует любые данные, отличные от Retina, на 2. Но поскольку на самом деле экран имеет 326ppi, это даже не удаленно закрыть.

добавлено 19 Август 2013 в 07:28, автор abarnert, источник

@Supuhstar jsbin.com/ovider/1 - все браузеры рассматривают 1in как что означает 96px , независимо от фактического шага точки экрана. В этом отношении Safari может выполнять только «хорошую работу», если на экране фактически имеется 96 физических пикселей на дюйм.

добавлено 09 Январь 2013 в 11:50, автор Pointy, источник

Браузеры занимаются физическими измерениями. Если вы создадите элемент с измерениями «cm» или «in», браузер применит фиксированное соотношение пикселей, которое может или не может иметь ничего общего с реальностью. Насколько мне известно, все мобильные и настольные браузеры сообщают, что дюйм содержит 96 пикселей, независимо от фактического размера экрана.

добавлено 09 Январь 2013 в 04:58, автор Pointy, источник

автор Halcyon · Answer 3 · 2013-01-09T04:58Z

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

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

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