Διόρθωση WebKit και ύψος 100vh
Όταν χρησιμοποιείτε το 100 τοις εκατό του ύψους της θύρας προβολής, το WebKit και συνεπώς το Safari θεωρούν θεωρητικά το στιλ εντάξει. Αλλά αν θέλετε επίσης να σέβεστε τα ένθετα της ασφαλούς περιοχής, τα οποία είναι αρκετά σημαντικά στο κινητό, μια οπτική ασυνέπεια γίνεται ορατή.
Καθώς αυτή η προοδευτική εφαρμογή ιστού χρησιμοποιεί το Tailwind.css, θα σας δείξω πώς να χρησιμοποιείτε σωστά το 100vh στο Safari αντίστοιχα στο WebKit, σεβόμενοι επίσης την ασφαλή περιοχή, έτσι ώστε η εφαρμογή ιστού σας να φαίνεται χτυπητή σε όλες τις οθόνες.
Χρησιμοποιώντας ένα πρόσθετο PostCSS
Συνιστώ τη χρήση της προσθήκης "postcss-100vh-fix". Καθώς έχετε ήδη ρυθμίσει ένα postcss-config με την προετοιμασία του Tailwind, αυτή η λύση ταιριάζει αρκετά φυσική και χρησιμοποιεί τον λιγότερο χρόνο για να διορθώσει το πρόβλημα ύψους θύρας προβολής.
// 1. Install the dependency
// npm i postcss-100vh-fix
//
// Then use a custom PostCSS-config.
// This example assumes you only have
// one custom plugin, which leads to
// the following config.
module.exports = {
plugins: [
require("postcss-100vh-fix")
],
};
Μια σημείωση για όλους τους χρήστες Next.js
Εάν χρησιμοποιείτε το Tailwind με το Next.js, πρέπει να κάνετε μια μικρή τροποποίηση στο PostCSS-config για να κάνετε τα πράγματα να λειτουργήσουν. Αντί να χρησιμοποιείτε τις εισαγωγές μέσω του "απαιτείται", πρέπει να χρησιμοποιήσετε το όνομα του πακέτου ως συμβολοσειρά στη σειρά προσθηκών. Επιπλέον, δεν χρειάζεται να συμπεριλάβετε όλα τα πρόσθετα του Tailwind που έρχονται από προεπιλογή, καθώς προσαρτώνται αυτόματα από το Tailwind.
// Effectively the same config,
// but now compatible with Next.js,
// which only accepts strings for
// plugins, where they represent their
// package name.
module.exports = {
plugins: ["tailwindcss","autoprefixer","postcss-100vh-fix"],
};
// ... in your app ...
// Now all that's left to do is
// apply the screen-height, which
// results in a '100vh'-value:
//
// ... <div class="h-screen"> ...
Μια άλλη αναμφισβήτητα άσχημη λύση
Παρόλο που σίγουρα δεν συνιστώνται τα ακόλουθα, απλώς σας δείχνω πώς είναι τεχνικά δυνατό και με άλλο τρόπο. Ο ακόλουθος κώδικας δεν απαιτεί προσθήκες ή αλλαγές στο postcss-config, αλλά απαιτεί κάποια Javascript και ξεσπά από τη σύνταξη του Tailwind, τουλάχιστον σε αυτό το παράδειγμα χωρίς βελτιστοποιήσεις.
// Manually setting the 'style':
//
function View(){
const isMobileWebKit = useIsMobileWebkit();
return (
<div
style={{
height: isMobileWebKit ? "-webkit-fill-available" : "100vh"
}}> /* ... */ </div>;
}
/*
<div
style={{
height: isMobileWebKit ? "-webkit-fill-available" : "100vh"
}}> ...
*/
// This is the hook to determine
// if we're in a WebKit-env:
export function useIsMobileWebkit() {
const [flag, setFlag] = useState(false);
useEffect(() => setFlag(isMobileWebkit()), []);
return flag;
}
Και τελειώσαμε
Αυτό το άρθρο παρέχει έναν γρήγορο οδηγό σχετικά με τον τρόπο επίλυσης ενός μικρού αλλά αναμφισβήτητα ενοχλητικού οπτικού σφάλματος στο WebKit όταν χρησιμοποιείτε το 100 τοις εκατό του ύψους της θύρας προβολής, ενώ ταυτόχρονα σέβεται τα ένθετα της ασφαλούς περιοχής. Ελπίζω να σας άρεσε αυτό το άρθρο, φροντίστε να δείτε άλλους ενδιαφέροντες οδηγούς και παραδείγματα που αναφέρονται παρακάτω
