Simulazione dello schermo del dispositivo sulla pagina Web

Question

Sto creando un'app Web che genera e pubblica pagine Web per dispositivi mobili. Ad esempio, l'utente configura quali dati mostrare e utilizza un modello Velocity per generare i file HTML/CSS/JS finali. Quando il modello e le informazioni da includere sono configurati, i client si connettono al server per mostrare le pagine generate.

Tuttavia, ora sto creando una schermata di anteprima per questo. Quindi, diciamo, voglio vedere come apparirà su, diciamo, Nexus 5.

Il mio obiettivo è creare qualcosa come Google su Chrome: l'emulazione del dispositivo mobile. Il problema è che non riesco a capire come sono in grado di fare questo tipo di emulazione.

È vero che il contenuto deve essere ingrandito per mostrare tutto. Questo è abbastanza facile da capire come se lo schermo non fosse abbastanza grande da dover essere adattato.

Quindi, conosco le dimensioni diagonali dello schermo del dispositivo, la sua risoluzione e il PPI (punti per pollice). Quello che ho bisogno di sapere è come ottenere delle misure adeguate per il mio sito web per emulare il dispositivo. Quando vado allo strumento di emulazione Chrome vedo che il Nexus 5 è indicata come:

• Risoluzione 360 ​​x 640
• Proporzioni dei pixel 3

so come si calcolano le proporzioni dei pixel : è il PPI del dispositivo diviso per 160 (PPI base). Quindi, 445/160 = ~ 3 (445 è la densità di pixel di Nexus 5). Ecco come sono arrivati ​​a 360 x 640: dividono la risoluzione per le proporzioni pixel (3).

Sul mio sito Web ho un iframe e carico la pagina generata. Allora so che devo applicare un livello di zoom. E questo è dove si trova il problema. Non so davvero quale valore dello zoom dovrebbe essere.

Uno dei tentativi era

1/((ScreenSize diagonale)/Pixel aspect ratio) = 1/(4,95/3) = 0,6060 (60)

Applicando tale lo zoom lo fa sembrare buono. Se seguo lo stesso approccio con Amazon Kindle HDX, funziona anche.

Tuttavia se vado con l'LG L70 ottengo il seguente:

1/(4,5/1,25) = 0,27777777 ...

Il problema è che l'applicazione di questo zoom cose sarà molto più piccolo (a causa di così tanto zoom indietro) rispetto a Nexus 5 e, in modalità di emulazione Chrome, sembrano così simili.

Per favore fatemi sapere se ci sono delle informazioni che potrebbero aiutare a risolvere questo enigma.

Answer 1

Un rapporto aspetto pixel determina il rapporto tra larghezza e altezza, una misura del modo in cui i pixel "quadrati" si trovano su un dispositivo.

Tuttavia, Google consente di personalizzare il rapporto pixel del dispositivo.Misura quanti pixel del dispositivo mappano su un singolo pixel logico (1px in css).

Credo che il rapporto pixel del dispositivo sia ciò che conta per far sì che le varie dimensioni dello schermo appaiano delle stesse dimensioni.

I calcoli di densità che utilizzano il rapporto tra pixel del dispositivo per calcolare lo zoom effettivo possono essere calcolati in una dimensione, non è necessario utilizzare una misurazione diagonale.

Per calcolare efficace css_width sul desktop da una tavoletta:

desktop_pixels = tablet_pixels * (desktop_ppi/tablet_ppi) (1)

tablet_pixels = tablet_css_width * tablet_pixel_density

desktop_pixels = desktop_css_width * desktop_pixel_density

in (1)

desktop_css_width * desktop_pixel_density = tablet_css_width * tablet_pixel_density * (desktop_ppi/tablet_ppi)

ridisporre

desktop_css_width = tablet_css_width * (tablet_pixel_density/desktop_pixel_density) * (desktop_ppi/tablet_ppi)

Il fattore di zoom logica è desktop_css_width/tablet_css_width

zoom_factor = (tablet_pixel_density/desktop_pixel_density) * (desktop_ppi/tablet_ppi)