Para mim pequeno é lindo, então estou usando esta técnica:
No arquivo CSS:
/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
#some-element { display: none; }
}
No arquivo 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
}
});
Meu objetivo era ter meu site "otimizado para celular". Então, eu uso CSS Media Queries para mostrar / ocultar elementos, dependendo do tamanho da tela.
Por exemplo, na minha versão móvel, não quero ativar o Facebook Like Box, porque ele carrega todas essas imagens de perfil e outras coisas. E isso não é bom para visitantes móveis. Portanto, além de ocultar o elemento container, também faço isso dentro do bloco de código jQuery (acima):
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'));
}
Você pode vê-lo em ação em http://lisboaautentica.com
Ainda estou trabalhando na versão móvel, por isso ainda não está parecendo como deveria, ao escrever isso.
Atualizar por dekin88
Há uma API JavaScript integrada para a detecção de mídia. Em vez de usar a solução acima, basta usar o seguinte:
$(function() {
let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
if (isMobile) {
//Conditional script here
}
});
Suporte ao navegador: http://caniuse.com/#feat=matchmedia
A vantagem desse método é que ele não é apenas mais simples e mais curto, mas você pode direcionar condicionalmente diferentes dispositivos, como smartphones e tablets separadamente, se necessário, sem precisar adicionar elementos fictícios no DOM.