Κατανόηση του προβλήματος
Τα αναδυόμενα παράθυρα είναι περίεργα για την ανταπόκριση των κινητών τηλεφώνων. Εδώ είναι μερικοί συνήθεις ένοχοι:
* CSS επικάλυψη: Τα στυλ CSS του popup σας ενδέχεται να αντικατασταθούν από τα γενικά κινητά στυλ του ιστότοπού σας.
* Σχεδίαση για κινητά: Μπορεί να χρησιμοποιείτε ένα σχέδιο που είναι βελτιστοποιημένο για επιτραπέζιους υπολογιστές και τα στοιχεία του popup είναι κρυμμένα σε κινητές συσκευές.
* Θέματα προβολής: Εάν το αναδυόμενο παράθυρο έχει σχεδιαστεί για να εμφανίζεται σε μεγαλύτερη οθόνη, θα μπορούσε να αποκοπεί ή να κρυφτεί στην μικρότερη οθόνη iPhone.
* συγκρούσεις JavaScript: Μερικές φορές, ο κώδικας JavaScript που προορίζεται για επιτραπέζιους υπολογιστές μπορεί να εμποδίσει το αναδυόμενο παράθυρο να εργάζεται σε iPhones.
Βήματα αντιμετώπισης προβλημάτων
1.
* Ανοίξτε τα εργαλεία προγραμματιστή: Κάντε δεξί κλικ στην αναδυόμενη περιοχή και επιλέξτε "Επιθεώρηση" ή "Επιθεωρήστε το στοιχείο".
* Βρείτε τα στυλ του popup: Χρησιμοποιήστε το εργαλείο επιλογής CSS για να βρείτε τα στυλ CSS που ισχύουν για το αναδυόμενο παράθυρο (συνήθως μια κλάση ή αναγνωριστικό).
* Αναζητήστε υπερβολικά στυλ: Δείτε αν υπάρχουν άλλα στυλ CSS που επικρατούν τις ρυθμίσεις της εμφάνισης του αναδυόμενου αναδυόμενου στοιχείου (π.χ. οθόνη:Καμία, "ή" ορατότητα:κρυμμένη, ").
* Ρυθμίστε το CSS: Μπορεί να χρειαστεί να προσθέσετε ερωτήματα πολυμέσων για να στοχεύσετε τις οθόνες iPhone ειδικά και να προσαρμόσετε το στυλ του αναδυόμενου popup.
2. Ελέγξτε για CSS ειδικά για κινητά:
* ερωτήματα μέσων: Χρησιμοποιήστε ερωτήματα πολυμέσων στο CSS σας για να στοχεύσετε συγκεκριμένα μεγέθη οθόνης, εξασφαλίζοντας ότι το αναδυόμενο παράθυρο εμφανίζεται σωστά στα iPhones. Ακολουθεί ένα παράδειγμα:
`` `CSS
Οθόνη @Media και (μέγιστη πλάτη:768px) { / * Ρυθμίστε το πλάτος για μεγέθη iPhone * /
.popup-container {
Πλάτος:100%. / * Κάντε το αναδυόμενο παράθυρο να πάρει πλήρες πλάτος στο κινητό */
Ύψος:Auto; / * Ρυθμίστε το ύψος όπως απαιτείται */
}
}
`` `
3. Ρυθμίσεις παρακολούθησης:
* Μετα -ετικέτα: Βεβαιωθείτε ότι το HTML σας περιλαμβάνει την ακόλουθη μετα -ετικέτα για να βελτιστοποιήσετε το παράθυρο προβολής για κινητές συσκευές:
`` html
`` `
* Ιδιότητες προβολής: Πειραματιστείτε με διαφορετικές ιδιότητες προβολής («αρχική κλίμακα», «μέγιστη κλίμακα», «ελάχιστη κλίμακα») για να ελέγξετε τον τρόπο με τον οποίο το αναδυόμενο παράθυρο κλιμακώνεται στην οθόνη iPhone.
4.
* Ελέγξτε για κινητές συγκρούσεις: Εάν έχετε κώδικα JavaScript που ενεργοποιεί το αναδυόμενο παράθυρο, το εξετάστε προσεκτικά για να βεβαιωθείτε ότι είναι συμβατό με τα προγράμματα περιήγησης κινητής τηλεφωνίας.
* Χρησιμοποιήστε εργαλεία εντοπισμού σφαλμάτων: Χρησιμοποιήστε το Debugger JavaScript του προγράμματος περιήγησης για να περάσετε από τον κώδικα σας και να προσδιορίσετε τυχόν προβλήματα ή ασυνέπειες.
* Βιβλιοθήκες JavaScript: Εάν χρησιμοποιείτε βιβλιοθήκες JavaScript για το αναδυόμενο παράθυρο, ελέγξτε την τεκμηρίωση τους για συμβατότητα με κινητά.
5. Δοκιμή σε iPhones:
* πραγματικές συσκευές: Η δοκιμή σε πραγματικά iPhones είναι ζωτικής σημασίας. Η εξομοίωση του προγράμματος περιήγησης στα εργαλεία προγραμματιστή επιφάνειας εργασίας ενδέχεται να μην προσομοιώνει με ακρίβεια όλες τις πτυχές της συμπεριφοράς ενός iPhone.
Παράδειγμα Εφαρμογή
Ακολουθεί ένα πιο ολοκληρωμένο παράδειγμα χρησιμοποιώντας ερωτήματα πολυμέσων για να προσαρμόσετε το αναδυόμενο παράθυρο για iPhones:
`` html
.popup-container {
Εμφάνιση:Κανένα;
θέση:σταθερό;
Κορυφή:50%.
Αριστερά:50%;
Μετασχηματισμός:μετάφραση (-50%, -50%).
φόντο-χρώμα:#fff;
Επεξεργασία:20px;
z-index:100; / * Βεβαιωθείτε ότι είναι στην κορυφή */
}
Οθόνη @Media και (μέγιστη πλάτη:768px) { / * Ρυθμίστε το πλάτος για iPhones * /
.popup-container {
Πλάτος:90%.
Ύψος:Auto;
Περιθώριο:0 Auto;
}
}
/ * Προσθέστε τα popup σας εδώ */
Αυτό είναι το αναδυόμενο περιεχόμενό σας.
Λειτουργία showpopup () {
document.QuerySelector ('.
}
Λειτουργία closePopup () {
document.QuerySelector ('.
}
Αναδυόμενος τίτλος