Safari Mobile: la rotazione del dispositivo provoca cattiva desquamazione sito

Question

ho un sito web mobile per iPhone e iPad, dove a disattivare utente lo zoom con

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> 

questo funziona bene fino a quando il sito è in modalità orizzontale. la larghezza del sito web è esattamente la larghezza dello schermo. quindi, se si ruota il dispositivo in modalità verticale, viene ridimensionato in modo che si adatti alla nuova larghezza (più corta). anche questo è ok.

ma poi se lo ruoto di nuovo in modalità orizzontale viene improvvisamente ridimensionato a circa il 125% che significa che lo scorrimento orizzontale è ora possibile e lo zoom non è possibile poiché inizialmente disabilitato.

Come posso tornare indietro al 100% di zoom quando viene ruotato di nuovo in orizzontale?

grazie!

Answer 1

provare a sperimentare con la massima scala e minimo di scala in questo modo

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" /> 

e vedere se è possibile ottenere ciò che si sta cercando ..

Answer 2

Utilizzando la maximum-scale e minimum-scale per fermare lo zoom don' Funziona davvero perché poi togli l'abilità dell'utente di zoomare. Questo è davvero una cattiva idea, perché rende gli utenti con gli occhi cattivi arrabbiato che il vostro sito non zoomare, mentre altri siti fanno ...

ho provato timeout e tutti i tipi di javascript fantasia, quindi ho trovato questo: https://github.com/scottjehl/iOS-Orientationchange-Fix

tramite questa domanda correlata: How do I reset the scale/zoom of a web app on an orientation change on the iPhone?

In quel post, Andrew Ashbacher postato un link al codice scritto da Scott Jehl:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this); 

questo è un solut ion avvolto piacevolmente in un IIFE così non devi preoccuparti dei problemi di spazio dei nomi.

Basta inserirlo nella sceneggiatura (non in document.ready() se si utilizza jQuery) e viola!

Tutto ciò che fa è disabilitare lo zoom sugli eventi devicemotion che indicano che orientationchange è imminente. È la soluzione migliore che ho visto perché funziona davvero e non disabilita lo zoom.

MODIFICA: questo approccio non è sempre affidabile, specialmente quando si tiene l'ipad inclinato. Inoltre, non penso che questo evento sia disponibile per gli ipad di gen 1

Answer 3

Disabilitare lo zoom è una cattiva idea. Non è una soluzione perfetta, ma il ridimensionamento delle dimensioni dei caratteri sul cambiamento di orientamento del webkit può aiutare a minimizzare il problema.Si potrebbe lasciare la testa del documento con:

<meta name="viewport" content="width=device-width, initial-scale=1">

Poi si dovrebbe affrontare il ridimensionamento font-size nel CSS in questo modo:

body { 
    font-size: 1.5rem; 
    line-height: 2.3rem; 
    -webkit-text-size-adjust: 100%; 
} 
/* This prevents mobile Safari from freely adjusting font-size */**