Αντιμετώπιση της γραμμής διευθύνσεων iOS σε διατάξεις 100vh

Δεν είναι ένα σφάλμα, είναι ένα χαρακτηριστικό.

Καθώς ανέπτυξα την πρώτη μου μετατροπή PSD με την όμορφη εικόνα του 100vh και 100vw ήρωα, τρομοκρατήθηκα να ανακαλύψω ότι το κάτω μέρος της διάταξης μου ήταν κρυμμένο όταν είδα από το iPhone 6s iOS 10 Safari. Γιατί; Νόμιζα ότι έκανα τα πάντα σωστά! Μήπως κατά λάθος προσθέσω περιθώριο ή παραμόρφωση κάπου; Τι έβλεπα;

Μετά από πιο προσεκτική επιθεώρηση, συνειδητοποίησα γρήγορα ότι αν και η εικόνα του ήρωα ήταν στην πραγματικότητα 100vh, καλύφθηκε μερικώς από τη διεύθυνση και τη γραμμή εργαλείων του Safari, δημιουργώντας το φοβερό "wiggle-scroll". Αυτό είναι εντάξει, σκέφτηκα. Τίποτα δεν μπορεί να διορθωθεί μια γρήγορη αναζήτηση στο Google και η υπερχείλιση στοίβας. Ωστόσο, έμαθα ότι η λύση δεν είναι τόσο απλή.

Αφού έκανα κάποια έρευνα, συνειδητοποίησα ότι ήταν ένα αρκετά συνηθισμένο παράπονο, που αναφέρεται ως κάποιο "bug scroll view" του iOS. Τον Φεβρουάριο του 2015, ο Nicolas Hoizy ανέφερε το σφάλμα στο Webkit Bugzilla όταν ανακάλυψε ότι το κάτω μέρος του κινητού του παιχνιδιού 100vh κόπηκε από τη μπάρα των κουμπιών του προγράμματος περιήγησης. Ο Benjamin Poulain, μηχανικός της Apple, απάντησε στον Hoizy. Είπε - με αληθινό τρόπο προγραμματιστή - ότι δεν ήταν ένα σφάλμα, είναι ένα χαρακτηριστικό γνώρισμα.

Αυτό είναι εντελώς σκόπιμο. Χρειάστηκε αρκετή δουλειά από την πλευρά μας για να επιτύχουμε αυτό το αποτέλεσμα. :)

Το βασικό πρόβλημα είναι αυτό: η ορατή περιοχή αλλάζει δυναμικά κατά την κύλιση. Εάν ενημερώσουμε το ύψος προβολής CSS ανάλογα, πρέπει να ενημερώσουμε τη διάταξη κατά τη διάρκεια του κύλισης. Όχι μόνο αυτό μοιάζει με σκατά, αλλά το κάνει σε 60 FPS είναι πρακτικά αδύνατο στις περισσότερες σελίδες (60 FPS είναι η βασική καμπύλη στο iOS).

Είναι δύσκολο να σας δείξουμε το κομμάτι "μοιάζει σαν σκατά", αλλά φανταστείτε καθώς μετακινείτε, το περιεχόμενο μετακινείται και αυτό που θέλετε στην οθόνη συνεχώς μετατοπίζεται.

Η δυναμική ενημέρωση του ύψους δεν λειτουργούσε, είχαμε κάποιες επιλογές: αφαιρέστε τις μονάδες προβολής σε iOS, ταιριάξτε το μέγεθος του εγγράφου όπως πριν από το iOS 8, χρησιμοποιήστε το μικρό μέγεθος προβολής, χρησιμοποιήστε το μέγεθος μεγάλης προβολής.

Από τα δεδομένα που είχαμε, χρησιμοποιώντας το μεγαλύτερο μέγεθος προβολής ήταν ο καλύτερος συμβιβασμός. Ο περισσότερος ιστότοπος που χρησιμοποιεί μονάδες προβολής εμφάνιζε μεγάλες εμφανίσεις τις περισσότερες φορές.

Εγώ για ένα, δεν είμαι μηχανικός στην Apple, οπότε τον πιστεύω όταν λέει ότι υπάρχουν σοβαροί λόγοι πίσω από το γιατί σχεδίασαν αυτή τη συμπεριφορά. Έτσι, το σφάλμα φέρθηκε με την ένδειξη "RESOLVED WONTFIX" και συνειδητοποίησα ότι θα έπρεπε να βυθίσω βαθύτερα αν ήθελα ποτέ την όμορφη εικόνα του ήρωα 100vh.

Λύση 1: Ζητήματα μέσων CSS

Αυτή η μέθοδος, αν και δεν είναι εντελώς κομψή, είναι απλή και εύκολη στην εφαρμογή. Απλά στοχεύστε όλες τις συσκευές iOS με συγκεκριμένο πλάτος και ύψος συσκευών. Εδώ είναι ένας κώδικας, ευγενική προσφορά του pburtchaell, όπου ".foo" θα είναι μια κλάση στο στοιχείο πλήρους ύψους σας.

@media all και (πλάτος συσκευής: 768px) και (ύψος συσκευής: 1024px) και (προσανατολισμός: πορτρέτο) {
    .foo {
        ύψος: 1024px;
    }}
}}
                                            
/ * iPad με προσανατολισμό στο τοπίο. * /
@media all και (πλάτος συσκευής: 768px) και (ύψος συσκευής: 1024px) και (προσανατολισμός: τοπίο) {
    .foo {
        ύψος: 768px;
    }}
}}
                                               
/* iPhone 5
Μπορείτε επίσης να στοχεύσετε συσκευές με λόγο διαστάσεων. * / οθόνη @media και (αναλογία συσκευών: 40/71) {
    .foo {
        ύψος: 500px;
    }}
}}

Κοιτάζοντας τον παραπάνω κώδικα, φαίνεται ότι μια ελαφρά επικάλυψη περιεχομένου είναι αναπόφευκτη. Ωστόσο, τα στοιχεία με τη θέση και το μέγεθος που εξαρτώνται από τις μονάδες παραθύρων προβολής θα παραμείνουν σταθερά. Αυτή είναι μια νίκη! Η προσθήκη κάτι σαν ένα απλό calc (100vh - heightOfBar) θα αντισταθμίσει τη γραμμή διευθύνσεων. Αλλά με τόσες πολλές συσκευές και προγράμματα περιήγησης για υποστήριξη, αυτό δεν φαίνεται να είναι μια βιώσιμη λύση.

Λύση 2: Στόχευση innerHeight με Javascript.

Οι εσωτερικές μετρήσεις αφορούν το ύψος / το πλάτος του παραθύρου προβολής, λαμβάνοντας υπόψη τις κατακόρυφες / οριζόντιες γραμμές κύλισης. Τώρα μιλάμε! Εδώ είναι ένα διάγραμμα για το τι αυτό συνεπάγεται.

Χρησιμοποιώντας αυτή τη γνώση, μπορείτε να χρησιμοποιήσετε ένα απλό σενάριο σαν αυτό για να ρυθμίσετε το ύψος στη φόρτωση σελίδων και να το διατηρήσετε σταθερό μέχρι να αλλάξετε το μέγεθος, από το χρήστη Tobiq:

window.onresize = λειτουργία () {
    document.body.height = window.innerHeight;
}}
window.onresize (); // κλήση για να ρυθμίσετε αρχικά το ύψος.

Λύση 3: Συνιστώσα αντιδράσεων Div100vh

Δεδομένου ότι όλοι αγαπάμε το React, ήθελα να βρω μια λύση που να τροφοδοτείται με τα αντιδραστήρια React. Βρήκα ένα πακέτο npm από τον Mikhail Vasin που στοχεύει να διορθώσει αυτό το ζήτημα. Εγκαταστήστε έτσι:

npm install - αποθήκευση αντιδράσεων-div-100vh

Στη συνέχεια, εισάγετε το στοιχείο και τυλίξτε τα στοιχεία σας σε αυτό, όπως:

εισαγωγή Div100vh από το 'react-div-100vh'.
const MyFullscreenComponent = () => (
    
       Τα πράγματα σας πηγαίνουν εδώ
    
)

Και εκεί πηγαίνετε!

Αφού δοκιμάσω αυτές τις διάφορες λύσεις, συνειδητοποιώ ότι δεν υπάρχει λύση ενιαίου μεγέθους για αυτό το ζήτημα. Επομένως, παρακαλούμε να είστε επιμελείς με τις δοκιμές σας σε πολλαπλούς browser, cross-device. Και ίσως να αποφύγετε τη χρήση μονάδων vh / vw για κινητά εντελώς, καθώς η συμπεριφορά των buggy με αυτές τις μονάδες είναι καλά τεκμηριωμένη στα προγράμματα περιήγησης για κινητά.

Επιτρέψτε μου να μάθω αν αυτές οι λύσεις ήταν χρήσιμες για εσάς και ποιες λειτουργούσαν καλύτερα!