CSS o Javascript che possono ridimensionare qualsiasi HTML visualizzato su iphone

Question

Sto cercando di creare CSS o Javascript che possono autorizzare qualsiasi HTML visualizzato nel browser iPhone (componente UIWebview) in modo tale che il contenuto sia adatto viewport e le immagini/testo ridimensionano tutte. (non è come ottenere uno zoom indietro).

L'idea principale che ho avuto da another question è quello di regolare la larghezza di elments, qualcosa come:

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

Ho anche la solita finestra meta tag:

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

Ciò non ridimensiona perfettamente come sembra this currently. Ecco il codice HTML original.

Mi chiedevo cos'altro posso fare per raggiungere questo obiettivo? Non voglio farlo bene solo per questo HTML ma anche per altre pagine HTML.

Forse esiste già un plug-in jQuery per questo?

Non voglio farlo bene solo per questa pagina, voglio qualcosa di più generico per qualsiasi pagina HTML.

Answer 1

un sistema a griglia offrirebbe un sacco di flessibilità. La maggior parte delle immagini e testo in scala (se necessario) e si trasformano in layout mobili e fluidi.

preferisco la griglia 1140 CSS http://cssgrid.net/

C'è anche:

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

Answer 2

Suppongo che non sia possibile utilizzare la larghezza massima dell'elemento html o body. Funziona con:

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

(ulteriori cambiamenti #logo necessario)

Answer 3

è possibile collegare diversi fogli di stile a diversi dei media in questo modo:

<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"> 

In questo modo è possibile creare diverse regole CSS per tutti i tipi di dimensioni dello schermo ecc. Questo ti dà un'enorme quantità di flessibilità.

Source

Answer 4

Imposta il tuo involucro o corpo-elemento da width: 100%; overflow:hidden;. Tutti i sottoelementi ottengono uno max-width: 100%. Ora converti tutti i pixel in percentuali in riferimento ai loro genitori con questo strumento: http://rwdcalc.com/ mi ha aiutato molto!

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 */ 
} 

Questi potrebbero sembrare proprietaria, ma fatto è che questi sono CSS3 Media Queries implementate in Firefox, Safari (anche mobile) e Google Chrome.

Dopo di che, creare tre layout diversi. 1.widths fino a 480px (iPhone, Android): spaziatura stretta, colonna singola; 2. fino a 980px (iPad in verticale): colonne fluide solo sulla sezione superiore, colonna singola altrove; 3.video superiore a 980px: layout centrato su due colonne fisso.

Si potrebbe anche voler regolare le dimensioni del carattere per ciascuno dei diversi stili per adattarli perfettamente ai dispositivi di destinazione.

Inoltre, se si sta prendendo di mira la piattaforma iOS, assicurarsi che il layout riempia automaticamente il display di iDevice. In webkits mobili, si potrebbe desiderare di utilizzare questo:

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

Questo perché Safari Mobile visualizza un zoom out versione larga 980px della pagina, anche se il layout in sé è più stretta. È possibile leggere più di queste specifiche qui: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Si dovrebbe essere consapevoli del fatto che la query di orientamento media, anche se supportata su iPad, non funziona su iPhone. Fortunatamente, le query sulle dimensioni come larghezza e larghezza del dispositivo funzionano, quindi il cambio di layout è possibile senza JavaScript con una combinazione di questi.

Inoltre, con l'avvento di dispositivi di visualizzazione Retina, si potrebbe desiderare di indirizzare loro specificamente per servire ad alta risoluzione graphics.You può controllare questo fuori per i dettagli: http://webkit.org/blog/55/high-dpi-web-sites/

infine, per i dispositivi Retina, è possibile utilizzare questo:

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

Answer 6

per cominciare questo un buon riferimento per 'media query per dispositivi standard' http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Il seguente stile funziona per te?

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

Il dimensionamento scatola terrà conto imbottitura quando si applica la larghezza massima di 320px. Quindi non aggiungerà alcun padding sul 320px (come farebbe di default).

Provalo, buona fortuna.

Answer 7

Utilizzare il seguente meta tag nella parte superiore della vostra testa tag nella pagina 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" /> 

È possibile modificare il initial-scale e maximum-scale secondo il vostro requisito per adattarsi al contenuto.

Answer 8

stare attenti con:

<meta name="viewport" ... 

Sembra che ci sia a bug on iOS devices.

Inoltre, dare un'occhiata a Twitter Responsive Bootstrap per lo sviluppo di siti Web reattivi e responsive.is per il test.