disabilita lo scorrimento orizzontale sul Web mobile

Question

Ho riscontrato un problema per cui su alcuni telefoni del mio sito vengono visualizzati degli scroll orizzontali. Ho provato a mettere overflow-x: nascosto ma non funziona. La larghezza è automatica, in modo tale da ridimensionare automaticamente il web in base alle dimensioni dello schermo. Tutti gli altri telefoni vanno bene, tranne quando visualizzati in BlackBerry, Nokia E52 e Windows Mobile, apparirà lo scroll orizzontale.

Qualche consiglio? Grazie!

Answer 1

Per me, il metatag viewport in realtà ha causato un problema di scorrimento orizzontale sul Blackberry.

Ho rimosso content="initial-scale=1.0; maximum-scale=1.0; dal tag viewport e ha risolto il problema. Qui di seguito è la mia tag finestra corrente:

<meta name="viewport" content="user-scalable=0;"/> 

Answer 2

Usa <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" /> al fine di impostare la larghezza di larghezza del dispositivo.

Answer 3

So che questa è una vecchia domanda, ma vale la pena notare che BlackBerry non supporta overflow-x o overflow-y.

Vedi il mio post here

Answer 4

ho trovato questa risposta over here on stackoverflow che funziona perfettamente per me:

uso questo in stile

body { 
    overflow-x: hidden; 
    width: 100%; 
} 

Usare questo nel tag head

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 

Una mia piccola aggiunta nel caso in cui il tuo corpo abbia imbottitura (per evitare che il dispositivo di scala al contenuto-corpo scatolare, e quindi ancora aggiunta una barra di scorrimento orizzontale):

body { 
    overflow: hidden; 
    width: 100%; 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

Answer 5

Uso questo per rendere l'utente ancora in grado di ingrandire e ridurre:

<meta name="viewport" content="width=device-width;" /> 

Answer 6

html, body { 
    overflow-x: hidden; 
} 
body { 
    position: relative 
} 

Basta aggiungere questo CSS

Answer 7

ho avuto lo stesso problema. Aggiunta massima scala = 1 fissa esso:

OLD: <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

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

P.S. Inoltre ho usato virgole tra i valori. Ma sembra funzionare anche con il punto e virgola.