Einrichten von Padding für Websites in mobilen Geräten

Ich hatte diese Website vor einer Weile beendet, aber etwas ist passiert und ich habe jetzt den ganzen Tag damit verbracht, es zu reparieren und es von Grund auf neu zu bekommen, da meine Sicherung nicht korrekt war. Ich verstehe nicht ganz, was es tut, da ich diese Technik auf vielen anderen Websites ohne Probleme gemacht habe, vielleicht habe ich diese Website zu lange angeschaut?Einrichten von Padding für Websites in mobilen Geräten

Here is the website. Ich möchte auf der linken und rechten Seite etwas Platz schaffen, aber ich habe nicht nur einen Container, da ich den dunkelgrauen Balken auf 100% des Bildschirms brauchte und immer unter dem Banner, egal wo er war. Also gibt es 4 "containing" divs, die ich den Platz haben möchte. Ich habe soem CSS3-Medien-Anfragen platziert, aber jetzt bekomme ich eine Lücke nach rechts. Ich dachte, dass es daran lag, dass meine Hintergrundmagier den ganzen Weg gehen, aber sie sind auf 100% eingestellt, also verstehe ich einfach nicht, was los ist. Es ist somethign einfach, ich sehe es jetzt nicht ..

Das ist, was ich habe für die Medien-Anfragen

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

#header, #banner, #main, #footer-widget-area { padding: 0 2em 0 2em; } 

}

Dies ist, was t wie auf meinem iPhone

enter image description here

sieht

Jeder Rat ist hilfreich und geschätzt.

Quelle

2012-11-05 kia4567

@ambrealsweb hast du es bekommen, worüber ich spreche ......... –

Schauen Sie in den Meta-Tag viewport. Wenn Sie den Code auf Ihrer Seite <head> hinzuzufügen waren:

<meta name="viewport" content="width=1100">

, dass die iPhone-Ansichtsfenster zwingen würde 1100px breit zu machen. Das Standard-Ansichtsfenster auf einem iPhone ist 980px, also bedeutet Ihre Seite, dass 100% Breite 980px und nicht die wahre Breite des Inhalts war.

Ansichtsfenster kann schwierig sein, hier einige weitere Informationen über sie:

Viewport meta tag for non-responsive design

Quelle

2012-12-13 00:57:22 djfarrelly

Diese Option funktionierte am besten für mein Layout. Vielen Dank! – kia4567

ich die Live-Website überprüft, sieht aus wie das Problem auf der rechten Seite nur 3 Pixel mehr Platz ist nach unten. Ich habe auch einen Zeilenumbruch im Navigationsmenü bemerkt. Es sieht aus wie das Smartphone Medien Anfrage an den folgenden ändern, werden die letzten Probleme lösen:

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

#header, #main, #footer-widget-area { padding: 0 1em 0 1em; } 
#banner { padding: 0; } 
#header-right { width: auto; } 
#access .menu-header { width: auto; } 

h4 { font-size: 1.4em; line-height: 1em; } 
}

Quelle

2012-12-13 02:07:17 tiffon

Wie wäre es damit:

#wrapper { padding:0 2em; margin:0 auto; overflow:hidden; height:auto; } 
#header, #content, #stuff, #etc { margin:0;padding:0; } 
#inside stuff { whatever else; }

Wickeln Sie die #wrapper um Ihre äußerste DIV (direkt nach <body> und in der Nähe vor </body>).

Sofern Sie nicht planen, einige Elemente außerhalb der 2em-Padding-Region zu positionieren, kann ich mir nicht vorstellen, warum dies keine effizientere Lösung für Ihr Problem wäre.

Quelle

2012-12-13 23:01:55 FurryWombat

Einrichten von Padding für Websites in mobilen Geräten

Antwort

Verwandte Themen