лучший способ обнаружения мобильных браузеров с javascript/jquery?

Question

Для сайта, над которым я работаю, я реализую предварительную загрузку изображений с помощью javascript, но я, разумеется, не хочу называть мою функцию preload_images(), если кто-то находится на медленной полосе пропускания.

Для моего рынка единственными людьми с низкой пропускной способностью являются люди, использующие мобильный интернет на смартфоне.

Что лучше всего подходит для обнаружения этих пользователей, поэтому я могу избежать предварительной загрузки изображений для них?

---

вариант 1: обнаружение браузера ширина

if($(window).width() > 960){ preload... } 

---

вариант 2: обнаружение агента пользователя со списком браузера для предварительной загрузки для

if($.browser in array safelist){ preload... } 

---

есть любые лучшие варианты?

Answer 1

Возможно, с помощью директивы CSS @media, а также со скрытыми объектами?

.imagesToPreload {display:none;} 
@media screen { 
    #imageToPreload1 {background-image:url('blah.img');} 
} 
@media handheld { 
    #imageToPreload1 {background-image:none;} 
} 

Тогда в Javascript, вы можете получить все объекты в классе «imagesToPreload», прочитать свойство BackgroundImage и поджать, если его не нет.

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

Answer 2

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

Answer 3

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

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

Другим решением может быть что-то вроде: if($(window).width() < 320){ preload_smaller_images(); } Там меньше причин, чем раньше для мобильного просмотра опыт, чтобы быть более ограниченным, чем на рабочем столе.

CSS предложение Р. Хилла не самый худший, хотя (если это может быть сделано в CSS, она должна имо), он также может быть сделано на экране размер: @media handheld, screen and (max-width: 320px){ /* */ }