Есть ли способ определить, используется ли карманный браузер (iOS/Android-телефон/планшет)?
Я пробовал это с целью сделать элемент пополам в браузере на переносном устройстве, но это не имеет значения.
width: 600px;
@media handheld { width: 300px; }
Можно ли это сделать, и если да, то как?
edit: На указанной странице в ответе jmaes я использовал
@media only screen and (max-device-width: 480px).
Обновление (июнь 2016 г.). Теперь я пытаюсь поддерживать сенсорный и мышь на каждом разрешении, так как пейзаж устройства медленно размывает линии между вещами и не касаются устройств. iPad Pros - это сенсорный экран с разрешением 13-дюймового ноутбука. Ноутбуки Windows теперь часто поставляются с сенсорными экранами.
Другие аналогичные ответы SO (см. другой ответ на этот вопрос) могут иметь разные способы попытаться выяснить, какое устройство использует пользователь, но ни один из них не является безупречным. Я рекомендую вам проверить эти ответы, если вам абсолютно необходимо попытаться определить устройство.
iPhones, например, игнорировать запрос handheld (Источник). И я не удивлюсь, если и другие смартфоны тоже по тем же причинам.
Текущий лучший способ, которым я пользуюсь для обнаружения мобильного устройства, - это узнать его ширину и использовать соответствующий мультимедийный запрос, чтобы поймать его. В этой ссылке перечислены некоторые популярные. Быстрый поиск в Google даст вам любые другие, которые могут вам понадобиться. Я уверен.
Для других iPhone-специфических (например, Retina display) проверьте, что первая ссылка, которую я разместил.
Не обнаруживайте мобильные устройства, и отправляйте их на стационарные.
В настоящее время (2016) существует способ обнаружения точек на дюйм/см/пикселей, которые, как представляется, работают в большинстве современных браузеров (см. http://caniuse.com/#feat=css-media-resolution). Мне нужен был способ различать относительно небольшой экран, ориентация не имела значения, и стационарный монитор компьютера.
Поскольку многие мобильные браузеры не поддерживают это, можно написать общий код css для всех случаев и использовать это исключение для больших экранов:
@media (max-resolution: 1dppx) {
/* ... */
}
Обе версии Windows XP и 7 имеют значение по умолчанию 1 точка на пиксель (или 96 точек на дюйм). Я не знаю о других операционных системах, но это работает очень хорошо для моих нужд.
Изменить: dppx, похоже, не работает в Internet Explorer. Вместо этого используйте (96) dpi.
Обнаружение мобильных устройств
Связанный ответ: fooobar.com/questions/209287/...
Там нет единого подхода, который действительно надежный. Лучше всего смешивать и сочетать различные трюки по мере необходимости, чтобы увеличить шансы на успешное обнаружение более широкого диапазона карманных устройств. См. Ссылку выше для нескольких разных опций.
Я знаю, что это старый поток, но я думал, что это может кому-то помочь:
Мобильные устройства имеют большую высоту, чем ширина, напротив, компьютеры имеют большую ширину, чем высота. Например:
@media all and (max-width: 320px) and (min-height: 320px)
поэтому это нужно сделать для каждой ширины, которую я предполагаю.
Я считаю, что гораздо более надежным способом обнаружения мобильных устройств является просмотр строки navigator.userAgent. Например, на моем iPhone строка пользовательского агента:
Mozilla/5.0 (iPhone, iPhone с процессором OS 10_3_2, как Mac OS X) AppleWebKit/603.2.4 (KHTML, например, Gecko) Версия /10.0 Mobile/14F89 Safari/602.1
Обратите внимание, что эта строка содержит два ключевых слова: iPhone и Mobile. Другие строки пользовательского агента для устройств, которые у меня отсутствуют, предоставляются по адресу:
https://deviceatlas.com/blog/list-of-user-agent-strings
Используя эту строку, я устанавливаю логическую переменную JavaScript bMobile на своем веб-сайте как true, так и false, используя следующий код:
var bMobile = // will be true if running on a mobile device
navigator.userAgent.indexOf( "Mobile" ) !== -1 ||
navigator.userAgent.indexOf( "iPhone" ) !== -1 ||
navigator.userAgent.indexOf( "Android" ) !== -1 ||
navigator.userAgent.indexOf( "Windows Phone" ) !== -1 ;