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