Εάν είστε web-σχεδιαστής, το σφάλμα είναι γνωστό ωςΗ κλίμακα προβολής ενδέχεται να έχει αντιμετωπίσει εσάς που συμβαίνει στις συσκευές Apple, δηλαδή iPod, iPhone και iPad. Μερικές φορές, όταν περιστρέφουμε τη συσκευή Apple από πορτραίτο σε οριζόντιο προσανατολισμό, ο ιστότοπος μεγεθύνεται, δείχνοντας μια προβολή με πλάτος μεγαλύτερο από το πλάτος της συσκευής. Αυτό οφείλεται στο γεγονός ότι ο σχεδιαστής έχει ρυθμίσει το πλάτος της προβολής στο πλάτος της συσκευής. Για να σας βοηθήσουμε να αποκτήσετε μια ιδέα για το πώς λειτουργεί αυτό το σφάλμα, σχεδιάσαμε μια σελίδα δείγματος και περιστρέψαμε το iPad μας από όψη πορτραίτου σε οριζόντιο.
Μια γρήγορη λύση για το εν λόγω σφάλμα μας καθοδηγεί να ρυθμίσετε το'Μέγιστη κλίμακα = 1' στην μετα-ετικέτα viewport. Αυτό δεν διορθώνει το πρόβλημα προς το παρόν, αλλά η σελίδα δεν μπορεί πλέον να μεγεθύνεται, επειδή καθορίζουμε το μέγιστο πλάτος παρόμοιο με το πλάτος της συσκευής.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Αυτή η γρήγορη λύση δεν είναι ακριβώς η τέλεια λύση. Μέσα από τη σκληρή δουλειά των σχεδιαστών όπως @mathias, @cheeaun και @jdalton, έχουμε τώρα ένα javascript που μπορεί να προστεθεί στην ενότητα <head> για να πάρετε μια μόνιμη λύση. Κάτω από αυτή τη λύση, η σελίδα θα παραμείνει μεγεθυμένη.
<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>Αυτές είναι οι μόνες γνωστές λύσεις που οι σχεδιαστές έχουν καταλήξει μέχρι τώρα. Αλλά αν έχετε κάποιο άλλο για να διορθώσετε αυτό το σφάλμα, μοιραστείτε το μαζί μας στα σχόλια.
Σχόλια