Taller de media query, jquery mobile & selectores de User Agent

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; }