Impostazione del livello di zoom sul browser mobile

Question

Sto progettando un sito Web per l'accesso mobile e desidero impostare la larghezza della pagina, l'altezza e le dimensioni dei pulsanti, in modo che visualizzino il riempimento dello schermo. Ad esempio, se l'utente utilizza HTC HD, l'intero schermo sarà 480x800 con un pulsante di dimensioni 240x200. Tuttavia, IE mobile e Opera caricano la pagina con un certo livello di zoom, quindi i pulsanti visualizzati sono troppo grandi o troppo piccoli. Come posso leggere il livello di zoom attuale in javascript o impostarlo da javascript?

Answer 1

Lei non dovrebbe fare affidamento su utilizzando JavaScript su dispositivi mobili, perché non è ancora ampiamente supportata in tutti i telefoni. Invece dovresti impostare la larghezza della pagina in modo che corrisponda alla larghezza del browser in modo che le tue pagine appaiano al 100%, ad es. body {width: 100%; margin: 0; padding: 0;}

Come per i pulsanti, è necessario utilizzare valori relativi o utilizzare dimensioni di immagine diverse se è possibile rilevare la larghezza del browser prima che la pagina venga caricata.

Answer 2

Date un'occhiata in <meta name="viewport">. È supportato su un'ampia gamma di piattaforme mobili, tra cui (AFAIK) iPhone, Android, Blackberry, Opera Mobile e persino IE6 Mobile. Fondamentalmente, ti consente di preimpostare la larghezza del dispositivo, il livello di zoom e lo zoom massimo/minimo. Dai uno sguardo allo Apple developer site e per maggiori informazioni.

Inoltre, è possibile utilizzare le media query CSS per rilevare la forma e le dimensioni del browser, e servire diversi layout (ETC) di conseguenza. Ancora una volta, questi sono abbastanza ampiamente supportati e il Apple developer site ha più informazioni.