Diesen verwende ich tendenziell
<meta name="viewport" content="width=device-width">Obwohl ich sehe, dass dieser oft empfohlen wird
<meta name="viewport" content="width=device-width, initial-scale=1">Das bedeutet, dass der Browser die Breite der Seite (wahrscheinlich) auf die Breite seines eigenen Bildschirms rendert. Wenn dieser Bildschirm also 320 Pixel breit ist, ist das Browserfenster 320 Pixel breit, anstatt stark herausgezoomt zu sein und 960 Pixel anzuzeigen (oder was auch immer dieses Gerät standardmäßig tut, anstelle eines responsiven Meta-Tags).
Hinweis: Verwenden Sie keinen responsiven Meta-Tag, wenn Ihre Website nicht speziell für Responsive Design entwickelt wurde und in dieser Größe gut funktioniert, da dies die Benutzererfahrung verschlechtert.
Es gibt weitere Attribute, die dieses Tag unterstützt
| Eigenschaft | Beschreibung |
|---|---|
| width | Die Breite des virtuellen Viewports des Geräts. |
| device-width | Die physische Breite des Bildschirms des Geräts. |
| height | Die Höhe des „virtuellen Viewports“ des Geräts. |
| device-height | Die physische Höhe des Bildschirms des Geräts. |
| initial-scale | Die anfängliche Zoomstufe beim Besuch der Seite. 1.0 bedeutet kein Zoom. |
| minimum-scale | Der minimale Zoomfaktor, den der Besucher auf der Seite einstellen kann. 1.0 bedeutet kein Zoom. |
| maximum-scale | Der maximale Zoomfaktor, den der Besucher auf der Seite einstellen kann. 1.0 bedeutet kein Zoom. |
| user-scalable | Ermöglicht dem Gerät, hinein- und herauszuzoomen. Werte sind ja oder nein. |
Es wird generell empfohlen, das Zoomen nicht zu verhindern, da dies störend ist und potenziell ein Barrierefreiheitsproblem darstellt.
Sie werden dies wahrscheinlich auch in Ihrem CSS haben wollen
@-ms-viewport{
width: device-width;
}Gut zu wissen: Das Ändern des Werts dieses Meta-Tags mit JavaScript funktioniert, die Seite reagiert auf den neuen Wert. Entweder das gesamte Tag löschen und ersetzen oder die `content`-Eigenschaft ändern. Keine super häufige Anforderung, aber es kann vorkommen.
Danke, funktioniert super auf meinem iPad, aber nicht auf meinem iPhone
Es scheint nicht für jeden perfekt zu funktionieren. Ich habe es ausprobiert und es funktioniert gut mit den Handys, aber es gibt Probleme mit dem Samsung Tablet.
Hat jemand bemerkt, dass `user-scalable=no` in Mobile Safari (vielleicht seit dem iOS 10 Update) ignoriert wird? Oder ist es nur mein Gerät (iPhone 5)?
Es wird „iPad“ und „iPhone“ geschrieben.
Sätze beginnen mit einem Großbuchstaben.
Selbst Google hat responsive Websites als Standard übernommen und wird diese Seiten höher und besser ranken. Daher müssen alle Maßnahmen ergriffen werden, damit Ihre Website auf allen Geräten besser gesehen wird.
Meta-Name Viewport funktioniert nicht richtig
Ich habe all diese Meta-Tags auf meiner Website ausprobiert, aber keiner von ihnen hat funktioniert
meta name=”viewport” width=”device-width”
meta name=”viewport” content=”width=device-width, initial-scale=1.0″
meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″
meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”
…
Aber als ich @-ms-viewport{ width: device-width; } zu style.css hinzufügte, funktionierte es, aber die Breite beträgt auf meinem iPhone und Samsung Tab keine 100%. Benutzer müssen immer noch horizontal scrollen.
Meine Hauptinhaltsbreite beträgt 1070px.
Sie müssen einige Codes in das Stylesheet für die verschiedenen Bildschirmgrößen einfügen. damit sich die Seite anpasst, wenn der Benutzer auf einem Tablet oder Handy ist, d. h. „Viewport“
Das mache ich so.
@media screen and (max-width: 768px){
und dann kommen hier die Styles}
wobei „768px“ die Bildschirmgröße ist. Ich mache dasselbe für eine mobile Bildschirmgröße, die etwa 320 Pixel beträgt.
@media screen and (max-width: 320px){
}
Sie müssen die Media Query für jeden Bildschirm schreiben.
Hallo, fügen Sie dies hinzu, um Leerzeichen zu entfernen
Das liegt daran, dass je nach Gerät scale=1 nicht scale=1 ist, sondern scale=1,5…
Also ja, hier ist HTML5-Großartigkeit.
Ich auch, ich frage mich, wie viele Genies nötig sind, um zu einem so dummen Ergebnis zu kommen.
Sie geben Scale 1 an, Sie erhalten 1,5
Es hat mit der DPI/Definition des Geräts zu tun, im Grunde ist 1 Pixel nicht gleich 1 Pixel.
Viel Glück damit.
**Hallo, ich bin verwirrt und brauche Hilfe von Ihnen.
Muss ich den Viewport-Metatag nur für die Indexseite oder für alle Seiten einfügen?
Bitte antworten Sie, ich warte gespannt auf Ihre Antwort?
**
Hallo, ich bin Pramod Kushwah, dynamische Website nur Index und statisch alle Seiten
Ja, Sie müssen sie auf allen Seiten einfügen.
Meine Website skaliert für das iPad Mini nicht herunter. Gibt es eine Möglichkeit, die Skalierung zu ändern, damit das Mini die mobile Version meiner Website sieht?
Enthält dies im Header
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
Und dies im CSS
#featured-content .flex-viewport {max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
#featured-content .loading .flex-viewport { max-height: 300px; }
Vielen Dank für Ihre Hilfe!!
L
iPads identifizieren sich als „Desktop“-Clients. Sie müssen also Ihre Stile dafür deklarieren, wie Sie es in einem @media-Block tun würden.
Es gibt einen Bug bei Viewport-Einheiten unter iOS7 und niedriger. Um ihn zu beheben, verwenden Sie einfach dieses JS
https://github.com/rodneyrehm/viewport-units-buggyfill
Ich möchte meine Webseite auf allen Mobilgeräten zoomen und herauszoomen können, und wenn sie im Internet geöffnet wird, soll sie minimiert aussehen und scrollen. Wie kann ich das machen?
Ich habe eine Frage.
Ich erstelle eine einfache jQuery-Fitness-Website und versuche, einen Startbildschirm mit dem Bild des menschlichen Körpers zu erstellen. Auf diesem Bild habe ich einige Formen mit Links platziert, sodass Sie beim Klicken auf die Arme zur Seite gelangen, auf der Sie Möglichkeiten finden, Ihre Arme zu trainieren usw.
Aber das Problem ist, wenn sich das Gerät ändert, muss sich das Bild mitändern. Was kein Problem ist. Aber die Koordinaten müssen sich mitändern. Leider funktioniert das nicht für mich.
Ich habe versucht, eine Formel mit der Variablen device-width zu erstellen
coords=”device-width/195*20,device-width/195*118,device-width/195*95,device-width/195*246″
195 ist die ursprüngliche Breite des Geräts und 20, 118, 95 und 246 sind die Koordinaten auf dem ursprünglichen Bild. Aber es funktioniert für mich nicht. Gibt es eine Möglichkeit, das möglich zu machen?
Hallo,
Schöner Artikel.
Hier sind ein paar Links, um mehr über Viewport zu erfahren.
https://developer.mozilla.org/en/docs/Mozilla/Viewport_meta_tag
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
http://www.quirksmode.org/mobile/metaviewport/
Versuchen Sie, die Breite als „100 %“ anzugeben, und dann passt sich das Layout an jeden Bildschirm an
Ich hatte einige Probleme mit dem iPad und das, was ich tat, um es zu beheben, war, content=”width=number“ hinzuzufügen. Manchmal kann es besser sein, verschiedene Breitenangaben anstelle von „device-width“ für die Anpassung der Website an den Bildschirm hinzuzufügen. Schauen Sie es sich an, wenn Sie möchten, es ist meine erste Website überhaupt :D http://saitove.bg
Schnelle Frage! Was ist der Unterschied zwischen
name=”viewport” content=”initial-scale=1, maximum-scale=1, user-scalable=0″
und
name=”viewport” content=”width=device-width, initial-scale=1.0″
danke
Danke, das ist wirklich hilfreich..
Ich habe mich gefragt, wie ich meine Website automatisch zoomen kann, wenn ein Benutzer sie über ein Smartphone öffnet.
Vielleicht sind diese beiden die Lösung (beide irgendwo oben im CSS einfügen)
@viewport{ zoom: 1.0; width: extend-to-zoom; }
@-ms-viewport{ width: extend-to-zoom; zoom: 1.0; }
1] Sie sollten entweder `@viewport` oder das Meta-Tag `
Sie sollten nicht beides verwenden, das Meta-Tag wird von der Rendering-Engine in die `@viewport`-Regel übersetzt und überschreibt alles, was Sie dort schreiben würden...
>> `viewport` auf `dev.w3.org-whitepapers`
2] Das `viewport meta-tag` kann komplett weggelassen und stattdessen durch das Senden der Daten in den Headern der Seite ersetzt werden,
Dies kann Ihnen helfen, viel wertvollen Platz auf der Seite zu sparen und Ihre Seiten kleiner (und leserlicher) zu machen...
Tatsächlich können Sie das für alle Meta-Tags auf Ihrer Seite tun (einschließlich der neueren Apple-Tags und og:* Tags..)
Hier ist ein funktionierendes Beispiel (PHP)
Mehr lesen..
Lobenswert!
Nur zur Anmerkung: Die möglichen Werte für ‚user-scalable‘ sind ‚yes‘ oder ‚no‘
Kann mir jemand helfen
Meine Website wurde mit dem alten Frontpage 2002 erstellt
Ich versuche, sie mobilfreundlich zu machen
http://www.besthometheaterpro.com
Vielen Dank im Voraus
Man könnte argumentieren, dass die Platzierung dieser Daten im Header nicht viel einspart, da die Header schließlich über das Netz gesendet werden müssen. Sie in HTML zu platzieren, scheint einfacher zu warten zu sein, als die Header in PHP oder einer anderen serverseitigen Sprache kodieren zu müssen.
Gibt es eine Alternative zu „device-width“? Der Grund, warum ich frage, ist, dass ich möchte, dass diese Bootstrap-Site auf die Containergröße und nicht auf das Fenster reagiert. Die Seite ist in 2 Teile geteilt und wenn ich den Splitter neu positioniere, möchte ich, dass die „Spalten“ reagieren, und derzeit reagiert sie nur, wenn ich das tatsächliche Browserfenster neu positioniere.. :/
Leute, ich bin gerade neu im Webdesign, ich habe Probleme am Anfang des Codierens. Wenn Sie mir helfen können, würde ich das sehr zu schätzen wissen :)
body{
margin:0;
padding:0;
}
#header{
max-width:100%;
height:135px;
background-color:#ebebeb;
}
#headWrapper{
max-width:1200px;
height:85px;
margin:auto;
float:left;
}
.logo{
background-image:url(“img/logo.png”);
float:left;
width:350px;
height:78px;
margin-top:20px;
}
#naviWrapper{
float:left;
max-width:530px;
height:40px;
margin-left:275px;
font-family: ‘Open Sans’, sans-serif;
margin-top:50px;
}
.homeBTN,
.aboutBTN,
.productBTN,
.solutionBTN,
.contactBTN{
float:left;
margin:5 20;
}
Startseite
About us
Produkte
Solutions
Kontaktieren Sie uns
Dies ist meine Codierung, mein Problem steckt im Teil „header div“ und „headWrapper div“. Wenn ich margin-top auf „headWrapper div“ setzen möchte, gehen beide Divs von „header“ und „headWrapper“ zusammen nach unten. Ich möchte, dass nur das innere Div einen Top-Margin hat.
Es gibt keine Eigenschaften `device-width` und `device-height` im responsiven Meta-Tag – sie sind Werte. Sehen Sie sich die Spezifikation an.
Hallo. Es war die Breite eines Elements, das in px angegeben war. Ich habe es in % angegeben und es funktionierte gut. Ich verstehe es immer noch nicht. Ich habe sogar versucht, das gesamte CSS zu entfernen, und das Falsche war immer noch da. Vielleicht war es der Chrome-Benutzeragent.
Hallo. Ich habe einen wirklich seltsamen Bug. Ich benutze das
auf zwei Websites.
Ich habe sogar das HTML validiert und es ist bei beiden in Ordnung. Auf der ersten Website funktioniert es perfekt, aber auf der zweiten Website passiert das
https://dl.dropboxusercontent.com/u/3570799/Screen%20Shot%202015-05-08%20at%201.56.49%20AM.png
Es scheint, als würde die gesamte Website auf 50% Breite skaliert und linksbündig ausgerichtet.
Ich habe das CSS entfernt und es passiert immer noch, also nehme ich an, es lag ein Fehler im HTML vor, aber laut dem W3-Validator gibt es keinen einzigen Fehler.
Wenn ich das Meta-Tag entferne, sehen die Schriftarten zu klein aus. Ich werde es entfernen und versuchen, es mit Media Queries zum Laufen zu bringen, aber ich verstehe es nicht.
Kann ich Media Queries ohne das Meta-Viewport verwenden?
document.ready() {
alert(‘danke!’);
}
Das ist mein Code, aber er funktioniert nicht. Kann mir jemand helfen #sample{
font-size:16px;
font-family:Georgia, “Times New Roman”, Times, serif;
font-weight:400;
color:blue;
}
@media screen only and(max-width:640px){
#sample{
color:#F00;
}
Wie kann ich die anfängliche Skalierung auf die minimale Skalierung einstellen, die von meinem Gerät unterstützt wird? Zum Beispiel hatte mein iPhone eine minimale Skalierung von 0,3, aber die minimale Skalierung des iPads ist 0,8... Daher möchte ich, dass die Webseite die anfängliche Skalierung des Geräts automatisch übernimmt. Gibt es dafür ein Tag? Bitte antworten Sie
Hallo, können wir user-scalable=no, minimum-scale=1.0 und maximum-scale=1.0 hinzufügen?
Hallo, ich möchte das Meta-Tag in index.html verwenden, um das Zoomen zu deaktivieren, damit es für alle HTML-Seiten gilt, aber auf einer bestimmten Seite möchte ich es überschreiben, um das Zoomen zu aktivieren.
Kann mir jemand helfen?
Danke
Hallo Menna, ich verstehe nicht, was Sie meinen. Zuerst sagen Sie, Sie wollen das Zoomen auf allen Seiten deaktivieren, dann sagen Sie aber nur auf einer bestimmten Seite. Für welche Seite müssen Sie das tun?
Meine Website funktioniert perfekt, bis ich ein Viewport hinzufüge, dann funktioniert sie auf Handys und Tablets nicht richtig. Die Lösung wäre natürlich, kein Viewport zu verwenden, aber dann schickt Google keine Besucher… Ich hasse diesen Mist, meine Website ist in Ordnung, der Google-Roboter ist retardiert, und ER braucht SEINE Codeänderung.
Danke für die wichtigen Informationen, tatsächlich habe ich den Code zu einem nicht responsiven Design hinzugefügt und es funktioniert großartig.
Meine Containergröße beträgt 800 Pixel, die statisch sein soll. Ich benötige, dass sich der Container in Mobilgeräten im Hochformat an die Breite anpasst und im Querformat an die Höhe.
Ich habe „“ verwendet, was im Hochformat auf der Breite basiert. Aber im Querformat muss es an der Höhe fixiert sein. Bitte schlagen Sie etwas vor.
Außerdem funktioniert die obige Syntax auf dem iPhone nicht. Haben Sie eine Lösung für das iPhone?
Hier ist die verwendete Syntax meta name=”viewport” content=”width=device-width”
Ich hatte großartige Ergebnisse, indem ich für device-width und user-scalable „yep“ angegeben habe. Das Hinzufügen von „1“ für initial-scale schien keinen großen Unterschied zu machen.
Zur weiteren Erklärung: Ich habe einen Body mit max-width von 31em und einer anfänglichen Schriftgröße von 19px. Ein oder zwei Media Queries, um die Schriftgröße ein wenig anzupassen (z. B. etwas größer für das iPad). Ich habe Matthew Buttericks Practical Typography gelesen und stimme ihm voll und ganz zu. (In 24px gesetzt, etwas groß für meinen Geschmack.) Für Lesbarkeit schlägt er vor, keine Angst vor „Weißraum“ zu haben. Daher hat die Laptop-Version meiner Website viel davon, aber komfortabel lesbare Zeilenlängen. Wie auch auf anderen Geräten. Ein lohnenswertes Ziel, wie ich finde: Lesbarkeit.
„user-scalable=no“ hat verhindert, dass meine Navigationsleiste mit fester Position beim Scrollen in Chrome unter Android auf und ab springt. Danke für den Hinweis!
Kann ich das für Nicht-Mobilbrowser verwenden? Ich möchte meine gesamte Website um den Faktor 1,2 skalieren. Wenn ich versuche, CSS `transform:scale(1.2)` zu verwenden, sieht alles großartig aus, aber es gibt Probleme mit der Positionierung von Modalen und nach dem Laden der Seite hinzugefügten DOM-Elementen. Daher kann ich ‚transform‘ nicht verwenden. Die CSS-Eigenschaft ‚zoom‘ funktioniert in Firefox nicht. Ich habe mich gefragt, ob ich meta name=viewport mit initial-scale von 1,2 verwenden könnte, um dieses Problem zu lösen. Danke.
W3C CSS Validator Ergebnisse (CSS Level 3 + SVG)
Entschuldigung! Wir haben folgende Fehler gefunden (1)
wp-content/themes/twentysixteen/style.css?ver=03779222086b3b8a23b60f8f148f2124
2750 Fehler: Breite device-width ist kein Breitenwert: device-width
Mein Problem mit den hier gezeigten Methoden ist, dass keine wirklich das Problem der gleichzeitigen Einstellung der Viewport-Breite auf „device width“ und der Darstellung von Text im Quer- und Hochformat in identischen Größen löst. Die Art und Weise, wie ich das bisher umgehe, ist, zuerst eine allgemeine Body-Schriftgröße von 1rem für alle Desktop-Browser anzugeben. Dann gebe ich in den Media-Selektoren unterschiedliche Schriftgrößen für Porträt- und Landschaftsfälle an. Wenn ich mich zum Beispiel für 0,9rem für das Body-Element im Porträtmodus entscheide und dann 0,7rem Schriftgrößen im Querformat, erhalte ich eine ziemlich genaue Schriftextraktion, wenn der mobile Bildschirm gedreht wird. Vielleicht gibt es eine Möglichkeit, denselben Effekt ohne solche Entschädigungen zu erzielen, aber dies ist die einzige, auf die ich mich verlassen kann.
user scalable ist hier 0 statt No, gäbe es da Widersprüche? z.B. (user-scalable=0;)
Es gibt eine weitere nützliche Funktion im Viewport-Meta-Tag.
Wenn es nicht angegeben ist, verwendet der Browser die Standardeinstellung, heute 160 dpi. Aber die tatsächlichen Geräte haben heute normalerweise eine viel größere Anzahl von Dots Per Inch. Deshalb hat das Android-Team eine benutzerdefinierte Meta-Viewport-Eigenschaft implementiert, um die Browser-Skalierung für hochauflösende (HDPI) Bildschirme anzupassen.
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">Dies verwendet die DPI des Zielgeräts anstelle des Standardwerts von 160 dpi.
width=device-width; height=device-height;
Danke, funktioniert super