Come evitare lo scroll orizzontale sul Web mobile con il web design reattivo?

Question

Ho un'applicazione web adattabile. Per evitare lo scroll orizzontale ho scritto il seguente codice CSS:

html { 
    overflow-x: hidden; } 

Questo funziona bene sul desktop, ma non sul cellulare. Se visualizzo l'app su un dispositivo mobile, l'app si adatta correttamente. Il problema è quando faccio scorrere da destra a sinistra. La pagina si muove un po '. Voglio che la pagina non si muova orizzontalmente.

Edit:

La pagina non scorre su tutti i dispositivi mobili. L'ho provato su due dispositivi con la stessa versione di Android e scorre solo su uno dei dispositivi.

Answer 1

Controllare tutti i paddings. Se aggiungi padding a qualcosa con larghezza impostata al 100%, esso andrà al di fuori del genitore.

mostrata qui http://jsfiddle.net/wzZ3W/

Codice

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

Anche controllare sinistra negativa e margini destro su elementi che si estendono nella pagina. Per esempio.

Inoltre, utilizzare un reset CSS.

---

Se wan't di utilizzare overflow: hidden probabilmente si dovrebbe impostare sull'elemento corpo troppo. Come così

body, html { overflow-x:hidden; } 

Anche se il fatto che qualcosa è traboccante indica un errore nella progettazione reattivo e si dovrebbe cercare di risolvere il problema invece per evitare qualcosa di non essere visibile ad un utente mobile.

Answer 2

Sarà necessario assicurarsi che la larghezza del contenitore principale non è più ampia rispetto alle dimensioni dello schermo cellulare

Quindi cosa migliore da fare è quella di utilizzare% larghezze per tutto e per garantire l'assenza di contenuto è fissato con che sarebbe stato più grande di una dimensione dello schermo mobile

Answer 3

Se non funziona per i dispositivi mobili è necessario utilizzare il seguente meta tag:

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

questo imposterà la larghezza a larghezza del dispositivo.

Answer 4

impostare la vostra finestra mobile sul tuo intestazione html

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

Assicurarsi che il nascondere de trabocco

body, html { overflow-x:hidden; }