Configuración del nivel de zoom en el navegador móvil

Question

Estoy diseñando un sitio web para acceder a dispositivos móviles y quiero configurar el ancho de página, la altura y el tamaño de los botones, para que se muestren llenando la pantalla. Por ejemplo, si el usuario está usando HTC HD, la pantalla completa sería de 480x800 con un tamaño de botón de 240x200. Sin embargo, IE mobile y Opera cargan la página con un cierto nivel de zoom, por lo que los botones se muestran demasiado grandes o demasiado pequeños. ¿Cómo puedo leer el nivel de zoom actual en javascript o configurarlo desde javascript?

Answer 1

No debe confiar en el uso de JavaScript en dispositivos móviles porque todavía no es ampliamente compatible en todos los teléfonos. En su lugar, debe establecer que el ancho de la página sea el mismo que el ancho del navegador para que sus páginas se muestren al 100%, p. body {width: 100%; margin: 0; padding: 0;}

En cuanto a los botones, debe usar valores relativos o usar diferentes tamaños de imagen si puede detectar el ancho del navegador antes de cargar la página.

Answer 2

Eche un vistazo a <meta name="viewport">. Es compatible con una amplia variedad de plataformas móviles, incluyendo (AFAIK) iPhone, Android, Blackberry, Opera Mobile e incluso IE6 Mobile. Básicamente, le permite predefinir el ancho del dispositivo, el nivel de zoom y el zoom máximo/mínimo. Eche un vistazo a Apple developer site y para más información.

Además, puede utilizar las consultas de medios de CSS para detectar la forma y el tamaño del navegador, y servir diferentes diseños (etc.) en consecuencia. Nuevamente, estos son ampliamente compatibles y el Apple developer site tiene más información.