3.1. Detección
Pero todo eso ha cambiado, la onda ahora es:
3. Desarrollo orientado al móvil
CopyLeft marzo 2012 - Hecho con ✌ por Jorge Epuñan
if (navigator.userAgent.match(/iPad/i)) {
// haz algo, redirecciona, carga algo...
}
require_once('mobile_device_detect.php');
$mobile = mobile_device_detect();
Antes nos dedicábamos a codear para browser y arreglar sus defectos.
Luego se intentó normalizar y agregar funcionalidades a los browsers que no lo soportaban (polyfill).
Ahora detectamos las capacidades de cada browser y entregamos soporte según su desempeño.
☞ redireccionar, resumir contenido y codear todo denuevo
☞ aprovechar el contenido y las funcionalidades y readecuarlas según la resolución.
#container {
width: 960px;
}
@media screen and (max-width: 640px) {
#container {
width: 620px;
}
}
<link rel="stylesheet" media="only screen and (max-device-width: 640px)" href="layout-640.css" />
Todos los navegadores de escritorio como Safari 3+, Chrome, Firefox 3.5+ y Opera 7+ parsean nativamente las media queries, como también lo hacen navegadores mobile más recientes como Opera Mobile y Safari Mobile.
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> <![endif]-->
<div id="container">
<header id="header">
<hgroup>
<h1 id="site-logo">Nombre Sitio</h1>
<h2 id="site-description">Descripción Sitio</h2>
</hgroup>
<nav>
<ul id="main-nav">
<li><a href="#">Inicio</a></li>
</ul>
</nav>
<form id="searchform">
<input type="search" id="s" placeholder="Search">
</form>
</header>
<div id="content">
<article class="post">
<header>
<h1 class="post-title"><a href="#">Título</a></h1>
</header>
<p>Nulla fringilla....</p>
</article>
</div>
<aside id="sidebar">
<section class="widget">
<h4 class="widgettitle">Sidebar</h4>
</section>
</aside>
<footer id="footer">
<p>Fin, no hay nada más. No sigas.</p>
</footer>
</div>
#container {
width: 980px;
margin: 0 auto;
}
#header {
height: 160px;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 280px;
float: right;
}
#footer {
clear: both;
}
@media screen and (max-width: 320px) {
#header,
#sidebar,
#footer {
font-size: 80%;
}
#site-logo {
margin: 15px 10px 5px 0;
position: static;
}
#searchform {
display: none;
}
#main-nav a {
padding: 14px 10px;
text-decoration: none;
text-shadow: #333 1px 1px 2px;
}
#content {
width: auto;
float: none;
margin: 20px 0;
font-size: 80%;
}
}
de
#
