CSS o Javascript que puede cambiar el tamaño de cualquier código HTML visto en el iphone

Question

Estoy tratando de encontrar CSS o Javascript que pueda convertir en HTML que se esté viendo en el navegador del iPhone (componente UIWebview) de modo que el contenido se ajuste al la ventana gráfica y las imágenes/texto cambian de tamaño. (no es lo mismo que lograr un alejamiento).

La idea principal que tengo de another question es ajustar el ancho de elments, algo así como:

@media screen and (max-width: 480px){ 
    *{ 
    max-width: 320px; 
    } 
} 

También tengo la vista habitual etiqueta meta:

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

Esto no cambia el tamaño es perfectamente como parece this currently. Aquí está el HTML original.

Me preguntaba ¿qué más puedo hacer para lograr este objetivo? No quiero hacer esto bien solo por este HTML, sino también por otras páginas HTML.

¿Quizás ya exista un plugin jQuery para esto?

No quiero hacer esto bien solo para esta página, quiero algo más genérico para cualquier página HTML.

Answer 1

Un sistema de red ofrecería una gran cantidad de flexability. La mayoría escalan las imágenes y el texto (si es necesario) y se transforman en diseños suaves y móviles.

Yo prefiero la cuadrícula 1140 CSS http://cssgrid.net/

También hay:

• http://semantic.gs/
• http://fluidable.com/
• http://960.gs/

Answer 2

Supongo que no puede usar el ancho máximo en el elemento html o body-element. Funciona con:

@media screen and (max-width: 480px){ 
    #wrap { 
    max-width: 320px; 
    } 
} 

(más cambios en #logo necesarios)

Answer 3

puedan vincular diferentes hojas de estilo para diferentes de los medios de comunicación, así:

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> 
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css"> 

De esta manera se pueden crear diferentes reglas CSS para todo tipo de tamaños de pantalla, etc. Esto le proporciona una gran cantidad de flexibilidad.

Source

Answer 4

Fije su envoltura o cuerpo-elemento a width: 100%; overflow:hidden;. Todos los subelementos obtienen un max-width: 100%. Ahora convierta todos los píxeles a porcentajes en referencia a sus padres con esta herramienta: http://rwdcalc.com/ ¡me ha ayudado mucho!

Answer 5

@media only screen and (max-width: 999px) { 
    /* rules that only apply for canvases narrower than 1000px */ 
} 

@media only screen and (device-width: 768px) and (orientation: landscape) { 
    /* rules for iPad in landscape orientation */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { 
    /* iPhone, Android rules here */ 
} 

Estos podrían parecer propietaria pero cierto es que son CSS3 preguntas de los medios implementados en Firefox, Safari (incluyendo móvil) y Google Chrome.

Después de lo cual, cree tres diseños diferentes. 1. anchos de hasta 480px (iPhone, Android): espacio reducido, columna única; 2. hasta 980 px (iPad en vertical): columnas de fluido solo en la sección superior, columna única en otro lugar; 3.más amplio que 980px: diseño centrado, de dos columnas centrado.

Es posible que también desee ajustar el tamaño de fuente para cada estilo diferente para que se ajuste perfectamente a los dispositivos de destino.

Además, si su objetivo es la plataforma iOS, asegúrese de que su diseño llene automáticamente la pantalla del iDevice. En webkits móviles, es posible que desee utilizar este:

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

Esto se debe a Safari Mobile muestra un zoom hacia fuera 980 px de ancho versión de la página, incluso si el diseño en sí es más estrecho. Puede leer más de estas especificaciones aquí: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Debe tener en cuenta que la consulta de media de orientación, aunque es compatible con el iPad, no funciona en el iPhone. Afortunadamente, las consultas de tamaño como el ancho y el ancho del dispositivo funcionan, por lo que el cambio de diseño es posible sin JavaScript con alguna combinación de estos.

Además, con el advenimiento de dispositivos de visualización de la retina, es posible que desee dirigirse a ellos específicamente para servir de alta resolución graphics.You puede comprobar esto para más detalles: http://webkit.org/blog/55/high-dpi-web-sites/

por último, para los dispositivos de la retina, es posible utilizar esto:

<link rel="stylesheet" media="only screen and -webkit-min-device-pixel-ratio: 2" href="highres.css"> 

Answer 6

para empezar esta una buena referencia para 'medios Oferta de los dispositivos estándar' http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

¿El siguiente estilo funciona para usted?

/* Smartphones (portrait) ---------------- */ 
@media only screen and (max-width : 320px) { 
    /* Styles */ 
    * { 
     max-width: 320px; 
     box-sizing: border-box; 
     -moz-box-sizing: border-box; 
    } 
} 

El dimensionamiento caja tendrá en cuenta el relleno cuando se aplica el ancho máximo de 320 píxeles. Por lo tanto, no agregará ningún relleno en 320px (como lo haría de manera predeterminada).

Dale una oportunidad, buena suerte.

Answer 7

Usar la siguiente etiqueta meta en la parte superior de la etiqueta de la cabeza en la página HTML:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="viewport" content="width=device-width; initial-scale=0.83; maximum-scale=0.83; minimum-scale=0.83; user-scalable=0;" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 

Puede cambiar el initial-scalemaximum-scale y según sus necesidades para adaptarse al contenido.

Answer 8

tener cuidado con:

<meta name="viewport" ... 

No parece haber a bug on iOS devices.

Además, eche un vistazo a Twitter Responsive Bootstrap para desarrollar sitios web receptivos, y responsive.is para probar.