Was bedeutet dieser HTML-Code?
Also beim Grundgerüst sind irgendwie immer die folgenden Zeilen Code da. Aber was bedeuten sie überhaupt? Ich lösche die immer.
Bitte nur Antworten von Leuten, die auch wissen, was HTML ist.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial scale=1.0">
3 Antworten
Die erste Zeile bezieht sich auf den Internet Explorer
Die Zeile kannst du eigentlich ignorieren da der ja heute kaum eine Rolle spiel
Die zweite Zeile dagegen solltest du auf keinen Fall löschen.
Heutzutage ist die Abzeige auf dem Handy sehr wichtig.
Diese Zeile stellt sie Anzeige quasi auf 100% Display Größe.
Natürlich macht es wenig Sinn nur sie Website für den PC verkleinert auf dem Handy darzustellen
Deshalb gibt es zusätzlich das Responsable Design
Damit wird die Anzeige dynamisch an die Diplayauflösung angepasst
Beispiel auf der PC Seite sind 4 Spalten mit Text und Grafiken.
Dann wären diese auf dem Handy zu klein.
Deshalb stellt man dann auf dem Tablet z b. Nur 2 Spalten nebeneinander und 2 Untereinander dar.
Beim Handy dann nur noch 1 Spalte und 4 Untereinander
Das sind aber alles zusätzliche Einstellungen die Breite und der Scale sollten dennoch mit der 2. ZEILE deines Beispiel eingestellt werden.
Aufkommen kann man danach immer noch mit den Fingern
Nachtrag
https://www.w3schools.com/css/css_rwd_viewport.asp
Hier eine Erklärung
Die erste Zeile ist dazu gedacht, den Internet Explorer dazu zu bringen, beim Rendern / Interpretieren des Dokuments im Standardmodus zu bleiben, statt direkt in den Quirksmodus zu wechseln (was er bei einem invaliden Dokument jedoch nachträglich immer noch machen kann). Da der Internet Explorer bereits seit einigen Jahren von Edge abgelöst wurde, ist diese Zeile redundant.
Die zweite Zeile dient der Bestimmung der Viewport-Breite. Sie legt fest, dass sich die Viewportbreite an der Bildschirmauflösung des Geräts orientiert, auf welchem die Webseite angezeigt wird. Die initiale Skalierung hat den Wert 1, also zoomt der Browser weder hinein noch hinaus.
Bei welchem Grundgerüst? Das würde ich beides nicht in meinen Code schreiben, ist wahrscheinlich nur zur Kompatibilität mit irgendwelchen kaputten Browsern.
Das macht Microsoft vermutlich, weil sein Browser kaputt ist. Das wählt die Version des Browsers aus.
Wer guten Code schreibt, dem ist die Version aber üblicherweise egal, solange sie halbwegs modern ist.
Das zweite meta setzt den viewport auf die Bildschrimgröße. Das ist aber Standard bzw. nicht aufgabe des HTML-Dokuments.
Mein Grundgerüst sähe eher so aus:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
</head>
<body>
</body>
</html>
meins auch ich habe aber im head bereich immer <meta charset-UTF-8> drinne um Umlaute (ä ü ö ß zu aktivieren
Hm, ja, das kann sinnvoll sein. Wobei das eigentlich auch oftmals schlicht schon standardmäßig an ist.
Bei dem Beispiel von Dir fehlen aber einige Grundlegende und wichtige Einstellungen
Stimmt man kan aber nie vorsichtig genug sein
Wenn es keine Angabe im Dokument gibt, holt der Browser sich die Information entweder aus dem Protokoll Header (HTTP hat die Standardkodierung ISO-8859-1, wenn nichts anderes angegeben wird) aus der übertragenen Datei (BOM) oder auch aus den Browsereinstellungen des Nutzers.
Und bei einem Andere User kann es dann ganz anders aussehen
Deshalb nicht auf Default verlassen
Möglich. beim Charset kann man das noch verstehen (da gibt es ja überall auf der Welt ein anderes gefühlt, oder zumindest in den Ländern mit anderen Schriftzeichen macht ein anderes schon Sinn).
Beim Viewport nicht (warum passt der Browser den nicht automatisch an. Wenn ich das in Firefox einmal teste, dann wird die Schrift so klein, dass man die nicht mehr lesen kann, das macht doch keinen Sinn da nicht automatisch anzupassen. Ich meine, deshalb verwende ich doch relative Größen, damit das automatisch geht).
Natürlich verwendest du relative Größen im CSS
Das eine hat mit dem anderen nichts zu tun.
Es geht darum dass das Bild auf die Größe des Bildschirms angepasst wird und nich etwa beim Öffnen ein Teil abgeschnitten ist weil die Styles zu großes Bild erzeugen bzw der Zoom aktiv ist
Wenn bei dir dir Schrift zu klein wird, dann hast du definitiv die falsche Schriftgröße im CSS
Diese Grundeinstellung ist kein ERSATZ für Responsable Design
Naja, aber wenn ich das testweise anmache, dann passt die Schriftgröße und die Größe insgesamt.
Vielleicht macht Firefox im Debug-Modus aber auch komisches Zeugs:
Ohne den Viewport wird das im Debug-Modus einfach nur im ganzen runterskaliert.
Naja, aber wenn ich das testweise anmache, dann passt die Schriftgröße und die Größe insgesamt.
Klar - sollte doch auch so sein
Hm, ja, aber eigentlich sollte es halt standardmäßig schon nicht rauszoomen.
Solange es im CSS3 Standard nicht definiert ist, kann man sich halt nicht verlassen
Aber im HTML5 wurde ja extra diese Einstellung definiert um selbst das Problem lösen zu können
Genauso wie du Language oder Zeichensatz definieren solltest so wie es im HTML5 Standard festgelegt wurde.
Solange es im CSS3 Standard nicht definiert ist, kann man sich halt nicht verlassen
Das ja sowieso nicht, weil zu viele Browser kaputt sind.
Aber ich meine, wäre halt intuitiv, die Seite nicht soweit rauszuzoomen, dass man nichts mehr lesen kann.
Die 2. Zeile sollte man schon immer angeben.
Nein - das hat mit kaputten Browser gar nichts zu tun
Ne, beim einem funktionierenden Browser werden meine Flex-Elemente und meine Größenangaben in "em" automatisch angepasst.
EM hat aber nichts mit dem Zoom zum Beispiel zu tun
Und von Flex war auch erstmal noch gar nicht die Rede
Flex oder besser Grid kommt danach
Und warum stellen Browser den Zoom nicht automatisch auf 1 und den Viewport auf die Bildschirmbreite? Ich meine, gerade bei Handys kann der Viewport oft ja nur genau die Bildschirmbreite sein, da nur ein Fenster offen ist gleichzeitig.
Gute Fraga
Aber das trifft genauso für alle Styles default zu.
Warum sind die bei jedem Browser nicht gleich und genormt
Weil es eben keine Festlegung dafür gibt und jeder Browser etwas anderes machen kann.
Deshalb sehen manche Websites bei verschiedenen Browsern anders aus, wenn man sich auf Default Werte verlässt
Aber das trifft genauso für alle Styles default zu.
Naja, nicht unbedingt. Gibt schon Dinge, die man sinnvoll default machen kann und Dinge, wo das weniger gut geht.
Ein nicht-kaputter Brower sollte den Viewport an das Gerät anpassen. Und die Schriftgröße am besten auch.
Keine Ahnung was du mit Kaputt meinst
Und ja manche defaults funktionieren
Aber müssen nicht bei jedem Browser der Welt gleich sein.
Und können sich bei neueren Versionen ändern.
Deshalb immer mit möglichst vielen Browsern testen und notfalls anpassen.
Und regelmäßig prüfen Ansonsten können Websites mit der Zeit komische Effekte machen die nicht gewollt sind
Ich meine, wenn ich Standardkonform programmiere, warum machen die Browser dnan nicht, dass Zeug standardkonform angezeigt wird?
Wenn du diese Zeile die im HTML5 extra eingefügt wurde weglässt, programierst du ja nicht Standardkonform!
Wobei Programierung eh falsch ist, da HTML5 und CSS3 beides keine Programiersprache sind und keine Programierung ermöglichen
Aber dies nur am Rande
Ansonsten dauert natürlich die Implementierung eines neuen Standards im Browser immer etwas.
Achso, die haben einfach gesagt: "Statt dass die Browser das sinnvoll machen ist es jetzt einfach Standard, dass jeder diese Zeile hinzufügt."
Hm, okay, in der Luftfahrttechnik ist das Gang und Gäbe, also warum nicht ;-)
Es wurde wohl Im HTML5 Standard aufgenommen da jeder Browser andere Ansätze verfolgten
Hm, verstehe. Ich denke ich werde mal durchgehen müssen, was es so für Meta-Tags gibt und die alle bei meiner Website setzen, wenn ich Zeit finde. Ist zwar sowieso nur für Firefox und Chrome gedacht, aber so viel Zeit sollte das nicht kosten.
Aktuell sind es hauptsächlich die beiden
Ändert sich aber mit der Zeit (einfach mal zeitachse ansehen)
Trotzdem aber auch mal bei Apple testen- damit man diesen Markt nicht abhängt
Wenn du eine Erfolgreiche Website haben möchtest, die bei Google auch gut gerankt werden soll, solltest du das nicht tun
Gerade Mobile macht Safari ca 35% der Browser aus
https://gs.statcounter.com/browser-market-share/mobile/germany
Für eine Gewerbliche Website ein zu großer Anteil zum Vernachlässigen und in die Top10 bei Google zu kommen
Ja gut, wenn ich eine gewerbliche ebsite bauen würde, dann würde ich das sowieso überall ausreichend testen, selbst auf Edge und so.
Ok danke für den Tipp es ist nur immer dabei wenn VS Code das Grundgerüst von HTML macht