Ασφαλής σχεδιασμός ιστοσελίδας - Πρόσοπτο

What is the viewport?

The viewport (viewport) is the visible area of the user on the web page.

The viewport varies by device, and it will be smaller on mobile phones than on computer screens.

Before tablets and smartphones, web pages were only designed for computer screens, and it was common for web pages to have static designs and fixed sizes.

Then, when we started using the internet on tablets and smartphones, fixed-size web pages were too large to fit the viewport. To solve this problem, browsers on these devices would shrink the entire web page proportionally to fit the screen size.

This is not perfect! It is more of a quick fix.

set the viewport

HTML5 introduces a method that allows web designers to <meta> tags to control the viewport.

You should include the following <meta> Viewport element:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

It provides instructions to the browser on how to control the page size and zoom ratio.

width=device-width Part of the page width is set to follow the screen width of the device (depending on the device).

When the browser first loads the page,initial-scale=1.0 Part of the settings for the initial zoom level.

Below are examples of web pages without viewport meta tags, and web pages with viewport meta tags:

Tip:If you are browsing this page on a mobile phone or tablet, you can click on the two links below to view the differences.



Without viewport meta tag


With viewport meta tag

Adjust the content to the size of the viewport

Users are accustomed to vertically scrolling websites on desktop computers and mobile devices, not horizontally!

Therefore, if forcing users to horizontally scroll or zoom out to view the entire web page, it will result in a poor user experience.

Some additional rules need to be followed:

1. Μην χρησιμοποιείτε στοιχεία με μεγάλο σταθερό πλάτος - Για παράδειγμα, αν το πλάτος της εικόνας είναι μεγαλύτερο από το πλάτος του προσοπίου, μπορεί να προκαλέσει οριζόντια κύλιση του προσοπίου. Βεβαιωθείτε ότι το περιεχόμενο προσαρμόζεται για να ταιριάζει στο πλάτος του προσοπίου.

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

3. Χρήση CSS ερωτήσεων μέσων για διαφορετικά στυλ για μικρές και μεγάλες οθόνες - Η ρύθμιση μεγάλου αμεταβλητού πλάτους για τα στοιχεία της σελίδας μπορεί να προκαλέσει την υπερβολική στενότητα του στοιχείου για μικρότερα συσκευές. Αντίθετα, θα πρέπει να ληφθεί υπόψη η χρήση σχετικών τιμών πλάτους, όπως width: 100%. Επιπλέον, θα πρέπει να είστε προσεκτικοί στη χρήση μεγάλων τιμών αμεταβλητής τοποθέτησης, οι οποίες μπορεί να προκαλέσουν την πτώση του στοιχείου εκτός της οθόνης της μικρής συσκευής.