Для меня маленький красивый, поэтому я использую эту технику:
В файле CSS:
/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
#some-element { display: none; }
}
В файле jQuery / JavaScript:
$( document ).ready(function() {
var is_mobile = false;
if( $('#some-element').css('display')=='none') {
is_mobile = true;
}
// now i can use is_mobile to run javascript conditionally
if (is_mobile == true) {
//Conditional script here
}
});
Моя цель состояла в том, чтобы мой сайт был «дружественным для мобильных устройств». Поэтому я использую CSS Media Queries для отображения / скрытия элементов в зависимости от размера экрана.
Например, в моей мобильной версии я не хочу активировать Facebook Like Box, потому что он загружает все эти изображения профиля и прочее. И это не хорошо для мобильных посетителей. Итак, помимо скрытия элемента контейнера, я также делаю это внутри блока кода jQuery (см. Выше):
if(!is_mobile) {
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
Вы можете увидеть это в действии на http://lisboaautentica.com
Я все еще работаю над мобильной версией, поэтому на момент написания этой статьи она все еще выглядит не так, как должна.
Обновление по dekin88
Для обнаружения мультимедиа встроен JavaScript API.
Вместо того, чтобы использовать вышеупомянутое решение, просто используйте следующее:
$( document ).ready(function() {
var isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
if (isMobile) {
//Conditional script here
}
});
Поддержка браузеров: http://caniuse.com/#feat=matchmedia
Преимущество этого метода заключается в том, что он не только проще и короче, но также может условно нацеливаться на разные устройства, такие как смартфоны и планшеты, отдельно, если это необходимо, без добавления каких-либо фиктивных элементов в DOM.