Dacă sunteți un designer web, bug-ul este cunoscut sub numele deViewpoint Scaling s-ar fi putut confrunta cu dvs., care apare pe dispozitivele Apple, adică iPod, iPhone și iPad. Uneori, când rotim dispozitivul nostru Apple de la portret la orientare peisaj, site-ul mărește, arătându-ne o vedere având o lățime mai mare decât lățimea dispozitivului. Acest lucru se datorează faptului că proiectantul a setat lățimea de vizualizare pe lățimea dispozitivului. Pentru a vă ajuta să vă faceți o idee despre cum funcționează acest bug, am proiectat o pagină de exemplu și am rotit iPad-ul nostru de la portret la vizualizare peisaj.
O soluție rapidă pentru acest bug ne îndrumă să setăm„Maximum-scale = 1” în eticheta metaportală. Acest lucru rezolvă deocamdată problema, dar pagina nu mai poate face zoom, deoarece fixăm lățimea maximă similară cu lățimea dispozitivului.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Această soluție rapidă nu este exact soluția perfectă. Prin munca grea a unor designeri precum @mathias, @cheeaun și @jdalton, avem acum un javascript care poate fi adăugat la secțiunea <head> pentru a obține o soluție permanentă. În cadrul acestei soluții, pagina va rămâne capabilă de zoom.
<script type="text/javascript">
(function(doc) {
var addEvent = "addEventListener",
type = "gesturestart",
qsa = "querySelectorAll",
scales = [1, 1],
meta = qsa in doc ? doc[qsa]("meta[name=viewport]") : [];
function fix() {
meta.content = "width=device-width,minimum-scale=" + scales[0] + ",maximum-scale=" + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>Acestea sunt singurele soluții cunoscute cu care designerii au ajuns până acum. Dar dacă aveți un altul pentru a remedia acest bug, împărtășiți-l cu noi în comentarii.
Comentarii