La mayoría de páginas web son compatibles y funcionan bien en el iPhone y Blackberry. Sin embargo, aún es posible hacer estas páginas web más optimizadas para el iPhone de Apple, pasándole mayor información al iPhone acerca de cómo se debe mostrar la página web en el navegador del iPhone (Safari Mobile).
Además, para aquellas web que tratan de emular la funcionalidad de las aplicaciones incorporadas en iPhone, tales como aplicaciones web que utilizan Canvas, AJAX para limitar el tamaño de la página a 320×480px (o 480×320px), lo mejor es asegurarse de que el iPhone y Blackberry sean totalmente compatibles para nuestra web, utilizando el formato correcto y así evitar problemas, como que la página web no escala adecuadamente cuando se gira la pantalla, etc…
La pantalla
La pantalla es una de las partes más importantes que tenemos que conocer para optimizar una página web para iPhone, las medidas reales (en pixeles) de la pantalla de nuestro dispositivo móvil, en este caso el iPhone tiene una resolución de pantalla de 320×480 píxeles (o viceversa, dependiendo de la orientación).
También es posible que hayáis oido hablar del término «viewport«, que es la zona «visible» o visor de una página dentro de un navegador, es decir, sacando scroll-bars, menús, etc.
Una de las mejor manera para optimizar nuestra web para iPhone es añadiento una nueva etiqueta META dentro de la etiqueta HEAD de nuestro documento web. Con esta META lo que hacemos es indicarle al teléfono el tamaño de visualización de la página web:
<meta name="viewport" content="initial-scale=1.0" /> <meta name="viewport" content="user-scalable=false" />
También podemos personalizar a mano el ancho al que debe prepararse la página web, en este caso a 320px de resolución y no permitimos ampliar y reducir el uso emergente del zoom (user-scalable=false):
<meta name="viewport" content="width=320,user-scalable=false" />
CSS
Para hacer sus páginas web sean más accesibles en diferentes plataformas, le sugerimos que no utilice valores absolutos en tu CSS. En su lugar, mejor utilizaremos valores relativos. Para el tamaño de fuente, utilizaremos porcentajes como el 80% y el 120% en vez de utilizar valores absolutos como 10px, 12px, etc…
Uso de tablas. Los diseños basados en tablas se convertieron hace años en parte fundamental del diseño web. Este tipo de diseño es más importante que nunca en el iPhone porque los usuarios pueden hacer zoom en una columna específica con el programa doble-click del iPhone.
Detectar iPhone automaticamente
Vamos a ver cuando un usuario está navegando desde un iPhone. La forma más sencilla de hacer esto es-como es obteniendo iel navegador actual del usuario.
A continuación se muestra un código PHP que buscar el agente del usuario.
if (ereg("Mobile.*Safari",$_SERVER['HTTP_USER_AGENT'])) {
echo "Estas navegando desde iPhone";
}
JAVASCRIPT
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "https://www.bufa.es/mobil";
}
PHP
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')){
header('Location: https://www.bufa.es/mobil');
exit();
}
CSS
<link media="only screen and (max-device-width: 480px)" href="estilo_mobil.css" type= "text/css" rel="stylesheet"> <link media="screen and (min-device-width: 481px)" href="estilo_normal.css" type="text/css" rel="stylesheet">
Agradezco tu comentario 🤘