Ελέγξτε τη διάταξη σε διαφορετικές αναλύσεις. Πώς να χρησιμοποιήσετε τη δυνατότητα εξομοίωσης συσκευής του προγράμματος περιήγησης Google Chrome

Παιδικά προϊόντα 01.05.2019

Επισκόπηση προγράμματος Η έκδοση υπολογιστή του Microsoft Excel Viewer θα επιτρέψει...

Καλημέρα σε όλους, αγαπητοί μου φίλοι και καλεσμένοι του blog μου. Θυμάμαι ότι μόλις πριν από τρία χρόνια δεν είχα ακούσει ποτέ για μια τέτοια έννοια όπως προσαρμοστική διάταξη ή έκδοση για κινητά. Αλλά σήμερα, χωρίς αυτό, οποιοσδήποτε ιστότοπος φαίνεται ελλιπής. Φανταστείτε, πηγαίνετε σε έναν ιστότοπο από ένα κινητό τηλέφωνο, και είναι εκεί σε πλήρες μέγεθος και με μικρή γραμματοσειρά.

Δηλαδή, πρέπει συνεχώς να κάνετε ζουμ και να κάνετε κύλιση, κάτι που είναι τρομερά άβολο. Και η έκδοση για κινητά ή η προσαρμοστική διάταξη αφαιρεί όλα αυτά τα προβλήματα. Το θυμάμαι κιόλας αφού έβαλα αποκριτικό πρότυπογια το πρώτο μου έργο, τότε με ενδιέφερε η εμφάνιση του ιστότοπου διαφορετικές συσκευές. Για να το κάνω αυτό, χρησιμοποίησα μια υπέροχη υπηρεσία. Και σήμερα θα σας πω για αυτό.

Αλλά σε γενικές γραμμές, στην πραγματικότητα, αυτό το πράγμα χρειάζεται επίσης για να κοιτάξετε τη διάταξη του πόρου σας και να δείτε όλα τα jambs. Γιατί στην κανονική και στην κινητή έκδοση όλα μπορεί να είναι καλά, αλλά στα tablet όλα μπορεί να είναι χάλια. Επομένως, τέτοιοι έλεγχοι θα πρέπει επίσης να χρησιμοποιούνται όταν δημιουργείτε τον πόρο σας.

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

Quirktools.com

Μάλλον το περισσότερο δημοφιλής υπηρεσίαΤο μέρος για να δείτε πώς συμπεριφέρεται ένας ιστότοπος είναι το quirktools.com. Μεταβείτε σε αυτό και θα δείτε μια απλή υπηρεσία με μια διαισθητική διεπαφή. Απλώς βεβαιωθείτε ότι βρίσκεστε στην καρτέλα Screenfly.

Τώρα εισάγετε τη διεύθυνση του ιστότοπού σας σε μια ειδική γραμμή, μετά την οποία θα δείτε τον πόρο σας στο δικό σας κανονική κατάσταση. Λοιπόν, τότε αρχίζει η διασκέδαση. Στην κορυφή υπάρχουν πολλά εικονίδια που αντιπροσωπεύουν διαφορετικές συσκευές: Υπολογιστές, tablet, τηλεοράσεις, τηλέφωνα. Κάνοντας κλικ σε οποιοδήποτε εικονίδιο, θα ανοίξει ένα αναπτυσσόμενο μενού με συγκεκριμένες αναλύσεις και μοντέλα που αντιστοιχούν σε αυτό.

Για παράδειγμα, θέλω να δω πώς θα μοιάζει το πνευματικό παιδί μου σε ένα τηλέφωνο Samsung Galaxy S3 με ανάλυση 360*440. Θα πάω στο εικονίδιο του τηλεφώνου και θα επιλέξω απαιτούμενη ανάλυση. Παρεμπιπτόντως, η σειρά Galaxy S λαμβάνεται ως πρότυπο εδώ, οπότε επέλεξα το μοντέλο μου.

Και τώρα όλα πήγαν καλά. Και φυσικά, δεν πρέπει να περιοριστείτε σε μία λύση. Ας ελέγξουμε όπου μπορούμε. Και παρεμπιπτόντως, υπάρχει ένα άλλο ενδιαφέρον κουμπί στο μενού - Περιστροφή. Χάρη σε αυτό, μπορούμε να γνωρίζουμε πώς φαίνεται ο ιστότοπός μας εάν η οθόνη είναι στραμμένη κατά 90 μοίρες.

ami.responsivedesign.is

Μια άλλη υπηρεσία επαλήθευσης που μου άρεσε πολύ είναι http://ami.responsivedesign.is/. Μεταβείτε στον ιστότοπο και στο ειδικό πεδίο πληκτρολογήστε τη διεύθυνση του πόρου που αναζητάτε και μετά κάντε κλικ ΠΑΩ. Ως αποτέλεσμα, θα δείτε έως και τέσσερις διαφορετική οθόνηγια τέσσερις συσκευές.

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

deviceponsive.com

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

Το πλεονέκτημα αυτής της υπηρεσίας, όπως και της προηγούμενης, είναι ότι δεν παρακολουθείτε απλώς την οθόνη, αλλά μπορείτε επίσης να μιμηθείτε την εργασία σε αυτές τις συσκευές, για παράδειγμα, κύλιση, κλικ κ.λπ.

Mobile/Responsive Web Design Tester

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

Για τους σκοπούς μας, συνιστούμε να εγκαταστήσετε μια επέκταση στο google chrome που ονομάζεται Mobile/responsive Web Design Tester. Μετά την εγκατάσταση, θα δείτε ένα αντίστοιχο εικονίδιο στην κορυφή, όταν κάνετε κλικ σε αυτό, μπορείτε να επιλέξετε οποιαδήποτε από τις διαθέσιμες αναλύσεις (τα πιο δημοφιλή μοντέλα κινητών τηλεφώνων και tablet) και επίσης να ορίσετε τη δική σας στο κάτω μέρος της ενότητας "Προσαρμοσμένος παράγοντας χρήστη/Ανάλυση".

Παρεμπιπτόντως, από όλα όσα περιέγραψα παραπάνω, αυτή η μέθοδος είναι η μόνη που, εκτός από την προσαρμοστική διάταξη, εμφανίζει και ξεχωριστές εκδόσεις για κινητά (vk.com), οπότε να το έχετε υπόψη σας.

Εργασία με παράθυρο

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

Με τη μείωση αυτού του παραθύρου, το περιεχόμενο του πόρου μας θα προσαρμοστεί στο μέγεθος αυτού του παραθύρου. Είναι τόσο απλό.

Αλλά φυσικά υπάρχουν και μειονεκτήματα σε αυτές τις μεθόδους. Δεν εμφανίζουν πώς μοιάζουν οι ιστότοποι που έχουν ξεχωριστή έκδοση για κινητά και όχι αποκριτική. Για παράδειγμα vk.com και ok.ru. Όταν έχουμε πρόσβαση σε αυτά από μια συσκευή, μεταφερόμαστε στην έκδοση για κινητά των m.vk.com και m.ok.ru.

Και εδώ είναι που συμβαίνει το κύριο πρόβλημα. Το μόνο πράγμα που εμφανίζει τέτοιους ιστότοπους είναι η επέκταση του προγράμματος περιήγησης που περιέγραψα παραπάνω. Όλα λειτουργούν ξεκάθαρα εδώ. Παρεμπιπτόντως, αν έχετε αγαπημένες μεθόδους, θα χαρώ να τις δω. Γράψτε λοιπόν στα σχόλια).

Με εκτίμηση, Dmitry Kostin.

Σταματήστε να αλλάζετε το μέγεθος του παραθύρου του προγράμματος περιήγησής σας, σταματήστε να το βιάζετε! Βάζω στοίχημα ότι το έχετε ακούσει περισσότερες από μία φορές. Εντάξει, ίσως δεν το έχετε ακούσει. Αλλά αν αναπτύσσετε επαγγελματικά ανταποκρινόμενους ιστότοπους, καταλαβαίνετε τι εννοώ: οποιαδήποτε αλλαγή DOM ή επεξεργασία CSS και ξεκινάτε πάλι να τραβάτε την άκρη του προγράμματος περιήγησης εμπρός και πίσω, να δοκιμάζετε τις αλλαγές και να βλέπετε αν κάτι έχει χαλάσει.

Ο σκοπός των κινήσεών σας είναι να μιμηθείτε τις οθόνες διαφόρων συσκευών.

ΣΕ εταιρικό περιβάλλονΣυχνά, έχετε πολλά gadget που παρέχονται από την εταιρεία για δοκιμή. Στη δουλειά μου, έχω στη διάθεσή μου ένα iPad, iPod, άλλα tablet, φορητούς υπολογιστές και επιτραπέζιους υπολογιστές. Εάν δεν έχετε αυτή την πολυτέλεια, πρέπει να χρησιμοποιήσετε αυτό που έχετε στη διάθεσή σας.

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

Για δοκιμή, επέλεξα τον πραγματικά ανταποκρινόμενο ιστότοπο PajamasOnYourFeet.com, ο ιστότοπος είναι χτισμένος με βάση ένα πρότυπο HTML5 που παρέχεται δωρεάν από την EGrappler.

ανταποκρίνομαι;

Το Am I Responsive, ένα πολύ απλό εργαλείο που σας επιτρέπει να προβάλλετε γρήγορα τον ιστότοπό σας σε έως και 4 συσκευές. Όλα είναι iOS και ο προγραμματιστής το εξηγεί ως χαρακτηριστικό του ιστότοπου. Γενικά, χωρίς ρυθμίσεις, χωρίς επιλογή, αλλά πολύ απλό και ξεκάθαρο.

Διαθέσιμα μεγέθη:

οθόνη επιτραπέζιου υπολογιστή - 1600 x 992 px;
φορητός υπολογιστής - 1280 x 802 px;
tablet - 768 x 1024 px;
κινητό τηλέφωνο - 320 x 480 px.

Για να αναφέρω τον προγραμματιστή: «Αυτό δεν είναι εργαλείο δοκιμών, είναι εξαιρετικά σημαντικό να το δοκιμάσετε πραγματικές συσκευές. ΕΝΑ αυτό το εργαλείοΘα σας βοηθήσει να τραβήξετε γρήγορα ένα στιγμιότυπο οθόνης και να δείξετε στον πελάτη τι εννοείτε."

Υπάρχουν δύο ωραία χαρακτηριστικά: η δυνατότητα μεταφοράς συσκευών στην οθόνη σας και η δυνατότητα κοινής χρήσης ενός συνδέσμου σε μια δοκιμή τοποθεσίας.

θετική συσκευή

Το deviceponsive μοιάζει πολύ με το Am I Responsive, καθώς είναι εξίσου απλό, με ελάχιστες ρυθμίσεις και επιλογές. Όλες οι διαθέσιμες συσκευές εμφανίζονται ταυτόχρονα σε μία μεγάλη σελίδα. Από όλες τις διαθέσιμες επιλογές, αυτή είναι η δυνατότητα να επεξεργαστείτε το φόντο της κεφαλίδας και να προσθέσετε το λογότυπό σας εκεί, κάτι που θα είναι χρήσιμο όταν αποφασίσετε να μοιραστείτε ένα στιγμιότυπο οθόνης.

Συσκευές και διαθέσιμες αναλύσεις οθόνης.

Macbook - 1280 x 800
Πορτρέτο iPad - 768 x 1024
Πορτρέτο iPad - 1024 x 768
Kindle πορτρέτο - 600 x 1024
Ανάπτω οριζόντιος προσανατολισμός- 1024 x 600
Πορτρέτο iPhone - 320 x 480
Τοπίο iPhone - 480 x 320
Πορτρέτο γαλαξία - 240 x 320
Τοπίο γαλαξία - 320 x 240

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

ανταποκρινόμενη δοκιμή

Όπως και η συσκευή, έτσι και η αποκριτική δοκιμή εμφανίζει τον ιστότοπό σας διάφορες συσκευές. Αλλά αντί να δείχνεις σε όλους ταυτόχρονα, εσύ επιλέγεις απαιτούμενη συσκευή V επάνω μενούσελίδες. Παρεμπιπτόντως, η κλιμάκωση λειτουργεί σωστά εδώ, γεγονός που σας επιτρέπει να δοκιμάσετε υψηλότερη ανάλυση σε μια μικρότερη.

30 διαφορετικές αναλύσεις είναι διαθέσιμες στον ιστότοπο, που κυμαίνονται από μια τεράστια οθόνη επιτραπέζιου υπολογιστή, μέχρι αυτό που αποκαλούν "κακό android" (για να είμαστε δίκαιοι, υπάρχει και ένα κανονικό android).

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

ανταποκρίνεται.είναι

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

Οι διαθέσιμες επιλογές συσκευής είναι αυτόματη (όπως βλέπετε τον ιστότοπο), επιτραπέζιος υπολογιστής, tablet σε οριζόντιο και κατακόρυφο προσανατολισμό, smartphone σε κατακόρυφο και οριζόντιο προσανατολισμό. Δυστυχώς, δεν είναι δυνατό να ορίσετε αυθαίρετα μεγέθη σε px.

Screenqueries

Εδώ όμως υπάρχουν οι δυνατότητες διαθέσιμες επιλογέςδιαφοροποίηση των ερωτημάτων οθόνης από προηγούμενες υπηρεσίες. Εδώ παρουσιάζονται 14 τηλέφωνα και 12 tablet, με μια ξεχωριστή ευκαιρίαμετάβαση σε κατακόρυφη και οριζόντια λειτουργία. Τα αποτελέσματα εμφανίζονται σε ένα πλέγμα με χάρακες. Είναι επίσης δυνατό να ορίσετε μια προσαρμοσμένη ανάλυση σύροντας τη δεξιά ή την κάτω άκρη.

Ένα ενδιαφέρον χαρακτηριστικό αυτού του ιστότοπου είναι ότι για πολλές συσκευές υπάρχει μια επιλογή "Trueview" που εμφανίζει τον ιστότοπό σας στο εγγενές πρόγραμμα περιήγησης της συσκευής.

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

Screenfly

Το Screenfly είναι ίσως το πιο λειτουργικό από όλα. Υπάρχουν διαθέσιμες 9 περισσότερες από συσκευές tablet - από φορητούς υπολογιστές 10" έως οθόνες 24", 5 tablet, 9 τηλέφωνα, 3 αναλύσεις τηλεόρασης, καθώς και προσαρμοσμένες αναλύσεις. Προσθέστε εδώ έναν ξεχωριστό διακόπτη για κατακόρυφη και οριζόντια λειτουργία, καθώς και μια επιλογή εμφάνισης κύλισης. Μπορείτε επίσης να μοιραστείτε έναν σύνδεσμο προς τη δοκιμή χρησιμοποιώντας ένα κουμπί.

Για κάθε συσκευή, το μέγεθος της οθόνης σε px υποδεικνύεται στο μενού, καθώς και στα δεξιά πάνω γωνίαΕμφανίζεται το πραγματικό μέγεθος του παραθύρου του προγράμματος περιήγησής σας.

Όλα τα παραπάνω πλεονεκτήματα μας επιτρέπουν να διεκδικήσουμε ηγετικό ρόλο, αν όχι για ένα πράγμα (απόσπασμα από τον προγραμματιστή): «Το Screenfly μπορεί να χρησιμοποιήσει έναν διακομιστή μεσολάβησης για να μιμηθεί συσκευές κατά την προβολή του ιστότοπού σας. Ο διακομιστής μεσολάβησης μιμείται τη συμβολοσειρά του παράγοντα χρήστη, αλλά όχι τη συμπεριφορά αυτών των συσκευών." Το Screenfly είναι η μόνη υπηρεσία στη λίστα που επιτρέπει τη δοκιμή με βάση τη συμβολοσειρά του παράγοντα χρήστη.

Χρησιμοποιείτε τα εργαλεία που παρουσιάζονται στην πρακτική σας; Μοιραστείτε τα μυστικά σας για την ανάπτυξη ιστοσελίδων με απόκριση στα σχόλια.

P.S. Αναφέρετε τυχόν σφάλματα σχετικά με τη μετάφραση μέσω PM.

Όλο και περισσότερες συσκευές είναι διαθέσιμες στους καταναλωτές, οι άνθρωποι έχουν πιο συχνά πρόσβαση στο Διαδίκτυο από tablet και smartphone. Οι μηχανές αναζήτησης δίνουν προσοχή σε ιστότοπους που είναι «φιλικοί» με διαφορετικές αναλύσεις οθόνης, και όχι μόνο σε επιτραπέζιους υπολογιστές. Ένα σχέδιο που εμφανίζεται σωστά σε οποιαδήποτε συσκευή θεωρείται ότι ανταποκρίνεται.

Τον Οκτώβριο του 2016, η Google ανακοίνωσε αλλαγές στα αποτελέσματα αναζήτησης. Προηγουμένως, επισημάνθηκαν οι αποκριτικοί ιστότοποι ξεχωριστό εικονίδιοστα αποτελέσματα αναζήτησης ως φιλικά προς κινητά. Τους επόμενους μήνες θα ξεκινήσει ο διαχωρισμός κινητών (smartphone, tablet) και desktop (από υπολογιστές και φορητούς υπολογιστές). αποτελέσματα αναζήτησης. Επομένως, εάν ένα σημαντικό μέρος του κοινού σας χρησιμοποιεί κινητές συσκευές, κινδυνεύετε να χάσετε κάποιες κυκλοφορία αναζήτησης, εάν ο σχεδιασμός του ιστότοπου δεν είναι κατάλληλος για smartphone και tablet.

Γιατί να ελέγξετε πώς φαίνεται ένας ιστότοπος σε κινητές συσκευές;

Το 2015, η TNS Web Index πραγματοποίησε μια μελέτη προσανατολισμού. Έρευνα σε 60 χιλιάδες Ρώσους ηλικίας από 12 έως 64 ετών και διαπίστωσαν ότι το 64% των χρηστών του Διαδικτύου έχουν πρόσβαση και από κινητές συσκευές. Το 15% αυτού του αριθμού ανθρώπων κάνει χωρίς υπολογιστές. Και εδώ είναι τα δεδομένα του Yandex.

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

Εικονική φιλοξενία ιστότοπου για δημοφιλές CMS:

Η προσαρμοστικότητα δεν θα είναι περιττή για κανέναν πόρο, επειδή το κοινό των κινητών αυξάνεται και δεν αναμένεται μείωση. Σύμφωνα με την ίδια μελέτη, ορισμένοι χρήστες κάνουν ήδη χωρίς επιτραπέζιους υπολογιστές. ΕΝΑ ρομπότ αναζήτησηςχαμηλώνουν "μη ελαστικούς" ιστότοπους στα αποτελέσματα αναζήτησης. Εξαίρεση: πόροι με χαμηλό μερίδιο επισκεψιμότητας από κινητές συσκευές.

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

Η διάταξη του δεύτερου ιστότοπου θα είναι πολύ πιο ακριβή από την προσαρμογή του παλιού προτύπου.
Διαφορετικές διευθύνσεις του φορητού πόρου και του τυπικού πόρου χωρίζουν την κίνηση σε δύο ροές.
Χρειάζεται περισσότερος χρόνος και χρήμα για την υποστήριξη δύο έργων.

Κάνω έκδοση για κινητάαξίζει τον κόπο όταν η συντριπτική πλειονότητα της επισκεψιμότητας προέρχεται από τηλέφωνα και tablet: εάν εσείς κοινωνικό δίκτυοή πύλη ψυχαγωγίας. Σε άλλες περιπτώσεις - προσαρμοστικός σχεδιασμός.

Πώς να ελέγξετε πώς φαίνεται ένας ιστότοπος σε tablet ή smartphone;

Τα εργαλεία των διαδικτυακών υπηρεσιών Yandex.webmaster και Google περιλαμβάνουν ειδικές βοηθητικές υπηρεσίες, που αναλύουν τον ιστότοπο και υποδεικνύουν πού να αναζητήσετε προβλήματα.

Μπορείτε να δείτε με τα μάτια σας πώς αναζητά ο ιστότοπος για κατόχους κινητών συσκευών σε όλα δημοφιλή προγράμματα περιήγησης. Για Προβολή Firefoxκαλείται από τη συντόμευση πληκτρολογίου Ctrl+Shift+M.

ΣΕ Google ChromeΓια προβολή, πατήστε F12. Τεντώνουμε το παράθυρο με το ποντίκι ή ορίζουμε την επιθυμητή ανάλυση με αριθμούς.

Αν ψάχνετε για φιλοξενία για ένα ορισμένο σύστημαδιαχείριση περιεχομένου - ρίξτε μια ματιά στη σελίδα μας.

Διαδικτυακές υπηρεσίες για τον έλεγχο της εμφάνισης ενός ιστότοπου σε διαφορετικές αναλύσεις.

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

Κινητό - 320x480px;
Tablet - 768x1024px;
Φορητός υπολογιστής - 1280x802px;
PC - 1600x992px.

Σε σύγκριση με την πρώτη υπηρεσία, η λειτουργικότητα είναι καλύτερη. Εμφανίζει δικαιώματα:

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

Βεβαιωθείτε ότι παρακολουθείτε από κινητό τηλέφωνο, σε διαφορετικές εκδόσεις Android.

Παρόμοιες υπηρεσίεςαπλά μια απομίμηση. Συμβαίνει ότι δεν υπάρχουν προβλήματα σχεδιασμού σε αυτά, αλλά επάνω συσκευή androidπλωτήρες διάταξης. Οι μετρήσεις γραμματοσειράς, τα μεγέθη κουμπιών, η εμφάνιση ορισμένων ετικετών css\html είναι συγκεκριμένα για διαφορετικά λειτουργικά συστήματα και προγράμματα περιήγησης.

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

Αλλά όχι πάντα στο χέρι απαραίτητα εργαλεία- δεν δίνεται σε όλους στη δουλειά ένα iPad, iPhone και μερικές συσκευές Android. Δεν χρειάζεται να ψάξετε τα πάντα πιθανές επιλογές, αλλά είναι καλύτερο να ελέγχετε τουλάχιστον τις συσκευές από τις οποίες σας επισκέπτονται συχνότερα.

Αν δεν υπάρχουν, ρωτήστε έναν φίλο για το απαιτούμενο μοντέλο ή δοκιμάστε το στο πλησιέστερο κατάστημα. Διαφορετικά, κινδυνεύετε να χάσετε ένα σημαντικό μέρος της επισκεψιμότητάς σας. Λαμβάνουμε πληροφορίες για το κοινό του ιστότοπου, τις πιο δημοφιλείς αναλύσεις και λειτουργικά συστήματα χρησιμοποιώντας τα ίδια Yandex.metrics.

Ο ρυθμός χρήσης του προγράμματος περιήγησης για κινητά αυξάνεται καθημερινά. Σύμφωνα με στατιστικά στοιχεία, περίπου το 32% της κίνησης στο Διαδίκτυο προέρχεται από κινητά τηλέφωνα και υπολογιστές tablet. Αυτό σημαίνει επίσης αυξημένες προσδοκίες των καταναλωτών για ιστότοπους για κινητές συσκευές.

Πλοήγηση άρθρου:

Η δοκιμή ενός ιστότοπου πριν από την κυκλοφορία είναι εξαιρετικά σημαντική απαραίτητο βήμαλόγω της τεράστιας ποικιλίας κινητών συσκευών που έχουν στη διάθεση των καταναλωτών. Και ακόμη και η χρήση μιας τόσο ευέλικτης μεθοδολογίας δεν εξαλείφει αυτή την ανάγκη. Οι φορητές συσκευές αντικαθιστούν σταδιακά τους επιτραπέζιους υπολογιστές - δείτε το παρακάτω γράφημα, δείτε πόσο αυξήθηκε η επισκεψιμότητα από κινητές συσκευές τα τελευταία 2 χρόνια;

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

1. Δοκιμές σε πραγματικές φορητές συσκευές

Είναι καλύτερο να δοκιμάσετε τον ιστότοπο σε πραγματικές συσκευές, καθώς πολλές από τις αποχρώσεις της αλληλεπίδρασης δεν μπορούν να εξομοιωθούν. Η εμπειρία χρήστη (UX) επηρεάζεται από μια ολόκληρη σειράπαράγοντες: ασταθής σύνδεση δικτύου, πυκνότητα εικονοστοιχείων, σχετικό μέγεθος ενεργών στοιχείων στη σελίδα και πραγματικός χρόνοςφόρτωση σελίδας. Στην ιδανική περίπτωση, ο ιστότοπος θα πρέπει να δοκιμάζεται σε όλες τις κινητές συσκευές.

Φυσικά, πλήρης δοκιμήπρακτικά ανέφικτο γιατί απαιτεί πολύ χρόνο και πόρους. Η βέλτιστη λύση θα ήταν η αγορά πολλών φορητών συσκευών για το λεγόμενο κιτ δοκιμής, το οποίο είναι ιδιαίτερα σημαντικό για επιχειρήσεις που προσανατολίζονται στον πελάτη. Το σετ δοκιμής αποτελείται συνήθως από τις πιο δημοφιλείς συσκευές που χρησιμοποιούνται για περιήγηση στο web. Αυτή η προσέγγιση σάς επιτρέπει να διεξάγετε φυσικές δοκιμές σε πραγματικές συνθήκες και να βλέπετε τον ιστότοπο μέσα από τα μάτια του χρήστη. Εάν η αγορά κινητών τηλεφώνων για κιτ δοκιμής δεν ταιριάζει στον προϋπολογισμό του έργου, χρησιμοποιήστε το δικό του smartphone. Πιθανότατα, το smartphone σας θα λειτουργεί σε iOS, κάτι που θα σας δώσει τουλάχιστον μια ιδέα για το πώς βλέπουν οι περισσότεροι χρήστες τον αναλυόμενο ιστότοπο. Μάθετε ποιες κινητές συσκευές διαθέτουν οι συγγενείς, οι συνάδελφοι και οι φίλοι σας, ώστε να μπορείτε να ελέγξετε τον ιστότοπο και σε άλλες συσκευές.

2. Χρήση προσομοιωτή iOS και εξομοιωτή Android

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

Ο προσομοιωτής iOS, που παρέχεται στο Xcode IDE, προσομοιώνει την εμφάνιση ενός ιστότοπου σε iPhone και iPad

Ο προσομοιωτής iOS περιλαμβάνεται στο ενσωματωμένο περιβάλλον ανάπτυξης λογισμικού Xcode. Πρώτα εγκαταστήστε το Xcode από την πλατφόρμα App Store. Μεταβείτε στο μενού Xcode και επιλέξτε Xcode > Open Developer Tool > iOS Simulator. Δυστυχώς, το εργαλείο είναι συμβατό μόνο με Mac OS, έτσι χρήστες Windowsή το Linux θα πρέπει να ψάξει για άλλη επιλογή.

Ο εξομοιωτής Android συνοδεύεται από το περιβάλλον ανάπτυξης εφαρμογών Android SDK. Αναλυτικές πληροφορίεςγια Εξομοιωτής Androidπου βρίσκεται.

3. Δοκιμή προγράμματος περιήγησης

Εάν δεν μπορείτε να συναρμολογήσετε ένα κιτ δοκιμής ή να κατανοήσετε το λογισμικό Εξομοιωτές iOSκαι Android, μπορείτε να χρησιμοποιήσετε άλλες μεθόδους.

Η διαδικτυακή υπηρεσία BrowserStack προσομοιώνει επιτραπέζιους και κινητές συσκευές για τη δοκιμή ιστότοπων είναι ένα βολικό διαδικτυακό εργαλείο για τη δοκιμή ιστότοπων σε διαφορετικές συσκευές και σε διαφορετικά προγράμματα περιήγησης.

4. Υπηρεσία ανταποκριτή

Η δοκιμή του ιστότοπου θα πρέπει να πραγματοποιείται σε πραγματικές κινητές συσκευές ή χρησιμοποιώντας εξομοιωτές υψηλής ποιότητας. Εάν για οποιονδήποτε λόγο οι καθορισμένες μέθοδοι δεν μπορούν να εφαρμοστούν, ο webmaster αντιμετωπίζει τεράστιο ποσόάλλες επιλογές, καθώς η δοκιμή ουσιαστικά καταλήγει στην απλή αλλαγή μεγέθους του παραθύρου του προγράμματος περιήγησης. Πολλά έξυπνα εργαλεία έχουν αναπτυχθεί για την επίλυση αυτού του προβλήματος, αλλά το Responsinator θεωρείται το πιο αποτελεσματικό.

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

Μεταβείτε στον ιστότοπο και εισαγάγετε τη διεύθυνση URL του ιστότοπου που αναλύεται. Η υπηρεσία θα εμφανίσει τον ιστότοπό σας όπως θα φαινόταν σε δημοφιλείς συσκευές σε διαφορετικές αναλύσεις οθόνης. Το εργαλείο μπορεί να είναι χρήσιμο για έναν γρήγορο έλεγχο επιφάνειας. Ωστόσο, δεν είναι σε θέση να αντικαταστήσει την πλήρη δοκιμή σε πραγματικές συσκευές, ακόμη και την εξομοίωση λογισμικού, καθώς το εργαλείο λειτουργεί σε μηχανή γραφικών ενεργό πρόγραμμα περιήγησης. Με άλλα λόγια, η υπηρεσία δεν περιλαμβάνει μηχανές προγράμματος περιήγησης για κινητά για εμφάνιση τοποθεσιών. Στην πραγματικότητα, το αποτέλεσμα είναι ακριβώς το ίδιο με αυτό της μη αυτόματης αλλαγής μεγέθους του παραθύρου του προγράμματος περιήγησης.

5. Αλλάξτε το μέγεθος του παραθύρου του προγράμματος περιήγησης

Όταν εργάζονται σε έναν ιστότοπο σε έναν επιτραπέζιο υπολογιστή, οι σχεδιαστές και οι προγραμματιστές δοκιμάζουν συχνά τη συμπεριφορά των αποκριτικών στοιχείων σχεδίασης αλλάζοντας τα μεγέθη των παραθύρων του προγράμματος περιήγησης. Αυτή η ενέργεια είναι τόσο στοιχειώδης που η γλώσσα δεν τολμά να την ονομάσει «δοκιμή», αλλά δεν έχει νόημα να την αρνηθεί κανείς. Ενώ εργάζεστε σε αποσπάσματα κώδικα που σχετίζονται με τον αποκριτικό σχεδιασμό, γρήγορος έλεγχοςΟ τύπος "switched - looked - switched back" βοηθά στην αξιολόγηση αλλαγές που έγιναν. Ωστόσο, αυτή η τεχνική δεν μπορεί καν να συγκριθεί με άλλες μεθόδους δοκιμής: σφάλματα μεγέθους, διαφορετικούς κινητήρες γραφικών, έλλειψη καθυστέρησης σήματος δικτύου, κ.λπ. Αυτή η μέθοδος έχει πάρα πολλά μειονεκτήματα για να είναι ισοδύναμη αντικατάσταση άλλων επιλογών δοκιμών.

Πώς πραγματοποιείτε τις δοκιμές;

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

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

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

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

Η πρώτη θέση μπορεί να πάρει - πολύ καλή εξυπηρέτησηγια διαδικτυακή δοκιμή μιας ιστοσελίδας σε διάφορες αναλύσεις που είναι σαφής και ελκυστική διεπαφή χρήστη. Στον ιστότοπο θα βρείτε διάφορες επιλογές ανάλυσης οθόνης, όπως επιτραπέζιους υπολογιστές, netbook, φορητούς υπολογιστές, tablet, τηλεοράσεις.

Μπορείτε να επιλέξετε απευθείας το όνομα της συσκευής εάν δεν γνωρίζετε την ακριβή της ανάλυση. Έτσι, μπορείτε να επιλέξετε Kindle, Google, Samsung, Motorola, Apple από την αναπτυσσόμενη λίστα και να ελέγξετε τη διάταξη της σελίδας στην αντίστοιχη ανάλυση.

Επιπλέον, το Screenfly σας επιτρέπει να εγκαταστήσετε προσαρμοσμένο μέγεθοςοθόνη σε pixel και σας επιτρέπει να το εφαρμόσετε στη σελίδα σας. Με αυτόν τον τρόπο μπορείτε εύκολα να ελέγξετε ιστοσελίδες σε σχεδόν οποιαδήποτε ανάλυση.

Επιπλέον, μπορείτε να περιστρέψετε την οθόνη, να ενεργοποιήσετε ή να απενεργοποιήσετε την κύλιση ιστοσελίδας ή να χρησιμοποιήσετε έναν διακομιστή μεσολάβησης για να δοκιμάσετε την ιστοσελίδα.

Άλλα δωρεάν διαδικτυακός πόρος, όπου μπορείτε εύκολα να ελέγξετε τον ιστότοπο σε διαφορετικές αναλύσεις. Στην ιστοσελίδα θα βρείτε καλό εύροςσυσκευή από επιτραπέζιος υπολογιστής, φορητό υπολογιστή, tablet σε smartphone. Επιπλέον, σας επιτρέπει επίσης να εισάγετε χειροκίνητα την ανάλυση και να ελέγχετε τις διατάξεις σελίδων.

Υπάρχει επίσης μια επιλογή "στο πρόγραμμα περιήγησης" που αφήνει χώρο για περιγράμματα και στοιχεία ελέγχου του προγράμματος περιήγησης, καθώς και τη γραμμή εργασιών στο παράθυρο προεπισκόπησης.

Ακολουθεί ένα άλλο δωρεάν εργαλείο, το οποίο σας επιτρέπει να δοκιμάσετε τον ιστότοπο σε διαφορετικές αναλύσεις. Μπορείτε να επιλέξετε από τις προτεινόμενες επιλογές ανάλυσης ή να εισαγάγετε τις δικές σας διαστάσεις για τον ιστότοπο.

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

ανιχνεύει επίσης την τρέχουσα ανάλυση της οθόνης σας και την εμφανίζει για αναφορά.

Ένα άλλο εργαλείο ιστού που σας επιτρέπει να δοκιμάσετε σελίδες ιστότοπου διάφορα μεγέθη. Ο ιστότοπος λειτουργεί καλύτερα με Internet Explorerκαι εμφανίζει ιστοσελίδες στην επιλεγμένη ανάλυση. Ωστόσο, ο κατάλογος των αδειών είναι πολύ περιορισμένος. Αυτό σημαίνει ότι μπορείτε να ελέγξετε ιστοσελίδες μόνο σε 8 αναλύσεις, συμπεριλαμβανομένων των 800×600, 1024×768, 1280×960, 1440×900, 1600×1200, 1680×1050 και 1920×1200.

Δεν έχει τόσες πολλές επιλογές όπως άλλες παρόμοιες ιστοσελίδες, αλλά αξίζει να το δοκιμάσετε.

Καλημέρα σε όλους, αγαπητοί μου φίλοι και καλεσμένοι του blog μου. Θυμάμαι ότι μόλις πριν από τρία χρόνια δεν είχα ακούσει ποτέ για μια τέτοια έννοια όπως προσαρμοστική διάταξη ή κινητό...

Πλαίσια, όπως ή, τα οποία διευκολύνουν και επιταχύνουν σημαντικά τη διάταξη της σελίδας.
συνεπάγεται εξαιρετική εμφάνιση μιας ιστοσελίδας σε όλες τις συσκευές και τις επεκτάσεις οθόνης. Μάλλον δεν έχει κάθε σχεδιαστής διάταξης πλήρες σετσυσκευές με όλους πιθανές επεκτάσειςεμφανίζει, για δοκιμάζοντας τη διάταξή σας. Αυτό δεν προκαλεί έκπληξη, επειδή η τεχνολογία δεν είναι φθηνή στις μέρες μας.
Ετσι. Η αγορά ορεινών κινητών τηλεφώνων και tablet δεν είναι επιλογή - θα πάμε σπασμένα. Τι να κάνουμε; Για αυτές τις εργασίες αναπτύχθηκαν υπηρεσίες για τη δοκιμή προσαρμοστικών ιστοσελίδων. Η αρχή της λειτουργίας τους είναι πολύ απλή. Τις περισσότερες φορές υπάρχει ένα πλαίσιο συγκεκριμένου μεγέθους όπου ανοίγει η σελίδα. Το αποτέλεσμα είναι περίπου το ίδιο με αυτό κατά την προβολή σε φορητή συσκευή. Θα ήθελα να σημειώσω ότι η υπηρεσία δεν θα εμφανίζει πάντα με ακρίβεια την εμφάνιση της σελίδας σε τηλέφωνο ή tablet. Κατά την κωδικοποίηση, θα πρέπει να κάνετε δοκιμή χρησιμοποιώντας υπηρεσίες, αλλά μετά την ολοκλήρωση, εάν είναι δυνατόν, δοκιμάστε τις πιο κοινές συσκευές.
Ετσι. Για την προσοχή σας καλύτερα εργαλεία για τη δοκιμή ιστοσελίδων με απόκριση.

Ένα εργαλείο για τη δοκιμή αποκριτικών ιστοσελίδων από την Adobe. Για να το χρησιμοποιήσετε πρέπει να το εγκαταστήσετε στον υπολογιστή σας.
Το πρόγραμμα σάς επιτρέπει να συγχρονίζετε τις συσκευές σας μέσω WIFI και να βλέπετε τον ιστότοπο όπως θα εμφανίζεται στη συσκευή σας. Επί αυτή τη στιγμήΥποστηρίζονται συσκευές με τα ακόλουθα λειτουργικά συστήματα: iOS, Android, Kindle Fire.

Οι μηχανές αναζήτησης λαμβάνουν υπόψη παράγοντες συμπεριφοράςτόσο στην έκδοση για υπολογιστές όσο και σε κινητές συσκευές, επομένως είναι απαραίτητο να λαμβάνεται υπόψη αυτό το γεγονός κατά την ανάπτυξη ενός ιστότοπου (ή κατά τον επανασχεδιασμό του).

Νωρίτερα μίλησα για τις επιλογές υλοποίησης που υπάρχουν. Σε αυτό το άρθρο θα μιλήσω για τα εργαλεία και τις υπηρεσίες που χρησιμοποιώ στην εργασία μου για να ελέγξω τη διάταξη του ιστότοπου.

Όλες οι επιλογές που περιέγραψα είναι δωρεάν και επομένως διαθέσιμες σε όλους. Χρησιμοποιήστε τα για να κάνετε τον ιστότοπό σας να φαίνεται πιο προσεγμένος.

1. Εργαλείο απόκρισης Viewport Resizer

Η χρήση του είναι αρκετά απλή - πρέπει να εισαγάγετε έναν σύνδεσμο προς τον ιστότοπο που δοκιμάζετε στο μοναδικό πεδίο στη σελίδα υπηρεσίας και να βρείτε σφάλματα διάταξης.

Το σύνολο των αναλύσεων είναι μικρό (από 240 px (αναρωτιέμαι αν κάποιος άλλος έχει τηλέφωνο με τέτοια οθόνη και πρόσβαση στο Διαδίκτυο; :)) έως 1024 px), αλλά το εργαλείο είναι κατάλληλο για γρήγορη δοκιμή μιας σελίδας. Η υπηρεσία μπορεί να χρησιμοποιηθεί, για παράδειγμα, όταν είστε σίγουροι για τη σωστή διάταξη του ιστότοπου, αλλά μερικές ξεχωριστή σελίδαγεμίζεις με το άτομο με το οποίο συνεργάζεσαι για πρώτη φορά. Είναι λογικό να θέλετε να βεβαιωθείτε ότι η σελίδα εμφανίζεται σωστά σε όλες τις συσκευές. Το εργαλείο του Matt Kearsley θα σας επιτρέψει να το κάνετε αυτό.

Το σύνολο των εξομοιούμενων συσκευών είναι μικρό και δεν έχει ενημερωθεί για μεγάλο χρονικό διάστημα. Η λίστα περιλαμβάνει iPhone 3 έως 6, ένα ζευγάρι μοντέλα Samsung, BlackBerry, LG.

Στην υπηρεσία πρέπει να καθορίσετε:
— διεύθυνση της σελίδας που ελέγχεται·
— προσανατολισμός (κάθετος ή οριζόντιος (κατακόρυφος/οριζόντιος):
— μέγεθος τερματικού (υπάρχουν δύο επιλογές: "μέγεθος οθόνης" (ανάλογα με την ανάλυση της οθόνης σας από την οποία ελέγχετε τη διάταξη) ή " πραγματικό μέγεθος"συσκευή που προσομοιάζετε (για παράδειγμα, BlackBerry)).

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

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

Υπάρχει πιθανότητα οι συσκευές να εντοπίζονται από σενάρια κατά την εκκίνηση, οπότε απλή αλλαγήτο πλάτος δεν θα είναι αρκετό. Πρέπει να ανανεώσετε τη σελίδα και να δείτε τη διάταξη, ενώ συρρικνώνετε το παράθυρο του προγράμματος περιήγησης σε πλάτος.

Θα σημειώσω επίσης ότι η λανθασμένη διάταξη σε μία από αυτές τις υπηρεσίες δεν σημαίνει πάντα ότι ο ιστότοπός σας έχει πρόβλημα με την εμφάνιση σε μια πραγματική συσκευή. Επομένως, πρέπει να ελέγξετε τον ιστότοπο με διάφορους τρόπους και σε όλες τις διαθέσιμες πραγματικές συσκευές.

Όταν αποδέχεστε την εργασία ενός σχεδιαστή διάταξης, χρησιμοποιήστε τουλάχιστον 1-2 εργαλεία από τη λίστα. Σε αυτήν την περίπτωση, όλοι θα είναι ευχαριστημένοι με τον ιστότοπό σας: εσείς, οι πελάτες σας και οι μηχανές αναζήτησης.

Χαιρετισμούς, περιστασιακούς επισκέπτες και τακτικούς αναγνώστες του ιστότοπου του ιστολογίου!

Κατά τη διάρκεια της ύπαρξης αυτού του ιστότοπου, άλλαξα το πρότυπο αρκετές φορές και δημιούργησα ακόμη και το δικό μου από την αρχή.
Μία από τις κύριες εργασίες κατά την επιλογή ενός νέου προτύπου είναι η προσαρμοστική διάταξη του ιστότοπου για όλες τις αναλύσεις οθόνης.

Σύντομη περιγραφή του άρθρου:

Σε προηγούμενο άρθρο έγραψα ήδη γιατί χρειάζεται. Πώς όμως να επιτευχθεί αυτή ακριβώς η προσαρμοστικότητα;

Για αυτό υπάρχει διαφορετικούς τρόπους. Κάποιοι χρησιμοποιούν javascript, άλλοι χρησιμοποιούν κάτι άλλο. Πιστεύω όμως ότι το πιο απλό και τον σωστό τρόποείναι προσαρμοστικό χρησιμοποιώντας CSS.

Πώς να φτιάξετε μια responsive διάταξη ιστότοπου

Πρώτα, εάν σκοπεύετε να δημιουργήσετε μια αποκριτική σχεδίαση ιστότοπου, μεταξύ των ετικετών επικολλήστε τον παρακάτω κώδικα:

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

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

Πώς έτσι; Άρχισα να ελέγχω ξανά όλα τα στυλ για να δω αν είχα γράψει σωστά τις τάξεις και τελικά έφτασα στο σημείο όπου έλεγξα το πλάτος του παραθύρου του προγράμματος περιήγησης σε px χρησιμοποιώντας javascript. σοκαρίστηκα. Κατά τον έλεγχο σε φορητό υπολογιστή, έλαβα ένα αποτέλεσμα 1024 εικονοστοιχείων και είχα περίπου το ίδιο αποτέλεσμα όταν άνοιξα τον ιστότοπο σε ένα smartphone!

Αλλά αυτό δεν μπορεί να είναι!

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

Λόγω της βλακείας και της ανικανότητάς μου, έχασα πολύ χρόνο. Αλλά τώρα το θυμάμαι για πάντα))).

Ερωτήματα μέσων CSS προσαρμοστικής διάταξης

Για να το κάνετε να ανταποκρίνεται χρησιμοποιώντας CSS, πρέπει να το χρησιμοποιήσετε ερωτήματα μέσων.

Πώς είναι αυτό; Ναι, πολύ απλό. ΣΕ αρχείο CSSπρέπει να γράψετε ερωτήματα όπως:

Οθόνη @media και (ελάχ. πλάτος: 1440 εικονοστοιχεία) και (μέγιστο πλάτος: 1599 εικονοστοιχεία)( )

Αυτός ο κώδικας σημαίνει ότι τα στυλ που περικλείονται μεταξύ του "( )" θα λειτουργούν για οθόνες με ελάχιστο πλάτος 1440 pixel και μέγιστο 1599 px.

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

Οι πιο σημαντικές αναλύσεις οθόνης για προσαρμοστική διάταξη

320 εικονοστοιχεία- Κινητές συσκευές (κατακόρυφος προσανατολισμός).
480 εικονοστοιχεία- Κινητές συσκευές (οριζόντιος προσανατολισμός).
600 px- Μικρά δισκία
768 εικονοστοιχεία- Tablets (κατακόρυφος προσανατολισμός).
1024 εικονοστοιχεία- Tablets (οριζόντιος προσανατολισμός)/Netbooks.
1280 px ή περισσότερο- Η/Υ.

Είναι αυτές οι άδειες που πρέπει να τονιστούν και να δοθούν ιδιαίτερη προσοχήμε προσαρμοστική διάταξη. Αυτοί είναι οι πιο συνηθισμένοι τύποι αναλύσεων οθόνης.

Bootstrap με απόκριση σχεδιασμού

Πολύ βολικό στη χρήση για δημιουργία προσαρμοστική διάταξη bootstrap. Η ευκολία είναι ότι όλα τα στυλ για την προσαρμογή μπλοκ, κουμπιών, πινάκων κ.λπ. είναι ήδη εγγεγραμμένοι στο bootstpap. Απλώς πρέπει να υπολογίσετε ποια κλάση να αντιστοιχίσετε σε ποιο στοιχείο.

Για να ξεκινήσετε, κατεβάστε την πιο πρόσφατη έκδοση του bootstrap και συνδέστε την στον ιστότοπό σας. Λάβετε υπόψη ότι η σύνδεση στυλ και σεναρίων με το WordPress έχει τα δικά της χαρακτηριστικά.

Η διάταξη στο bootstrap διαφέρει στο ότι το πλάτος του μπλοκ ή της οθόνης διαιρείται με το 12 ίσα μέρη. Και αναθέτοντας μια συγκεκριμένη κλάση σε ένα μπλοκ, μπορείτε να ορίσετε το πλάτος του μπλοκ ίσο με τον απαιτούμενο αριθμό τμημάτων.

Για παράδειγμα, αυτός ο σχεδιασμός θα σας επιτρέψει να διαθέσετε ένα ευρύ μπλοκ για περιεχόμενο πλάτους 8 τμημάτων και ένα στενό μπλοκ για μια πλαϊνή γραμμή πλάτους 4 μερών:

Το πλάτος των μπλοκ θα υπολογιστεί αυτόματα ανάλογα με το πλάτος της οθόνης. Και όταν προβάλλονται σε κινητή συσκευή, αυτά τα μπλοκ θα μετακινηθούν το ένα κάτω από το άλλο.

Μπορείτε επίσης να προσαρμόσετε την απόσταση του μπλοκ από την άκρη, ξανά κατά απαιτούμενη ποσότηταεξαρτήματα. Για παράδειγμα αυτό το σχέδιο:

Θα δημιουργηθεί ένα μπλοκ πλάτους 10 τμημάτων με αριστερή εσοχή 1 μέρους της οθόνης.

Αν το κοιτάξετε, η εργασία με το bootstrap κάνει τη δουλειά πολύ γρήγορη. Επιπλέον, αυτά τα στυλ σίγουρα λειτουργούν σωστά και δεν θα υπάρχει τίποτα στραβό στον ιστότοπο.

Στο μέλλον σκοπεύω να δημοσιεύσω αρκετά μαθήματα για την εργασία με το bootsrap. Επομένως, σας συμβουλεύω να μην χάσετε αυτή τη στιγμή.

Έλεγχος προσαρμοστικότητας ιστότοπου

Αλλά τίθεται το ερώτημα: πώς να ελέγξετε την προσαρμοστικότητα του ιστότοπου; Τώρα έχετε γράψει ερωτήματα πολυμέσων σε CSS, συνδέσατε το bootstrap και χρησιμοποιήσατε τις απαραίτητες κλάσεις. Πώς μπορείτε να ελέγξετε ότι ο ιστότοπος προσαρμόζεται σωστά σε όλες τις αναλύσεις οθόνης;

Πολύ ακριβές και το πιο σημαντικό δωρεάν υπηρεσία, το οποίο αξίζει σεβασμό και ευγνωμοσύνη από τους webmasters και τους σχεδιαστές διάταξης που ασχολούνται με την προσαρμοστική διάταξη ιστότοπου.

Λοιπόν, πώς σας φαίνεται το άρθρο; Είναι όλα ξεκάθαρα; Αν όχι, γράψτε στα σχόλια, θα το καταλάβουμε μαζί.

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

Ο σκοπός των κινήσεών σας είναι να μιμηθείτε τις οθόνες διαφόρων συσκευών.

Σε ένα εταιρικό περιβάλλον, έχετε συχνά μια ποικιλία από gadget που παρέχονται από την εταιρεία για δοκιμή. Στη δουλειά μου, έχω στη διάθεσή μου ένα iPad, iPod, άλλα tablet, φορητούς υπολογιστές και επιτραπέζιους υπολογιστές. Εάν δεν έχετε αυτή την πολυτέλεια, πρέπει να χρησιμοποιήσετε αυτό που έχετε στη διάθεσή σας.

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