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="http://
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:
<meta name=»viewport» content=»width=device-width» />
<meta name=»viewport» content=»width=640; user-scalable=no;» />
Evitaremos que el iphone agrande a su voluntad la tipografía (Los Android por defectos no lo hacen)
p { -webkit-text-size-adjust: none; }