Ένας φίλος μου επικοινώνησε πρόσφατα μαζί μου για να ζητήσει βοήθεια με έναν ιστότοπο WordPress που είχε δημιουργήσει χρησιμοποιώντας το θέμα X. Ο πελάτης του τον είχε τηλεφωνήσει εκείνο το πρωί αφού παρατήρησε ότι ο ιστότοπός του δεν εμφανιζόταν σωστά στο iPhone του. Ο Nick το έλεγξε μόνος του και σίγουρα, η όμορφη σχεδίαση με απόκριση που σχεδίασε δεν λειτουργούσε πια.
Τον εξέπληξε περαιτέρω το γεγονός ότι όταν άλλαξε το μέγεθος του παραθύρου του προγράμματος περιήγησής του στην επιφάνεια εργασίας του, ο ιστότοπος ανταποκρινόταν, αλλά στο iPhone του εμφανιζόταν μόνο η έκδοση για υπολογιστές. Γιατί ένας ιστότοπος αποκρίνεται σε επιτραπέζιο υπολογιστή και δεν ανταποκρίνεται σε φορητή συσκευή;
Γιατί η αποκριτική σχεδίαση δεν λειτουργεί
Η αποκριτική σχεδίαση σταματά να λειτουργεί όταν λείπει μία γραμμή κώδικα από την κεφαλίδα ενός αρχείου HTML. Εάν λείπει αυτή η γραμμή κώδικα, το iPhone, το Android και άλλες κινητές συσκευές σας θα υποθέσουν ότι ο ιστότοπος που βλέπετε είναι ιστότοπος για επιτραπέζιους υπολογιστές πλήρους μεγέθους και θα προσαρμόσουν το μέγεθος του viewportγια να καλύπτει ολόκληρη την οθόνη.
Τι εννοείτε με τον όρο Viewport και Viewport Size;
Σε όλες τις συσκευές, το μέγεθος της θύρας προβολής αναφέρεται στο μέγεθος της περιοχής μιας ιστοσελίδας που είναι επί του παρόντος ορατή στον χρήστη. Φανταστείτε ότι κρατάτε ένα iPhone 5 με πλάτος 320 pixel. Εκτός εάν δηλώνεται ρητά το αντίθετο, τα iPhone υποθέτουν ότι κάθε ιστότοπος που επισκέπτεστε είναι ιστότοπος για επιτραπέζιους υπολογιστές με πλάτος 980 pixel.
Τώρα, χρησιμοποιώντας το φανταστικό σας iPhone 5, επισκέπτεστε έναν ιστότοπο που έχει σχεδιαστεί για επιτραπέζιους υπολογιστές με πλάτος 800 pixel. Δεν διαθέτει διάταξη που αποκρίνεται, επομένως το iPhone σας εμφανίζει την έκδοση για υπολογιστές πλήρους πλάτους.
Οχι δεν είναι. Με το μέγεθος της θύρας προβολής, μπορεί να εμπλέκεται κλιμάκωση . Το iPhone πρέπει να κάνει σμίκρυνση για να δει την έκδοση πλήρους πλάτους της ιστοσελίδας. Θυμηθείτε ότι η θύρα προβολής αναφέρεται στην περιοχή μιας σελίδας που είναι ορατή αυτήν τη στιγμή στον χρήστη. Ο χρήστης iPhone βλέπει αυτήν τη στιγμή μόνο 320 pixel της σελίδας ή βλέπει την έκδοση πλήρους πλάτους;
Αυτό είναι σωστό: Βλέπουν την ιστοσελίδα πλήρους πλάτους στην οθόνη τους επειδή το iPhone έχει υποθέσει ότι είναι η προεπιλεγμένη συμπεριφορά: Έχει σμικρυνθεί, ώστε ο χρήστης να μπορεί να δει μια ιστοσελίδα με πλάτος έως και 980 pixel. Επομένως, η θύρα προβολής του iPhone είναι 980 px.
Καθώς κάνετε μεγέθυνση ή σμίκρυνση, το μέγεθος της θύρας προβολής αλλάζει. Είπαμε προηγουμένως ότι ο φανταστικός ιστότοπός μας έχει πλάτος 800 εικονοστοιχείων, οπότε αν κάνατε μεγέθυνση στο iPhone σας έτσι ώστε οι άκρες του ιστότοπου να αγγίζουν τις άκρες της οθόνης του iPhone σας, η θύρα προβολής θα ήταν 800 εικονοστοιχεία. Το iPhone μπορεί να έχει θύρα προβολής 320 εικονοστοιχείων σε έναν ιστότοπο για επιτραπέζιους υπολογιστές, αλλά αν είχε, θα βλέπατε μόνο ένα μικρό τμήμα του.
Ο ανταποκρινόμενος ιστότοπος μου είναι κατεστραμμένος. Πώς μπορώ να το διορθώσω;
Η απάντηση είναι μια γραμμή HTML που όταν εισάγεται στην κεφαλίδα μιας ιστοσελίδας λέει στη συσκευή να ρυθμίσει τη θύρα προβολής στο δικό της πλάτος (320 pixel στην περίπτωση ενός iPhone 5) και όχι σε κλίμακα (ή μεγέθυνση) τη σελίδα.
Για μια πιο τεχνική συζήτηση όλων των επιλογών που σχετίζονται με αυτήν τη μετα-ετικέτα, ανατρέξτε σε αυτό το άρθρο στο tutsplus.com.
Πώς να διορθώσετε το θέμα WordPress X όταν δεν ανταποκρίνεται
Επιστροφή στον φίλο μου από πριν: Αυτή η μία γραμμή κώδικα εξαφανίστηκε όταν ενημέρωσε το θέμα X. Όταν επιδιορθώνετε το δικό σας, λάβετε υπόψη ότι το θέμα X δεν χρησιμοποιεί μόνο ένα αρχείο κεφαλίδας – χρησιμοποιεί διαφορετικά αρχεία κεφαλίδας για κάθε στοίβα, επομένως θα πρέπει να επεξεργαστείτε τα δικά σας.
Δεδομένου ότι ο Nick χρησιμοποιεί τη στοίβα Ethos του θέματος X, έπρεπε να προσθέσει γραμμή κώδικα που ανέφερα προηγουμένως στο αρχείο κεφαλίδας που βρισκόταν στο x /frameworks/views/ethos/wp-header.php . Εάν χρησιμοποιείτε διαφορετική στοίβα, αντικαταστήστε το όνομα της στοίβας σας (Integrity, Renew, κ.λπ.) με το "ethos" για να βρείτε το σωστό αρχείο κεφαλίδας. Εισαγάγετε αυτή τη μία γραμμή, και voila! Είστε έτοιμοι.
Έτσι αυτό διορθώνει και τα ερωτήματα πολυμέσων CSS μου;
Όταν εισάγετε αυτήν τη γραμμή στην κεφαλίδα του αρχείου HTML, τα αποκρινόμενα ερωτήματα @media θα αρχίσουν ξαφνικά να λειτουργούν ξανά και η έκδοση για φορητές συσκευές του ιστότοπού σας θα ξαναζωντανέψει. Ευχαριστώ για την ανάγνωση και ελπίζω να βοηθήσει!
Remember to Payette Forward, David P.
