Ich versuche etwas zu tun, das, dachte ich, sehr einfach ist. Die Kopfzeile einer Website, die ich erstelle, ist eine solide Farbe, die die gesamte Breite des Bildschirms abdecken muss, unabhängig davon, in welchem Browser sie angezeigt wird. Was ich bisher erstellt habe, funktioniert wunderbar auf Desktops und Laptops, aber wenn ich es teste ein Tablet oder ein Mobiltelefon, der Header reicht nicht ganz nach rechts. Der Inhalt innerhalb des Headers überspannt jedoch den ganzen Weg, was für mich wirklich verwirrend ist. Der einzige Weg, wie ich erreichen kann, dass die Kopfleiste die gesamte Breite überspannt, besteht darin, die Eigenschaft position auf statisch zu setzen, was ich für diese Site nicht benötige, so dass mir das nicht gut tut. Im Folgenden finden Sie das CSS und HTML, das ich verwende. Könnte sich jemand das ansehen und mir mitteilen, was ich vermisse.
HTML:
%Vor%CSS:
%Vor%Das ist mir auch passiert. Die Größe auf dem Desktop ist in Ordnung, aber aufgrund eines 728px-Banners an der Spitze meines Blogs sah das Handy schrecklich aus. Es ist schwierig, ein breites Banner auf einem so kleinen Bildschirm zu installieren, ohne Probleme zu verursachen. Wenn Sie kein Banner haben, haben Sie vielleicht ein Element, das zu breit ist und den Rest des Designs wegwirft.
Dies hat das Problem behoben: <meta name="viewport" content="width=device-width, initial-scale=0.41, maximum-scale=1" /> (Das geht in <head>...</head> )
Verringern Sie die anfängliche Skalierung von 1,0 bis Ihre Elemente den ganzen Weg über die Seite mit 100% erreichen können. Diese Skala hat meinen Text ein wenig zu klein gemacht, aber Flowtype.js hat geholfen. Ich könnte mit einem kleineren Banner gehen, aber ich bin jetzt mit dieser Lösung zufrieden.
UPDATE: Die obige Lösung ist nicht wirklich geräteunabhängig. Zum Beispiel könnte der "Maßstab" auf Ihrem Telefon gut aussehen, aber zu klein auf Ihrem Tablet. Vielleicht möchten Sie dies stattdessen:
<meta name="viewport" content="width=800" />
Damit verhalten sich alle Ihre Geräte wie ein Bildschirm, der 800 Pixel breit ist. Oder welche Breite auch immer du brauchst. Funktioniert wunderbar auf meinem Android-Handy und Nexus-Tablet. Ich denke, Desktop-Browser ignorieren die Einstellung "Ansichtsfenster", was für mich in Ordnung ist.
Ich habe das nicht auf einem Tablet oder einem Mobiltelefon getestet, aber ich denke, das Problem besteht darin, eine feste Breite für den "Container" div festzulegen. Da Sie für html, body und den Header div 100% width eingestellt haben, belegen diese immer 100% der Breite, unabhängig davon, ob es sich um einen Browser, ein Tablet oder ein Mobiltelefon handelt. Dies ist jedoch beim div "Container" nicht der Fall, da es eine feste Breite hat. Versuchen Sie, die Breite des "Container" -Div auf diese Weise zurückzusetzen:
%Vor%Nach PJ Brunets Antwort hatte ich ein ähnliches Styling-Problem, bekam aber nicht genug Vielseitigkeit durch die Änderung der Meta-Tags im HTML-Kopf. Stattdessen fügte ich der css minimale Breitenwerte in Pixeln hinzu. Verwenden Sie die ursprüngliche Frage als Beispiel:
%Vor%Dann können Sie das nächste Gerät in konventioneller Größe anvisieren:
%Vor%Vielleicht nicht die beste Vorgehensweise, aber Sie können damit alle Gerätegrößen in handlichere Gruppen aufnehmen, um sie dem Design anzupassen.