Ciało strony internetowej renderujące prawy biały margines w iPhonie Safari

Mam błąd renderowania w tej witrynie, którego nie widziałem nigdzie indziej. Witryna wyświetla się we wszystkich nowoczesnych przeglądarkach i sprawdza poprawność, mimo że nie wiem, dlaczego nie wyświetla pełnego obrazu tła (zobacz poniższe zrzuty ekranowe). Używam Yahoo CSS Reset i obraz tła jest zadeklarowana w ciele jak ten:Ciało strony internetowej renderujące prawy biały margines w iPhonie Safari

background: url("back.jpg") #033049;

można również odwiedzić stronę internetową: http://xaviesteve.com/

enter image description here

Daj znać czy powinienem podać więcej szczegółów. Każda pomoc/podpowiedź jest doceniana, dziękuję.

EDIT

znalazłem bardzo mało zgłoszenie tego problemu w całym internecie ludzi:

siebie tak pytanie: White space showing up on right side of page when background image should extend full length of page Sugerowane zastosowanie overflow-x:hidden ale przycina internetowej.
w forum iPad: http://www.ipadforums.net/ipad-development/9954-mobile-safari-doenst-show-background-image-when-page-slided-left.html Nie odpowiada

ROZWIĄZANIE

Byłem bada i próbuje różnych sposobów, aby rozwiązać ten problem i okazało się, że dodanie obraz tła do znacznika <html> naprawiono problem. Mam nadzieję, że zaoszczędzi to trochę czasu innym twórcom.

Przed

body {background:url('images/back.jpg');}

html, body {background:url('images/back.jpg');}

Źródło

2011-04-27 Xavi Esteve

Przesuwanie stylizacji do elementu html działa dobrze, ale istnieją inne sposoby mocowania tego.

To, co się tutaj dzieje, to początkowo element bryłowy jest wymiarowany zgodnie z rzutnią. Jeśli szerokość ekranu wynosi tylko X pikseli, twoje ciało będzie miało tylko X pikseli szerokości, nawet jeśli zawartość jest szersza. Aby rozwiązać ten problem, nadaj swojej body (lub innej osobie, do której chcesz dodać stylizacje tła) opartą na braku procentu width lub min-width, aby dopasować ją do treści.

Rzeczywiście dostajesz ten sam problem w przeglądarkach na komputerze, zawężając okno przeglądarki i przewijając w prawo. Problem jest bardziej zauważalny na iPhonie/iPadzie, ponieważ domyślnie Mobile Safari ustawi okno podglądu na 980px, a następnie pomniejszać, aż cała zawartość pasuje do ekranu.

Alternatywnym rozwiązaniem, którego nie polecam, ponieważ działa tylko dla Mobile Safari jest ustawienie rzutni Szerokość samodzielnie za pomocą:

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

Więcej informacji na Apple's Developer Docs.

Źródło

2011-04-27 18:28:00

Dzięki Walter! min-width jest do zrobienia, szczególnie na stronach internetowych, gdzie szerokość powinna wynosić 100% –

Dzięki, to uratowało mi życie. – zbrox

Żadne z tych rozwiązań rozwiązać mój problem, ale okazało się dość prosta. Wystarczy ustawić background-size swojego bg ekwiwalent kontenera do wymiarów obrazu, tak:

body { 
    background-image: url(bg.jpg); /* image dimensions: 1920 x 3840 */ 
    background-size: 1920px 3840px; 
}

Chociaż może to wydawać się nieco zbędny i nie tak dobre, jak tworzenia witryny reaguje, to działa dobrze.

Źródło

2012-03-09 18:59:06

wiem, że to jest już odpowiedział jakiś czas temu, ale żadna z poprawek ja znaleźliśmy pracował dla mnie, ale udało mi moje własne rozwiązanie, które powinny pracować dla większości ludzi mi wyobrazić.

Oto mój kod:

html { background: url("../images/blahblah.jpg") repeat-y; min-width: 100%; background-size: contain; }

Mam nadzieję, że ktoś pomoże!

Źródło

2012-04-19 03:23:01 Michael

Właśnie wpadł na ten problem i naprawić go, ustawiając wszystkie treści, które wykorzystuje width: 100%; mieć również ustawioną minimalną szerokość większą niż szerokość twoich elementów div. na przykład:

.content_bg{width:100%; min-width:1080px;}

ja też naprawić go na urządzeniach mobilnych z wykorzystaniem zapytań mediów: dla iPhone i iPad:

/*ipad portrait*/  
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { 
     body{width:1080px;} 
    } 

/*ipad landscape*/  
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { 
     body{width:1080px;} 
    } 

/* iPhone [portrait + landscape] */ 
@media only screen and (max-device-width: 480px) { 
     body{width:1080px;} 
    }

Źródło

2012-07-10 17:57:23 Cassie

tak naprawdę nie potrzebujesz zapytań o media, jeśli posiadasz zestaw min-width – Cassie

Set background-size na 100% i background-position do lewego górnego . Będzie działać poprawnie:

background-color: #336699; 
background-image: url('whatever.jpg'); 
background-repeat: no-repeat; 
background-position: top left; 
background-attachment: fixed; 
-webkit-background-size: 100%; 
-moz-background-size: 100%; 
-o-background-size: 100%; 
background-size: 100%;`enter code here`

Źródło

2013-08-04 15:08:41

Ciało strony internetowej renderujące prawy biały margines w iPhonie Safari

Odpowiedz

Powiązane problemy