ajustar el contenido de la web móvil utilizando la metaetiqueta de la ventana

Estoy intentando descubrir cómo aprovechar la metaetiqueta de la ventana móvil para acercar automáticamente los contenidos de una página HTML para que quepa en una vista web.ajustar el contenido de la web móvil utilizando la metaetiqueta de la ventana

restricciones:

elementos de tamaño

El HTML puede o no puede haber fijos (ex img tiene una anchura fija de 640). En otras palabras, no quiero obligar al contenido a ser fluido y usar% 's.
no sé el tamaño de la vista web, sólo sé su relación de aspecto

Por ejemplo, si tengo una sola imagen (640x100px) quiero la imagen para determinar si la vista web es de 300x250 (escalar hacia abajo para encajar). Por otro lado, si la vista web es de 1280x200, quiero que la imagen se acerque y complete la vista web (ampliar para ajustarse).

Después de leer el android docs y la iOS docs en las ventanas gráficas, parece simple: ya que sé que el ancho de mi contenido (640) que acaba de establecer el ancho de visualización a 640 y dejar que el vistaweb decidir si necesita escalar el contenido hasta o hacia abajo para adaptarse a la vista web.

Si pongo lo siguiente en mi navegador de Android/iPhone O en una vista web de 320x50, la imagen no se aleja para ajustarse al ancho. Puedo desplazar la imagen hacia la derecha e izquierda ..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Test Viewport</title> 
    <meta name="viewport" content="width=640" /> 
    <style type="text/css"> 
    html, body { 
     margin: 0; 
     padding: 0; 
     vertical-align: top; 
    } 

    h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td 
    { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     font-weight: normal; 
     font-style: normal; 
     font-size: 100%; 
     line-height: 1; 
     font-family: inherit; 
     vertical-align: top; 
    }  
    </style> 
    </head> 
    <body> 
    <img src="http://www.dmacktyres.com/img/head_car_tyres.jpg"> 
    </body> 
</html>

¿Qué estoy haciendo mal aquí? ¿La metaetiqueta de la ventana gráfica solo hace zoom en el contenido que es < en el área de la vista web?

Fuente

2012-01-04 rynop

¿tiene solución para esto todavía? – Superbiji

No, aún no. Supongo que no es posible una solución simple – rynop

Intenta agregar un estilo = "ancho: 100%;" a la etiqueta img De esta forma, la imagen llenará todo el ancho de la página, reduciendo así la escala si la imagen es más grande que la ventana gráfica.

Fuente

2012-01-10 20:49:44 AlexanderZ

sí que resuelve el problema si todo es fluido, pero por mi 2da viñeta: "No quiero obligar al contenido a ser fluido y usar% 's". Piense en un sitio web completo con un montón de elementos en él - divs, canvas, iframe, etc ... Sé que el fijo con de la página - Quiero que la vista web para acercar/alejar exactamente el ancho fijo I especificar. – rynop

Al agregar style="width:100%;max-width:640px" a la etiqueta de la imagen, se escalará hasta el ancho de la ventana gráfica, es decir, para ventanas más grandes se verá como ancho fijo.

Fuente

2012-02-07 12:53:48 Axel

No ampliar pero ampliar –

Creo que esto debería ayudarlo.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Dime si funciona.

P/s: aquí hay alguna consulta de medios para dispositivos estándar. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Fuente

2012-09-13 16:50:03

Simple y funciona como un amuleto –

Y con eso vas a hacer escasamente ampliar/ampliar imposible para los usuarios con impedimentos visuales, que no son capaces de leer en el tamaño de fuente elegido por tú. –

En el cabezal de añadir esta

//Include jQuery 
<meta id="Viewport" name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 

<script type="text/javascript"> 
$(function(){ 
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
    var ww = ($(window).width() < window.screen.width) ? $(window).width() : window.screen.width; //get proper width 
    var mw = 480; // min width of site 
    var ratio = ww/mw; //calculate ratio 
    if(ww < mw){ //smaller than minimum size 
    $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww); 
    }else{ //regular size 
    $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww); 
    } 
} 
}); 
</script>

Fuente

2013-01-05 20:10:50 Bren1818

nice, solo algunos mods y funciona bien – waza123

Buena solución, pero creo que hay un error tipográfico en la metaetiqueta de la ventana gráfica. El atributo debe ser contenido, no ancho, ¿verdad? –

Para Android no es la adición de la etiqueta de destino densidad.

target-densitydpi=device-dpi

Por lo tanto, el código se vería así

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=0, maximum-scale=1, user-scalable=yes" />

Tenga en cuenta, que yo creo que esta adición es sólo para Android (pero ya que tienes respuestas, me pareció que era un buen extra) pero esto debería funcionar para la mayoría de los dispositivos móviles.

Fuente

2013-07-22 14:13:37 Dave

Gracias, establecer target-densitydpi = 2 resolvió mi problema como magia. –

target-densitydpi ha sido eliminado de WebKit http://trac.webkit.org/changeset/119527 –

Tuve el mismo problema que el suyo, pero mi preocupación era la vista de lista. Cuando intento desplazarme por la lista, veo que el encabezado fijo también se desplaza un poco. El problema era alto de vista de lista más pequeño que la altura de la ventana gráfica (navegador). Solo necesita reducir la altura de su vista inferior a la altura de la etiqueta de contenido (vista de lista dentro de la etiqueta de contenido). Aquí está mi metaetiqueta;

<meta name="viewport" content="width=device-width,height=90%, user-scalable = no">

Espero que esto ayude.Thnks.

Fuente

2014-03-26 07:35:25 shalin

bien, aquí está mi solución final con un 100% javascript orígenes:

<meta id="viewport" name="viewport"> 

<script type="text/javascript"> 
//mobile viewport hack 
(function(){ 

    function apply_viewport(){ 
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { 

     var ww = window.screen.width; 
     var mw = 800; // min width of site 
     var ratio = ww/mw; //calculate ratio 
     var viewport_meta_tag = document.getElementById('viewport'); 
     if(ww < mw){ //smaller than minimum size 
     viewport_meta_tag.setAttribute('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=no, width=' + mw); 
     } 
     else { //regular size 
     viewport_meta_tag.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + ww); 
     } 
    } 
    } 

    //ok, i need to update viewport scale if screen dimentions changed 
    window.addEventListener('resize', function(){ 
    apply_viewport(); 
    }); 

    apply_viewport(); 

}()); 
</script>

Fuente

2016-09-22 14:49:56 saike

ajustar el contenido de la web móvil utilizando la metaetiqueta de la ventana

Respuesta

Cuestiones relacionadas