Wenn Sie responsives Design betreiben, verwenden Sie Viewport-<meta>-Tags. Diese sagen dem Browser, mit welcher Breite er den Viewport rendern soll. Wenn Sie dieses Tag nicht verwenden, wird es mit der Standardbreite des Geräts gerendert, was fast sicher nicht das ist, was Sie wollen. Aber selbst wenn Sie Viewport-<meta> verwenden, gibt es subtile Unterschiede im Wert, den Sie hineinsetzen.
Ich möchte mich hier nur auf einen kleinen Unterschied konzentrieren.
Ich verwende diesen hauptsächlich, seitdem ich responsives Design betreibe.
<meta name="viewport" content="width=device-width">Was bedeutet: „Browser, rendere diese Website exakt so breit, wie Sie es von Natur aus sind.“
Wenn wir uns iPhones ansehen, sind die 1-5 320 Pixel breit. Das 6 ist 375 Pixel breit, das 6+ ist 414 Pixel breit. Es gibt unzählige andere Geräte, und diese haben eine riesige Vielfalt an Viewport-Breiten. Dieses Meta-Tag wird ihnen allen sagen, sie sollen so breit rendern, wie sie sind. Großartig.
Wenn man dieses Tag genau wie oben verwendet, zeigt das iPhone beim Drehen in den Querformatmodus dieses seltsame Zoomverhalten.
Hier kommt der initial-scale-Wert ins Spiel! Wenn Sie stattdessen dies tun.
<meta name="viewport" content="width=device-width, initial-scale=1">Es behält den gleichen Zoom.
Besser, sage ich.
Ich würde nicht bezweifeln, dass initial-scale auch andere Fehler behebt. Ich habe es nicht in einem riesigen Geräte-Labor oder Ähnlichem getestet. Das wäre aber ziemlich interessant. Lassen Sie mich wissen, wenn Sie tiefere Details kennen.
Und während initial-scale=1 ziemlich nützlich ist, ist maximum-scale schlechte Nachrichten für die Barrierefreiheit.
Das mache ich schon!
Großartig. Sie sind mir weit voraus. Viele Snippets enthalten das, was großartig ist. Ich habe es vielleicht sogar einmal entfernt und nichts Schlimmes sofort bemerkt, also habe ich es so gelassen. Ich bin einfach dumm.
Denken Sie daran, dass Sie mehr als nur Meta-Tags benötigen.
IE 10 im Snap-Modus und Windows Phone 8 benötigen @viewport-Stuff im CSS, also denken Sie daran, dieses Zeug zu verwenden.
Großartig. Aber was passiert, wenn der Besuch (aus irgendeinem Grund) im Querformat beginnt? Was passiert dann? Ist etwas unerwünscht?
Soweit ich weiß, sollte es kein Problem sein, wenn man im Querformat beginnt.
Gibt es einen Unterschied zwischen 1.0 und 1?
Nein
Ich denke auch, dass es für die Barrierefreiheit schlecht ist, das
user-scalable-Attribut zu ändern.Für ein großartiges Video darüber, warum responsives Webdesign funktioniert (technisch gesehen) ... und für einen tiefen Einblick in Viewports, schauen Sie sich dieses Video an ...
Außerdem befasst sich das Buch Mobile Web Handbook mit den technischen Details, warum das Viewport-Meta-Tag funktioniert ...
https://shop.smashingmagazine.com/mobile-web-handbook.html
Ich fand das Video und das Buch sehr aufschlussreich in die Welt der mobilen Viewports ...
Zusätzlich zu
Ich füge das auch in CSS hinzu.
Dies verhindert, dass der Text vergrößert wird. Hat bisher großartig funktioniert. Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
Wenn Sie absolut, positiv jeden Skalierungsfaktor im Raum ausmerzen müssen. Akzeptieren Sie keine Ersatzstoffe.
Ich hatte letztes Jahr eine lange Diskussion darüber und habe einige Tests durchgeführt, die zeigten, dass die Nichtverwendung von initial-scale=1 in fast allen denkbaren Fällen schlecht war.
Die Ergebnisse finden Sie hier.
http://community.sitepoint.com/t/mobile-viewport-orientations-initial-scale-1-0/38495/11
(Entschuldigung für den externen Link).
Ohne initial scale erhalten Sie den Zoom-Bug bei der Rotation (und manchmal verstärkte Effekte bei doppelter Rotation) und die Medienabfragen für den Querformatmodus werden ignoriert. Solche Probleme treten nicht auf, wenn initial scale=1 hinzugefügt wird.
Das benutze ich schon seit einer Weile.
Ich hasse Websites, die das tun.
Das ist das gefährliche, bei dem JEDES ZOOMEN VERHINDERT WIRD – was allgemein als schlecht für die Barrierefreiheit gilt. Menschen können nicht zoomen, um besser zu lesen. Sie können nicht in Bilder hineinzoomen, um Dinge klarer zu sehen. Sowohl aufdringlich als auch schlecht für a11y.
Für normale inhaltsbasierte Websites ist es normalerweise eine schlechte Idee, user-scalable=no zu setzen. Wenn Sie jedoch eine Web-App mit komplexen Benutzeroberflächen entwickeln, ist dies oft wünschenswert, insbesondere wenn Sie ein Erlebnis ähnlich einer nativen App anstreben.
sollten wir keine Websites erstellen, auf denen Benutzer nicht hineinzoomen müssen, um besser zu lesen? Ist das nicht genau das, wofür responsives Webdesign da ist?
Wir sollten nicht davon ausgehen, dass wir wissen, was Benutzer wollen.
Was ist, wenn jemand in ein Bild hineinzoomen möchte oder muss? Ich halte es für extrem riskant und fast immer einen Fehler, pauschale Annahmen darüber zu treffen, was jeder einzelne Benutzer mit Ihrer Website tun möchte oder muss. Die Möglichkeit zum Zoomen wegzunehmen, ist super nervig und meiner Meinung nach einfach schlechte Praxis.
Warum nicht Ihre Website so gestalten, dass es keine Rolle spielt, ob jemand zoomen möchte (oder sich überhaupt keine Gedanken darüber macht)?
Sie haben Recht. Es schadet nicht, dem Benutzer das Zoomen zu ermöglichen, da es die Seitenanzeige nicht beeinträchtigt. Danke für den Rat ;)
Wie stellen Sie als Designer fest, dass Ihr Besucher nicht zoomen *muss*?
Ich verwende auch maximum-scale. Aber ich wusste nicht, worum es dabei geht. Aber ich verstehe etwas Neues. Aber das sieht neuer aus als maximum-scale=1, ich benutze 1.0. Was ist dann user-scable?
Ihr seid ignorant, wenn ihr sagt: „Leute können nicht zoomen, um besser zu lesen“, wenn ihr das Viewport-Attribut auf
„width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no“setzt.Auf iOS, Windows Phone und Android kann der Benutzer in die Barrierefreiheitseinstellungen gehen und das Werkzeug „Zoom“ oder „Lupe“ verwenden, um den Text besser zu lesen. Und auf dem Desktop kann der Benutzer Strg + verwenden, um die Seite zu vergrößern.
Die Wichtigkeit der Einstellung des Viewport-Attributs auf
„width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no“ist besonders auf meiner Website ProfessedTechnology offensichtlich. Ohne sie würde die Website völlig lächerlich aussehen! Zum Beispiel würde auf einem iPhone mit nur„width=device-width“die Website im Hochformat normal aussehen, aber im Querformat würde sie um das Dreifache vergrößert! Und mit nur„initial-scale=1.0, maximum-scale=1“würde der gleiche Effekt unter Windows Phone auftreten! Und darüber hinaus können Sie, wenn„user-scalable=no“nicht gesetzt ist, zoomen, aber es sieht so dumm aus, weil es in einen bestimmten Bereich hineinzoomt und es albern aussieht!Die Moral von der Geschichte ist, dass einige Websites eine feste Zoomstufe haben sollten und andere nicht, es hängt alles vom Design der Website ab. Wenn Benutzer wirklich hineinzoomen müssen, können sie die Barrierefreiheitswerkzeuge des Betriebssystems verwenden! Sie sind aus gutem Grund da!
KLÄRUNG: Es tut mir leid, wenn ich in meinem Kommentar Eigenwerbung gemacht habe, ich war sehr müde, als ich ihn geschrieben habe. Zweitens weiß ich, dass die Barrierefreiheitswerkzeuge absolute Müll sind, aber denken Sie daran, dass Pinch-to-Zoom auf einer Webseite eine von Apple geförderte Funktionalität ist. Daher ist die Aussage, dass das Deaktivieren des Zooms schlecht für die Barrierefreiheit ist, keine ganz solide Argumentation. Die Zoom- und Lupe-Werkzeuge sind für die Barrierefreiheit da, nicht die Pinch-to-Zoom-Funktion.
Das ist gut für Formulare. Es ist nervig, wenn man auf dem Handy ist und ein Formular anklickt und es hineinzoomt. Es ist jedoch keine gute Praxis, das Zoomen von Bildern zu verhindern. Wie stoppt man also das nervige Zoomen bei Formularen, ohne dass Benutzer auf Bildern zoomen können?
Andrew,
Das Entfernen von user-scale ermöglicht mobilen Betriebssystemen tatsächlich, beim Fokussieren eines Eingabefeldes zu skalieren/zoomen. Dafür gibt es eine Vielzahl von Lösungen, die in diesem Stack Overflow-Thread zu finden sind: http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
Der TL;DR ist, dass die Einstellung der Schriftgröße auf 16 Pixel oder idealerweise 1em, wenn das 16 Pixel ergibt, die meisten mobilen Browser am Hineinzoomen hindert. Das hat bei einer meiner letzten Websites funktioniert.
Ich werde Sie aufspüren ... :) Im Ernst, tun Sie es nicht. Ich habe schlechte Augen und muss hineinzoomen, um den Text lesen zu können!
@Valerio: user-scalable=no
Bitte hindern Sie mich nicht am Zoomen auf meinem Handy. Ich kann es sonst einfach nicht lesen ;)
Ich verwende das initial-scale=1 Meta-Tag schon seit Ewigkeiten. Aber ich hatte keine Ahnung, dass ein CSS-Fix für IE10 und Windows Phones erforderlich war.
Komm schon IE – spiel mit. Du sollst ein „moderner“ Browser sein!
Beste Grüße
I
Die @viewport-Regel ist der Standard, nicht das Meta-Tag. Das Meta-Tag wurde von Apple zusammen mit dem ersten iPhone eingeführt und ist zu einer Art De-facto-„Standard“ geworden, aber IE ist hier tatsächlich der zukunftsorientierte.
Ich habe die Skalierung auf iOS-Geräten ehrlich gesagt noch nie bemerkt.
Vielleicht habe ich es die ganze Zeit falsch gemacht oder vielleicht liegt es daran, dass ich immer eine Standard-Schriftgröße für den Body setze und diesen Wert über Medienabfragen erhöhe/verringere.
Das ist lebensverändernd! haha, danke!
Meiner Meinung nach hat dieser Artikel einen falschen Titel, er sollte lauten „Behebung des iPhone-Browser-Rotationsfehlers“ :)
Gut zu wissen, aber :)
Nein, das sollte es nicht! Apples Dokumentation hierzu besagt ausdrücklich, dass man es so machen soll und nicht device-width verwenden soll.
Tatsächlich beweist das meinen Punkt genau :)
Wie relevant ist dieser Artikel außerhalb der Welt bestimmter Apple-Geräte?
Gibt es mögliche Nebenwirkungen in anderen Testfällen auf völlig anderen Geräten?
Es wird irgendwie angenommen, dass Mobile Safari/WebKit der Standard ist und der Rest damit übereinstimmen sollte. Wir hatten diese Situation und nannten sie IE6 :)
Ich habe noch keine Links oder Daten dazu, aber ich bin ziemlich sicher, dass dies Fehler außerhalb von iOS behebt. Ich glaube, der Fehler war Webkit-bezogen, was eine größere Reichweite hat.
Hat jemand einen Anwendungsfall, der maximum-scale=1 erfordert?
Einige Leute gaben Beispiele dafür, dass es schlecht ist, weil Ihre Benutzer nicht in Bilder zoomen können. Nun, wenn Sie eine responsive Website erstellen und Ihre Benutzer zum Lesen von Text oder Bildern zoomen müssen, dann müssen Sie wahrscheinlich überdenken, ob Sie die Dinge richtig machen. ;-)
Nehmen Sie zum Beispiel CSS-Tricks. Es gibt keinen Grund, irgendwo hineinzuzoomen. Codepen hingegen ist überhaupt nicht responsiv und erfordert daher Zoomen.
Zum Zeitpunkt, als ich das vor ein paar Jahren schrieb – https://alwaystwisted.com/articles/2013-01-10-dont-do-this-in-responsive-web-development – habe ich im Grunde Idioten bemitleidet, die maximum-scale so setzen, dass keine Möglichkeit zum Zoomen besteht.
Ich bin auch auf einen Bug mit Windows 8 (nicht 8.1) gestoßen, es sei denn, Sie haben initial scale eingeschlossen. Da das vor zwei Jahren war und ich das sehe
Ich habe es dummerweise nicht in meinem Artikel dokumentiert. Ich kann mich beim besten Willen nicht erinnern, warum ich es beibehalten habe und es immer wieder in mein HTML einfüge.
Ich verwende seit einiger Zeit ‚meta name=”viewport” content=”initial-scale=1“‘.
Das Hinzufügen von „width=device-width“ erscheint bestenfalls redundant, und ich bin mir keiner Probleme bewusst, die durch das Weglassen entstehen würden. (Fühlen Sie sich frei, mich zu korrigieren!)
Der „Zoom-Bug“ ist meiner Erinnerung nach beabsichtigt. device-width ist immer nur die Breite im Hochformat und ändert sich nicht, wenn Sie rotieren oder Seiten im Querformat laden (also für iPhones bis 5 ist es immer device-width=320px).
Chris,
Es sieht so aus, als ob CSS Tricks immer noch verwendet.
Gibt es dafür einen Grund?
Danke für den Artikel!
Ich wollte Tests durchführen, bevor ich es einfach ändere. CSS-Tricks zeigt zwar das Hineinzoomen, aber der Platz füllt sich gut. Ich bin sicher, wenn ich hier wieder an Design-Dingen arbeite, werde ich mich darum kümmern.
Ok, das war meine Vermutung. Übrigens, es sieht so aus, als ob ich initial-scale=1 seit ein paar Jahren verwende; bisher so gut. Leider keine Zeit oder Budget für Geräte-Labortests. :)
Ich verwende IMMER initial-scale=1 und das hat mehr Probleme gelöst, als ich zählen könnte! Nicht nur Apple-Geräte, sondern auch viele IE-Probleme werden gelöst.
Auf der anderen Seite: Ich verhindere NIEMALS das Zoomen durch den Benutzer. Einer meiner Vorgesetzten hat Sehprobleme und lässt mich nichts in die Produktion schieben, bis er den Zoomfaktor getestet hat. Wir hatten einige Gespräche darüber, wie das bedeutet, dass die Seite nicht immer fantastisch aussehen wird. Es ist ihm wichtig, dass er zoomen darf; mir ist wichtig, dass er meine Arbeit nicht als minderwertig ansieht, weil ich keinen 3000%igen Zoom für die Seite geplant habe. ^_^
Habe etwas Cooles gefunden, das Teil meines CSS-Resets sein wird.
Dies verhindert, dass Safari iOS auf Ihrem iPad oder iPhone hineinzoomt, wenn Sie ein Eingabefeld drücken. Oft sehen Sie dies, wenn Entwickler ein Suchfeld innerhalb eines mobilfreundlichen Menüs platzieren. Sie berühren das Suchfeld und zack, Ihre Seite bricht aus ihrer schönen Leinwand aus.