Grundlagen der Webtechnologien
Was ist der Hauptzweck, auf einer Seite mit Responsive Design, die auch Smartphones unterstützt, <meta name="viewport" content="width=device-width, initial-scale=1"> in <head> zu schreiben?
- ADie Breite, mit der die Seite angeordnet wird, an die Bildschirmbreite des Geräts anzupassen und die Seite ohne Verkleinerung anzuzeigen
- BDen Server Bilder automatisch passend zur Bildschirmauflösung des Geräts neu erzeugen zu lassen
- CDie Seite nur in PC-Browsern anzuzeigen und Zugriffe von Smartphones abzuweisen
Antwort und Erläuterung anzeigen
Antwort: A. Die Breite, mit der die Seite angeordnet wird, an die Bildschirmbreite des Geräts anzupassen und die Seite ohne Verkleinerung anzuzeigen
Ohne diese Angabe ordnet ein Smartphone-Browser die Seite mit einer großen Breite an, die von einer für PCs gestalteten Seite ausgeht (im Allgemeinen etwa 980px), und verkleinert sie dann, bis sie auf den Bildschirm passt. width=device-width passt die Layoutbreite an die Bildschirmbreite des Geräts an, und initial-scale=1 setzt den anfänglichen Zoom auf Originalgröße. Darauf aufbauend schalten CSS-Media-Queries (zum Beispiel @media (max-width: 600px)) Anordnung und Schriftgröße je nach Bildschirmbreite um.