Для меня маленький красивый, поэтому я использую эту технику:
В файле 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. Вместо того, чтобы использовать вышеуказанное решение, просто используйте следующее:
$(function() {
let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
if (isMobile) {
//Conditional script here
}
});
Поддержка браузера: http://caniuse.com/#feat=matchmedia
Преимущество этого метода заключается в том, что он не только проще и короче, но также может условно нацеливаться на разные устройства, такие как смартфоны и планшеты, отдельно, если это необходимо, без добавления каких-либо фиктивных элементов в DOM.