Konfigurowanie dopełnienie dla stron internetowych w urządzeniach mobilnych

skończyłem tej stronie jakiś czas temu, ale coś się z nim stało, a ja teraz cały dzień go naprawić i odzyskać go od podstaw, jak moja kopia zapasowa nie została prawidłowo wykonane. Nie bardzo rozumiem, co robię, ponieważ wykonałem tę technikę na wielu innych stronach internetowych bez żadnych problemów, może zajrzałem na tę stronę zbyt długo?Konfigurowanie dopełnienie dla stron internetowych w urządzeniach mobilnych

Here is the website. Chcę umieścić trochę miejsca po lewej i po prawej stronie, jednak nie mam tylko jednego pojemnika, ponieważ potrzebowałem ciemnoszarego paska na 100% ekranu i zawsze pod banerem, bez względu na to gdzie był. Tak więc istnieją 4 "zawierające" divy, które chcę mieć w przestrzeni. Umieściłem już pytanie o media CSS3, ale teraz dostaję lukę w prawo. Myślałem, że to dlatego, że moi czarni magowie przechodzą przez całą drogę, ale osiągają 100%, więc nie rozumiem o co chodzi. To somethign proste, ja nie widząc go teraz ..

To, co mam dla mediów odpytuje

/* 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; } 

}

To właśnie t wygląda na moim iPhone

enter image description here

Każda rada jest pomocna i doceniana.

Źródło

2012-11-05 kia4567

@ambrealsweb zrobił u dostać go, co mówię o tym ......... –

Spójrz w znaczniku meta viewport. Jeśli było dodać kod do swojej strony na <head>:

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

To zmusi rzutnię iPhone do renderowania 1100px szerokości. Domyślna rzutnia na iPhone'a to 980 pikseli, więc Twoja strona sugerowała, że szerokość 100% to 980 pikseli, a nie prawdziwa szerokość treści.

rzutni może być trudne, oto kilka informacji na jej temat:

Viewport meta tag for non-responsive design

Źródło

2012-12-13 00:57:22 djfarrelly

Opcja ta działa najlepiej dla mojego układu. Dzięki! – kia4567

Sprawdziłem LIVE, wygląda na to, że problem jest w dół do zaledwie 3 piksele dodatkową przestrzeń po prawej stronie. Zauważyłem również przerwę linii w menu nawigacji. Wygląda na to, zmieniając zapytanie multimedialny smartphone z poniższych będzie rozwiązać ostatnie kwestie:

/* 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; } 
}

Źródło

2012-12-13 02:07:17 tiffon

Jak o tym:

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

Owiń #wrapper wokół peryferyjnego DIV (tuż po <body> i blisko przed </body>).

Chyba twój plan jest umieszczenie niektórych elementów poza regionem 2em dopełnienia, nie mogę sobie wyobrazić, dlaczego to nie byłoby bardziej efektywne rozwiązanie problemu.

Źródło

2012-12-13 23:01:55 FurryWombat

Konfigurowanie dopełnienie dla stron internetowych w urządzeniach mobilnych

Odpowiedz

Powiązane problemy