Escala adaptarse a contenido web móvil utilizando meta tag de vista
Estoy tratando de averiguar cómo aprovechar la etiqueta de meta de visualización móvil para ampliar automáticamente el contenido de una página HTML para encajar en una vista web.
Restricciones:
- GetMeasuredWidth devuelve un valor totalmente erróneo
- ¿Puedo agregar vistas a una vista de desplazamiento sin inflar / volver a inflar los diseños?
- Cómo configurar RecyclerView en el widget android
- ¿Por qué obtengo un error al intentar establecer el contenido de un tabspec en android?
- Clone textview para anexarlo a un ViewGroup
- El HTML puede o no tener elementos de tamaño fijo (ex img tiene un ancho fijo de 640). En otras palabras, no quiero forzar que el contenido sea fluido y use% 's.
- No sé el tamaño de la webview, sólo 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 300×250 (escala hacia abajo para ajustar). Por otro lado, si la vista web es 1280×200, quiero que la imagen se amplíe y rellene la vista web (escala hasta ajuste).
Después de leer los documentos de Android y los documentos de iOS en las ventanas, parece sencillo: dado que sé el ancho de mi contenido (640), sólo establezco el ancho de la ventana de visualización a 640 y dejo que la webvista decida si necesita escalar el contenido hacia arriba o hacia abajo Para ajustarse a la vista web.
Si pongo lo siguiente en mi navegador de Android / iPhone O una vista de Internet de 320×50, la imagen no se aleja para ajustarse a la anchura. Puedo desplazar la imagen a la derecha ya la 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 vista sólo hace zoom en el contenido que es <el área de vista web?
- GetHeight () vs getLayoutParams (). Altura
- Tamaño del artículo de menú personalizado y tamaño de texto en la vista de navegación
- ¿Cuántos ViewStubs son demasiados para un solo archivo XML de presentación?
- Desplazamiento de una vista por código
- Presentar contenido html como "páginas dinámicas"
- Establecer funcionalidad del botón de retroceso del widget de búsqueda
- No se puede resolver el símbolo 'NavigationView'
- Android: View.setID (int id) de forma programática - ¿cómo evitar conflictos de ID?
En la cabeza agregue 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>
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/
Para Android hay la adición de la etiqueta de densidad de destino.
target-densitydpi=device-dpi
Por lo tanto, el código se vería como
<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 sólo para Android (pero ya que tiene respuestas, me pareció que era un buen extra), pero esto debería funcionar para la mayoría de los dispositivos móviles.
La adición de style="width:100%;max-width:640px" a la etiqueta de la imagen lo escalará hasta el ancho de la ventana de visualización, es decir, para las ventanas más grandes verá ancho fijo.
Ok, aquí está mi solución final con 100% javascript 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>
Intenta agregar un estilo = "width: 100%;" A la etiqueta img. De esta forma, la imagen se llenará todo el ancho de la página, reduciendo así la imagen si es mayor que la vista.
Tuve el mismo problema que el tuyo, pero mi preocupación era ver la lista. Cuando trato de desplazar la vista de la lista de encabezado fijo también se desplazan poco. El problema era la altura de la vista de lista más pequeña que la altura de la ventana de visualización (navegador). Sólo tiene que reducir la altura de su visor 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 te ayude.Thnks.