android - initial - adaptar el contenido de la web móvil usando la metaetiqueta de la ventana gráfica
viewport definicion (7)
Estoy intentando descubrir cómo aprovechar la metaetiqueta de la vista móvil para acercar automáticamente los contenidos de una página HTML para que quepa en una vista web.
Restricciones:
- El HTML puede tener o no elementos de tamaño fijo (por ejemplo, exg tiene un ancho fijo 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, solo sé su relación de aspecto
Por ejemplo, si tengo una sola imagen (640x100px), quiero que la imagen se aleje si la vista web es de 300x250 (escala 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 los documentos de android y los documentos de iOS en las ventanas gráficas, parece simple: como conozco el ancho de mi contenido (640), configuro el ancho de la ventana gráfica a 640 y dejo que la vista web decida si necesita escalar el contenido hacia arriba 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 a 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 <el área de la vista web?
Creo que esto debería ayudarte.
<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/
En la cabeza agrega esto
//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>
Intente 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.
Para Android, se agrega la etiqueta de densidad de destino.
target-densitydpi=device-dpi
Entonces, el código se vería
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=0, maximum-scale=1, user-scalable=yes" />
Tenga en cuenta que creo que esta adición es solo para Android (pero ya que tiene respuestas, sentí que esto era un buen extra), pero esto debería funcionar para la mayoría de los dispositivos móviles.
Si agrega 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.
Tenía 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 fue la altura de la vista de lista más pequeña que la altura de la ventana gráfica (navegador). Solo necesita reducir la altura de su ventana gráfica más baja que 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.
ok, aquí está mi solución final con javascript 100% nativo:
<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>