Share
Ich erinnere mich an meine Jungfernfahrt in responsives Webdesign; Ich hatte ein klassisches Gitter verwendet, mit einem flexiblen Layout gerungen und zum ersten Mal mit Medienanfragen gearbeitet. Das Dehnen und Verkleinern des Browserfensters führte dazu, dass mein Design auf seine Umgebung reagierte. Dann habe ich es auf einem Handy getestet. Es hat nicht funktioniert - ich habe mir eine verkleinerte Version des Vollbild-Designs angesehen. Die Lösung war, wie sich herausstellte, einfach…
Hinweis: Dieses Tutorial wurde erstmals im Februar 2012 veröffentlicht. Es wird jedoch häufig als Referenz in anderen Tutorials verwendet (und die Dinge haben sich geändert). Ich war der Meinung, dass ein Update erforderlich ist.
In diesem Lernprogramm erfahren Sie, wie Sie das Viewport-Meta-Tag selbst verwenden. Wenn Sie jedoch bei der Erstellung einer responsiven Website Hilfe benötigen, gibt es viele Designer, die Sie in Envato Studio unterstützen. Hier sind einige der besten Optionen:
Dieser Anbieter aus Großbritannien erstellt ein benutzerdefiniertes Webdesign und eine Entwicklung, die auf Ihrem Branding, Ihren Farben, den Anforderungen an die Funktionalität und den besten Usability-Praktiken basiert. Ihre Website ist einzigartig für Ihr Unternehmen und für maximale Conversion eingerichtet.
Du wirst kriegen:
Wenn Sie die Entwicklung selbst durchführen können und nur ein Design wünschen, können Sie diese Option wählen, mit der Sie eine professionell gestaltete Website erhalten. Folgendes erhalten Sie:
Dieser Anbieter ist ein Vollzeit-Freelance-Webdesigner mit über 12 Jahren Berufserfahrung in den Bereichen Webdesign, Grafikdesign und UI / UX User Interface Design.
Sie erhalten eine elegante einseitige Website, die auf Reaktionsverhalten ausgerichtet ist.
Wenn keine dieser Optionen für Sie bestimmt ist oder Sie lieber selbst lernen möchten, lesen Sie die Anweisungen.
Wenn Sie nichts anderes in diesem Beitrag lesen, nehmen Sie einen Ratschlag mit: Wenn Sie flexibel entwerfen, verwenden Sie das Viewport-Meta-Tag in Ihrem . In seiner Grundform wird es für ein geräteübergreifendes Layout sorgen:
Lassen Sie uns ein Beispiel-Layout verwenden, das ich zusammen geschlagen habe. Schau mal; Wenn Sie die Größe Ihres Browsers ändern, wird er kleiner und wächst. Es gibt auch eine einzige Medienabfrage, durch die der Text größer wird und die Überschrift hell wird # ff333e Farbe auf breiteren Bildschirmen. Schön.
So sieht es in OSX Chrome aus:
Und so sieht es aus, wenn das Browserfenster gequetscht ist:
Mal sehen, wie das auf einem Smartphone aussieht (in diesem Fall iOS Safari auf einem iPhone 4):
Als erstes werden Sie die rote Überschrift bemerken. ein totes Werbegeschenk, bei dem wir nicht auf das enge Layout schauen, das wir erwarten würden. Wir betrachten eigentlich eine verkleinerte Version.
iOS Safari geht davon aus, dass eine Webseite 980px breit ist und herausgezoomt wird, um die gesamte Menge in den verfügbaren (iPhone 4) 320px zu passen. Der Inhalt ist dann viel weniger lesbar, es sei denn, Sie zoomen hinein.
Die Annahme ist, wie sie sagen, die Mutter von allem… etwas, aber genau das müssen mobile Browser tun, wenn Sie sie nicht ausdrücklich instruieren. Wenn Sie eine Website über einen mobilen Browser aufrufen, wird davon ausgegangen, dass Sie ein großes Desktop-Erlebnis sehen und dass Sie alles davon sehen möchten, nicht nur die obere linke Ecke. Es wird daher die Breite des Darstellungsbereichs auf (bei iOS Safari) 980px festgelegt, wobei alles in einem kleinen Display angezeigt wird.
Geben Sie das von Apple eingeführte Viewport-Meta-Tag ein, das von anderen übernommen und weiterentwickelt wird.
Es sieht aus wie das:
Innerhalb des content = "" Sie können eine Reihe von durch Kommas getrennten Werten eingeben, aber wir werden uns jetzt auf die grundlegenden Werte konzentrieren.
Wenn Ihr mobiles Design beispielsweise absichtlich mit 320 Pixel ausgelegt ist, können Sie die Breite des Ansichtsfensters angeben:
Für flexible Layouts ist es praktischer, die Breite Ihres Darstellungsbereichs auf das betreffende Gerät zu stützen, um Ihre Layoutbreite an die von Ihnen eingegebene Gerätebreite anzupassen:
Um sicherzugehen, dass Ihr Layout wie gewünscht angezeigt wird, können Sie auch die Zoomstufe einstellen. Dies zum Beispiel:
… Sorgt dafür, dass Ihr Layout beim Öffnen richtig im Maßstab 1: 1 angezeigt wird. Es wird kein Zoom angewendet. Sie könnten sogar noch weiter gehen und ein Zoomen durch den Benutzer verhindern:
Hinweis: Überlegen Sie vor dem Anwenden des Maximum-Scale-Parameters, ob Sie wirklich verhindern sollten, dass Ihre Benutzer die Ansicht vergrößern. Können sie alles so gut wie möglich lesen??
Die falsche Verwendung des Viewport-Meta-Tags kann Benutzer mit visuellen Problemen beim Zugriff auf Ihre Website behindern
- Das Accessibility-Projekt
Diese Werte zusammen geben uns einen hervorragenden Standard für die Arbeit mit:
Mal sehen, wie es unser Beispiel beeinflusst
Wie Sie sehen, bleibt alles im richtigen Maßstab. Der Text wird umbrochen anstatt verkleinert, und unser visueller Helfer (die rote Überschrift) ist verschwunden.
Hat Tipp an Jason für den Hinweis in den Kommentaren. Durch die Angabe, dass die Breite Ihres Layouts der Breite des Geräts entspricht, treten Probleme auf, wenn ein Gerät im Querformat verwendet wird. Sehen Sie sich an, wie ein iPhone 4 unsere Demo in der Landschaft behandelt:
Der Browser fühlt sich verpflichtet, die Ansicht zu vergrößern, um die Breite der Seite anzupassen.
Um dies zu umgehen, könnten wir, wie Jason darauf hinweist, JavaScript verwenden, um die zu verwendenden Metatagattribute bedingt zu wählen. Die einfachste Lösung scheint jedoch, das zu ignorieren Breite insgesamt. Indem Sie nur das einstellen Anfangsmaßstab die Breite wird abgeleitet. So erscheint unsere neue, vereinfachte Demo im Querformat:
Das Viewport-Metatag war Apples Lösung für das Problem. Es wurde schnell von anderen Plattformen übernommen, aber vom W3C nie vorgeschlagen. Microsoft brachte dies zur Kenntnis, als sie sich für IE10 entschieden haben, um den Viewport-Metatag unter bestimmten Umständen zu ignorieren. Stattdessen entschieden sie sich für die Verwendung der CSS-Geräteanpassung ist worauf sich das W3C stützt.
Kurz gesagt, ähnliche Ansichtsfenster-Eigenschaften werden in CSS mithilfe der @ viewport-Regel und nicht im HTML-Code definiert.
@Ansicht Zoom: 1,0; Breite: Gerätebreite;
Oder in Übereinstimmung mit unserem neueren Geben Sie keine Gerätebreite an Ansatz könnten wir Folgendes einstellen:
@Ansicht Zoom: 1,0; Breite: Ausdehnung auf Zoom;
In Anbetracht dessen, dass es sich um eine laufende Arbeit handelt, benötigt der IE10 die vorangestellte Version des Vorschlags, die in etwa wie folgt aussieht:
@ -ms-viewport width: Zum Zoomen erweitern; Zoom: 1,0;
Dies ist eine weitaus elegantere Lösung als der Metatag, ist aber noch lange nicht vollständig unterstützt. Fügen Sie es jetzt in Ihr CSS ein, um sicherzustellen, dass sich Ihr responsives Design im "Snap-Modus" des IE10 verhält, und behalten Sie den Fortschritt in der Zukunft im Auge. Dies ist, wo Viewport-Steuerung geleitet wird.
Weitere Informationen hierzu finden Sie in Tim Kadlecs Posting IE10 Snap Mode und Responsive Design.
Responsives Webdesign ist nicht nur für Menschen gedacht, die es genießen, ihren Browser beim Wachsen und Verkleinern zu beobachten, es geht darum, möglichst viele unterschiedliche Geräte, Bildschirme und Auflösungen zu berücksichtigen! Werfen Sie das Viewport-Meta-Tag in Ihr , plus die @viewport-Regel in Ihrem CSS, wenn Sie flexible Layouts erstellen und fertig sind.
Sie können außerdem Tausende von Responsive Themes und Vorlagen von hoher Qualität in ThemeForest und eine große Auswahl an Skripten, Plugins und Add-Ons in der Kategorie "Responsive" von CodeCanyon finden.
Accentsconagua