query - ¿Cómo soporto más anchos de ventanas gráficas en el sitio web habilitado para CSS3 y obligo al navegador móvil a usar el ancho adecuado?

mobile only css

Question

Tengo un sitio web con un ancho fijo de 1000 px. Quiero admitir 2 anchos más pequeños de esta página. He hecho esto con éxito a través de consultas de medios CSS como esta:

@media only screen and (min-width : 800px) and (max-width : 999px) {
  #content { width:800px; }
}
@media only screen and (max-width : 799px) {
  #content { width:600px; }
}

Ahora, cuando pruebo mi página web en el navegador de Android (2.3.3), usa un ancho de ventana de 1000 px para que muestre el sitio web en todo su ancho. Pero sería mucho mejor si eligiera un ancho de 800px, porque la página web se mostraría más optimizada para dispositivos con pantallas más pequeñas.

Sé que puedo establecer el ancho de la ventana gráfica utilizando, por ejemplo: <meta name="viewport" content="width=800px" /> o para establecer el ancho correspondiente al ancho físico del dispositivo usando: <meta name="viewport" content="width=device-width" /> , pero ninguno de estos funcionaría. Porque o bien obligaría a todos los dispositivos móviles a usar siempre 800px viewport en el primer caso, o usaría el ancho físico de píxeles en el dispositivo en el segundo caso, pero eso no funcionaría, porque en modo vertical (cómo la mayoría de las personas navega en dispositivos móviles web y use el teléfono) que serían 300 px o 400 píxeles como máximo, que es demasiado pequeño y el usuario tendría que desplazarse horizontalmente mucho.

Así que en realidad mi pregunta es la siguiente: ¿puedo apoyar y posiblemente forzar a los navegadores móviles a usar anchos de vista diferentes dependiendo de su tamaño de pantalla real? No sé si lo expliqué correctamente, así que obtendré un ejemplo de lo que quiero lograr:

Para dispositivos móviles con ancho físico de 400px (dispositivos modernos con pantallas más grandes) me gustaría forzar la ventana gráfica de 800px de ancho y posiblemente con escala 0.5 para que la primera visita se muestre completa sin necesidad de desplazamiento horizontal y con la opción del usuario para acercar a partes de la página.

Para dispositivos móviles con ancho físico de 300px (algunos dispositivos de clase media y de gama baja) o más pequeños, me gustaría forzar la ventana gráfica de 600px de ancho y posiblemente con escala 0.5 para que la primera visita se muestre completa o al menos la mayor parte en la pantalla con poco desplazamiento horizontal necesario. Y, por supuesto, el usuario podría acercarse a partes de la página.

¿Es posible configurar esto usando CSS o CSS3? Puedo imaginar la solución JS, pero me gustaría implementar esto simplemente usando CSS.

Gracias por cualquier ayuda por adelantado.

Answer 1

¿Has intentado simplemente alejar el zoom por completo y luego dejar que el usuario integre la escala para ver lo que quieras?

Tratar:

<meta name="viewport" content="width=device-width,minimum-scale=0.25,height=device-height,user-scalable=yes" />

Answer 2

Aquí hay algunos Css que pueden ayudarlo:

// target small screens (mobile devices or small desktop windows)  
@media only screen and (max-width: 480px) {  
/* CSS goes here */  
}  

/* high resolution screens */  
@media (-webkit-min-device-pixel-ratio: 2),  
         (min--moz-device-pixel-ratio: 2),  
         (min-resolution: 300dpi) {  
header { background-image: url(header-highres.png); }  
}  

/* low resolution screens */  
@media (-webkit-max-device-pixel-ratio: 1.5),  
         (max--moz-device-pixel-ratio: 1.5),  
         (max-resolution: 299dpi) {  
header { background-image: url(header-lowres.png); }  
}  

Si no tiene una lectura a través de este enlace

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

Answer 3

Entiendo una parte de su pregunta ... He trabajado principalmente en dispositivos iPhone / iPad y menos en Android ...

Yo recomendaría usar

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

para establecer la ventana gráfica en función del ancho de desorden ...

Ahora, aunque diga, no funcionaría en el cambio de orientación, en el iPhone / iPad, el ancho del dispositivo siempre es de 768px, cualquiera que sea la orientación.

Así que al menos en esos dispositivos, la configuración del ancho del dispositivo estaría bien ...

Para los dispositivos Android, no estoy muy seguro de si el ancho del dispositivo es diferente en cada orientación. Creo que debería ser el mismo.

Podría intentar configurar la metaetiqueta como se indica arriba y ver si funciona bien. si no, podría sugerir de otra manera ...

Gracias.

Answer 4

Puede hacer esto en javascript obteniendo el elemento de ventana (ya sea por id o nombre) y configurándolo inspeccionando screen.width o window.outerWidth sobre la marcha.

function setViewport() {
    var viewport = document.getElemementById("viewport");


    if(window.outerWidth <= 400) {
        //screen.width gives display pixel count, use window.outerWidth for physical pixel count.
        viewport.setAttribute(''content'', ''width=800);
    } 
}

Answer 5

solo agregue algunas consultas más de medios y css zoom

//base setting, overwrite with other queries
#content { width:800px; }

@media only screen and (max-width : 799px) {
  #content { width:600px; }
}

@media only screen and  (min-width : 400px) and (max-width :599px) {
  #content { width:800px;}
//don''t need to set zoom as it is handled by the next media query

}
@media only screen and (max-width : 599px}
  body{zoom:200%} 
//don''t need to set #content as it has a default value of 600 set in the first media query.
}

También puede establecer la escala inicial haciendo el rastreo de agente de usuario, o agregarlo a través de javascript en función del tamaño de la viuda, sin embargo, solo mediante CSS, puede usar el zoom para acercar (el usuario siempre puede alejar)