Физический размер экрана 'обнаружение', основанный на пользовательском агенте в PHP / javascript

Question

Итак, существуют способы определения «мобильных» браузеров и размеров экрана с помощью javascript и php. Однако размер экрана всегда возвращается в пикселях, и в наши дни мобильный может означать что угодно.

Я хочу узнать, насколько большой дисплей устройства, когда он мобильный, что с планшетами, которые появляются везде. Причина этого в том, что я хочу выбрать таблицу стилей для устройств с маленькими экранами и по умолчанию использовать обычную таблицу стилей для всего остального. Например, я хочу, чтобы iPad, kindle fire, hp touchpad и т. Д. Отображали обычную таблицу стилей, но мне нужна другая таблица стилей для мобильных телефонов или любого устройства с дисплеем размером с человеческую руку.

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

.. может быть, есть способ найти плотность пикселей и затем применить ширину / высоту экрана в пикселях к этому ..

Answer 1

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

К сожалению, как Джон Хантобнаружил, что даже WURFL не дает точного физического размера экрана.

Один полуобход - это эвристика, предполагающая, что если размер x или y меньше 768 пикселей, то вы находитесь на телефоне (*) итаким образом, по умолчанию обслуживайте «мобильную» версию сайта с одним столбцом.

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

(*) Почему 768 пикселей? Потому что все 10 "планшеты любой важности имеют разрешение не менее 1024x768 или 1280x800, тогда как даже телефоны с большими экранами, такие как iPhone5 или HTC HD5 имеют ширину менее 768 пикселей (iPhone 5 - 640x1136, HTC HD5 1280x720).Это, вероятно, не будет работать на гигантских экранах Samsung, но на этих устройствах настольная версия, обслуживаемая по умолчанию, не так раздражает.

Answer 2

При использовании WordPress функция wp_is_mobile имеет ту же проблему, что и установка флага «mobile» для планшетов и телефонов. Моя проблема в том, что я хочу, чтобы телефоны получали ограниченную страницу без слайдера изображений верхней части страницы, чтобы ускорить загрузку / прорисовку сайта. Планшеты, как правило, имеют более быстрый доступ к Wi-Fi, чем 3G, или, по сути, медленнее, чем Wi-Fi 4g.

Адаптивная тема WordPress Customizr, которую я использую, использует автоадаптацию Twitter, но все еще работает слишком медленно на телефонах с большими страницами изображений. Поэтому вопрос для моего сайта - не просто размер или разрешение экрана, а скорость отображения данных и экрана.

Рокко Алиберти (Rocco Aliberti) в этом форуме на сайте themesandco сделал полезное предложение, сочетающее плагин для определения браузера, который настраивает функцию is_tablet, а затем объединяет его со встроенной функцией wordpress wp_is_mobile, чтобы получить "wp_is_mobile () &&! Is_tablet ()" -e.g. устройство мобильное и не является планшетом. http://www.themesandco.com/support-forums/topic/jetpack-mobile-issue/#post-23308

Answer 3

вы можете проверить размер экрана с помощью javascript innerWidth дает / возвращает ширину устройства вне зависимости от того, находитесь ли вы на рабочем столе или на мобильном телефоне, больше фильтра вы можете использовать в качестве пользовательского агента с этим кодом javascript innerWidth. *

тогда после этого вы можете применить CSS на основе размера экрана.

Answer 4

Вы можете использовать такие платформы, как Bootstrap, которые показывают / скрывают столбцы или данные в зависимости от разрешения экрана.Это хорошо работает в том, что касается просто отображения.

Но в идеале вы также хотели бы, чтобы ваш язык сценариев знал это, чтобы он не обрабатывал / не выполнял определенные данные, которые не будут отображаться при загрузке.

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

Это мой список пожеланий для будущих версий реализации HTTP / W3c / Browser.

Answer 5

Правильный ответ. Я думаю, что это использование адаптивного подхода к макету, так как вы никогда не сделаете его правильным для всех различных устройств (каждый день появляются сотни новых устройств).

Answer 6

http://wurfl.sourceforge.net/nphp/

Похоже, вы можете получить эту информацию от WURFL API..cool!