2013-04-08 9 views
13

Pracuję nad wersją iPhone'a strony opartej na Wordpress i zastanawiałem się, czy istnieje jakakolwiek metoda wyłączenia przewijania w poziomie, gdy strona jest otwarta w Safari na iPhone'a. W tej chwili jestem w połowie rozwoju i po prostu sprawdzam, czy mogę wyłączyć przewijanie w poziomie, ukryłem którykolwiek z elementów, który przekraczał szerokość ekranu, ale wciąż mogę przewijać poziomo w prawo. Próbowałem oddanie następujący kod wewnątrz <style> znaczników w <head> ale to nie pomogło:Wyłączanie przewijania poziomego na stronie iPhone'a

body {overflow-x: hidden; }

mam umieścić następujący kod <meta> wewnątrz pliku głowie echo gdy użytkownik przegląda stronę z iPhone, ale to tylko wyłącza użytkownika szczypanie to znaczy nie można powiększyć i pomniejszyć poprzez szczypanie ekranu.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 

Obecnie używam iPhone 4, aby sprawdzić na stronie internetowej oraz na stronie internetowej można uzyskać wchodząc na ten link: http://ignoremusic.com. Czekam na rozwiązanie od was, dzięki.

ROZWIĄZANIE: Jak sugeruje @Riskbreaker, było kilka elementów, które przekraczają szerokość ~ 312px dlatego mogłem nadal przesunięcie w lewo i po regulacji szerokości wszystkich tych elementów, I wyłączono przewijanie w poziomie. Jedną z rzeczy, których się dowiedziałem, jest to, że ukrywanie przepełnienia-x nie pomaga w przypadku iPhone'a/iPada, musisz zmniejszyć szerokość wszystkich elementów do szerokości ekranu , inaczej będziesz nadal móc przesuwać w poziomie.

+0

tak jak w sekcji "rozwiązanie" - czy istnieje sposób na wymuszenie wyłączania przewijania poziomego, jeśli są elementy poza ekranem? –

Odpowiedz

9

dodawania przelewa na swoim ciele tak:

body { 
     font: 12px/20px "Helvetica neue", Helvetica, Arial, sans-serif; 
     font-weight: normal; 
     overflow: hidden; 
     overflow-y: auto; 
     } 

I tak pozostanie z tego:

<meta name="viewport" content="width=device-width"> 
+0

Dziękuję za odpowiedź, ale dodanie kodu CSS nie zadziałało, nadal mogę przewijać w poziomie. –

+1

dodajesz to do style.css lub do głównego css? Również niektóre z css są ignorowane w twoim responsywnym w ten sposób: '#headertop {width: 980px;}' .... który robi poziome przesunięcie ... tylko jeden przykład, który musi najpierw naprawić ... – Riskbreaker

+0

aby sprawdzić, czy to zadziała, dodałem go wewnątrz znacznika , używając tagów