2011-01-24 10 views
5

Me preguntaba qué es lo que ustedes y las chicas recomendarían ya que los más eficientes quieren redimensionar dinámicamente un sitio web en función de la resolución.¿La mejor manera de escalar dinámicamente una página?

¿Hay algo que vuelva a escalar los elementos Y las imágenes? ¿O tengo que hacer eso por separado? He estado tratando de usar porcentajes y em, pero parece una gran molestia. ¿Hay guiones? He estado buscando durante bastante tiempo y todavía no he encontrado nada que me quede bien.

+1

Es ** una gran molestia. – Pointy

+0

En mi opinión, un asunto muy subjetivo, depende en gran medida de lo que está mostrando y la disposición de su sitio. – Trufa

+0

¿No puedes simplemente confiar en ctrl/+, ctrl/- y ctrl-0 del navegador para hacer zoom? Solo asegúrate de que tu diseño sea fluido y debería escalar bien pret. –

Respuesta

3

Nuevo se desembarcaron en CSS3 especificación. Puede leer un impresionante article sobre el tema de A List Apart Revista (con example, intente cambiar el tamaño de la ventana del navegador)

También están existiendo scripts por supuesto.

+0

¡Muy útil, gracias! – Johannes

1

La mejor manera de detectar la orientación del dispositivo es mediante el uso de etiquetas meta. Safari/Chrome utiliza la metaetiqueta de la ventana gráfica en el iPhone y el iPad para determinar cómo mostrar una página web. A continuación se presentan las propiedades de la ventana gráfica

El ancho de la vista para la anchura del dispositivo, añadiendo la siguiente declaración a la cabecera de su archivo HTML

<meta name="viewport" content="width=device-width"> 

para establecer la escala inicial de 1,0, añadir esto a la cabeza de su archivo HTML:

<meta name="viewport" content="initial-scale=1.0"> 

para establecer la escala inicial y para desactivar el escalado de usuario, añadir esto a la cabeza de su archivo HTML:

Utilice la metaetiqueta de la ventana gráfica para mejorar la presentación de su navegador móvil. Esta metaetiqueta establece el ancho y la escala inicial de la ventana gráfica. Agregue los metadatos de las ventanas apropiadas al encabezado del documento para indicar al navegador que presente su contenido en un contexto lo más grande posible en la pantalla del dispositivo. Si no establece el ancho de la ventana gráfica, la página se alejará cuando se cargue por primera vez.

modo de pantalla completa

<meta name="apple-mobile-web-app-capable" content="yes"> 

Si el contenido se establece en sí la aplicación web se ejecuta en modo de pantalla completa; de lo contrario, no es así. Puede determinar si una página web se muestra en modo de pantalla completa usando la propiedad window.navigator.standalone de solo lectura y booleana de JavaScript.

Cuestiones relacionadas