1. casa
  2. Domanda e risposta
  3. Come posso impedire al browser Android WVGA di ridimensionare le immagini?

Come posso impedire al browser Android WVGA di ridimensionare le immagini?

2010-05-09 8 views
22

Sto progettando una pagina HTML per la visualizzazione nei browser Android. Considerate questo semplice pagina di esempio:Come posso impedire al browser Android WVGA di ridimensionare le immagini?

<html> 
<head><title>Simple!</title> 
</head> 
<body> 
<p><img src="http://sstatic.net/so/img/logo.png"></p> 
</body> 
</html>

Sembra proprio bene sui telefoni HVGA standard (320x480), ma su dimensioni WVGA HDPI (480x800 o 480x854) il built-in del browser scala automaticamente l'immagine in alto; sembra brutto.

Ho letto che dovrei essere in grado di utilizzare questo tag per forzare il browser a smettere di scalare la mia pagina:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />

... ma tutto ciò che fa è ridimensionamento disabilita l'utente (i pulsanti dello zoom scompaiono); in realtà non impedisce al browser di ridimensionare la mia immagine. La regolazione dei fattori di scala (impostandoli tutti su 2.0 o 0.5) non ha alcun effetto.

Come posso forzare il browser WVGA a smettere di ridimensionare le immagini?

fonte

2010-05-09 Dan Fabulich

+0

ho notato che la configurazione del "Default Zoom" l'impostazione nelle impostazioni del browser su "Far" disabiliterà il ridimensionamento dell'immagine, ma non posso aspettarmi che tutti i miei utenti lo facciano. –

+1

C'è un'API per impostare "Zoom predefinito" aggiunto in Android 2.1/livello API 7. webview.getSettings(). SetDefaultZoom() –

+0

Ai fini di questa domanda, sto creando un sito Web, non un'app Android con un WebView, quindi non posso usare l'API di Android. –

risposta

32

Ah, lo abbiamo trovato cercando nel codice sorgente di Android. C'è una nuova impostazione "target-densityDpi" specifica per Android disponibile nel meta tag "viewport"; per quanto posso dire, è totalmente non documentato, ad eccezione del commento del check-in!

Aggiungi supporto dpi per WebView.

Nel metatag "viewport", è possibile specificare "target-densityDpi". Se non specificato, utilizza il valore predefinito, 160 dpi a partire da oggi. Quindi il fattore di scala 1.0 specificato nel tag viewport significa 100% su G1 e 150% su Sholes. Se si imposta "target-densityDpi" su "device-dpi", il fattore di scala 1.0 indica il 100% sia su G1 che su Sholes.

Implementato Safari's window.devicePixelRatio e css media query dispositivo-pixel-ratio.

Quindi, se si utilizza "dispositivo-dpi" e modificare il css per font-size e l'immagine src seconda window.devicePixelRatio, è possibile ottenere una pagina migliore su Sholes/Passion.

Ecco un elenco di opzioni per "target-densityDpi".

dispositivo-dpi: utilizza il dpi nativo del dispositivo come dpi di destinazione. low-dpi: 120 dpi medio-dpi: 160 dpi, che è anche il valore predefinito al giorno d'oggi high-dpi: 240 dpi : Prendiamo qualsiasi numero compreso tra 70 e 400 come un dpi di destinazione valido.

fonte

2010-05-09 23:31:07

+0

Il supporto per target-densityDpi è stato aggiunto ad Android Source il 21 settembre 2009 e non sembra essere stato incluso in Android 1.6 almeno. È stato aggiunto in questo commit: https://android.git.kernel.org/?p=platform/external/webkit.git;a=commit;h=f10585d69aaccf4c1b021df143e0f08e338cf31 –

+0

@morganchristiansson Questo è vero, ma ci sono pochissimi Android 1.6 Dispositivi HDPI in natura. LG ha un paio di telefoni che si adattano a quel profilo ... Quella gente probabilmente avrà una brutta esperienza. –

+0

Mi rivolgo a LDPI/dispositivi di piccole dimensioni come HTC Tattoo e SE X10 Mini, che purtroppo sono entrambi Android 1.6. –

Problemi correlati

 Problemi correlati