Taller de media query, jquery mobile & selectores de User Agent (para IDEP)

Blog / Taller de media query, jquery mobile & selectores de User Agent (para IDEP)

Trabajar en la misma hoja de estilos usando media querys:

En el pasado ya habíamos usado min-width y max-width:

/* si el ancho máximo es menor de 600 */
@media screen and (max-width: 600px) {
/* STYLES GO HERE */
}

Observemos la diferencia entre: min-width y min-device-width

/*iPad en portrait & landscape*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}

/*iPad en landscape*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}

/*iPad en portrait*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }

/*iPad Retina en portrait & landscape*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

/*iPhone 5 in portrait & landscape*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { /* STYLES GO HERE */}

/*iPhone 2G, 3G, 4, 4S Media Queries*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { /* STYLES GO HERE */}

Cargaremos una hoja de estilos diferente con media query:
<link href=»css/phone.css» rel=»stylesheet» type=»text/css» media=»only screen and (max-width: 400px)» >

Identificaremos un dispositivo a través del user agent:

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script>
$(document).ready(function(){

if (navigator.userAgent.indexOf('Mac OS X') != -1) {

// Mac

if ($.browser.opera) { $('html').addClass('opera'); }

if ($.browser.webkit) { $('html').addClass('webkit'); }

if ($.browser.mozilla) { $('html').addClass('mozilla'); }

if (/camino/.test(navigator.userAgent.toLowerCase())){ $('html').addClass('camino'); }

if (/chrome/.test(navigator.userAgent.toLowerCase())) { $('html').addClass('chrome'); }

           if (navigator && navigator.platform && navigator.platform.match(/^(iPad|iPod|iPhone)$/)) { $('html').addClass('apple'); }

           if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) { $('html').addClass('safari'); }

} else {

// Not Mac

if ($.browser.opera) { $('html').addClass('opera-pc'); }

if ($.browser.webkit) { $('html').addClass('webkit-pc'); }

if ($.browser.mozilla) { $('html').addClass('mozilla-pc'); }

if (document.all && document.addEventListener) { $('html').addClass('ie9'); }

if (/chrome/.test(navigator.userAgent.toLowerCase())) { $('html').addClass('chrome-pc'); }

           if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) { $('html').addClass('safari-pc'); }

} });

</script>

«Forzaremos» un ancho en un dispositivo móvil:

Evitaremos que el iphone agrande a su voluntad la tipografía (Los Android por defectos no lo hacen)

p { -webkit-text-size-adjust: none; }