Jak uniknąć przewijania poziomego w internecie mobilnym dzięki elastycznemu projektowi strony internetowej?

Question

Mam elastyczną aplikację internetową. Aby uniknąć przewijania poziomego, napisałem następujący kod CSS:

html { 
    overflow-x: hidden; } 

Działa to dobrze na komputerach stacjonarnych, ale nie na urządzeniach mobilnych. Jeśli wyświetlam aplikację na urządzeniu mobilnym, aplikacja dostosowuje się dobrze. Problem polega na tym, że przewijam od prawej do lewej. Strona porusza się trochę. Chcę, aby strona nie poruszała się poziomo.

Edytuj:

Strona nie przewija na wszystkich urządzeniach mobilnych. Próbowałem go na dwóch urządzeniach z tą samą wersją Androida i tylko przewija na jednym z urządzeń.

Answer 1

Sprawdź wszystkie podkładki. Jeśli dodasz dopełnienie do czegoś o szerokości ustawionej na 100%, zostanie ono przeniesione poza obiekt nadrzędny.

Pokazany tutaj http://jsfiddle.net/wzZ3W/

Kod

<div id="fillX"> 
    <div id="childXFill"> 
    </div> 
</div> 

#fillX 
{ 
    background:red; 
    width:100%; 
    opacity:0.5; 
} 

#childXFill 
{ 
    background:blue; 
    width:100%; 
    padding:10px; 
    opacity:0.5; 
} 

Sprawdź również negatywny lewy i prawy margines na elementach, które obejmują stronę. Na przykład. http://jsfiddle.net/s7zrukj2/2/

Użyj również Resetowania CSS.

---

Jeśli wan't użyć overflow: hidden powinieneś ustawić go na elemencie ciała też. Podobnie jak

body, html { overflow-x:hidden; } 

Chociaż fakt, że coś jest przepełnione wskazuje na błąd w swoim elastycznym projektowaniu i należy spróbować rozwiązać go zamiast zapobiegać coś nie są widoczne dla użytkownika mobilnego.

Answer 2

Musisz upewnić się, że szerokość kontenera nadrzędnego nie jest szerszy niż rozmiar ekranu telefonu

Więc najlepiej jest użyć% szerokości do wszystkiego i zapewnić brak treści utrwalono że byłby większy niż rozmiar ekranu telefonu komórkowego

Answer 3

Jeśli nie działa na komórki należy użyć następującego tagu meta:

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

będzie ustawić szerokość do szerokości urządzenia.

Answer 4

Ustaw swój telefon rzutnię na nagłówku HTML

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

upewnić się, że hide de przelewowy

body, html { overflow-x:hidden; }