Sitio web responsivo en iPhone-espacio en blanco no deseado en girar de paisaje a retrato

Tuve el mismo problema, lo arreglé estableciendo:

html, body { width:100%;  overflow:hidden; }

Este problema se produce cuando el ancho de cualquier división es mayor que el ancho de la pantalla del iPad.

En mi caso, algunas divisiones tenían un tamaño de 1000px, así que simplemente elegí width:auto y funciona. overflow-x:hidden también hace lo mismo, pero no es una forma preferida.

No tengo un iphone para probar esto, pero me he encontrado con algo similar con sitios web que he creado en el pasado. En mi caso es porque había un error en safari móvil que se metió con la escala al ir de puerto a tierra.

El siguiente código lo arregló para mí (no puedo recordar de dónde lo obtuve en este momento)

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
        document.body.addEventListener('gesturestart', function() {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}

Usar "overflow-x: hidden" resuelve parte del problema, pero atornilla el pergamino, actuando con comportamientos extraños (como dijo Jason).

A veces, la parte más difícil es descubrir qué está causando el problema. En mi caso, después de unas horas, si se encontró que el problema estaba en Bootstrap de Twitter:

Si estás usando Bootstrap de Twitter con zonas de "grupo de control" para tus formularios, el problema podría estar ahí. En mi caso resolví el problema con:

.control-group .controls {
     overflow-x: hidden
 }

Ahora el espacio en blanco en la derecha se había ido:)

Me gustaría agregar a la solución de Navneet Kumar porque funcionó para mí. Cualquier etiqueta div con un estilo de ancho=100% no puede tener también relleno izquierdo o derecho. Los navegadores móviles (noté el problema en los dispositivos iPhone y Android) interpretan el div como que tiene un ancho superior al 100%, creando así el espacio adicional en el lado derecho. (Sabía esto con respecto a anchos fijos, pero no anchos porcentuales.) En su lugar, use width = auto junto con padding.

Sé que ha pasado un tiempo desde que se abrió este tema, pero me encontré con una situación similar y descubrí que era porque tenía un elemento con las siguientes propiedades right: -999999px; position: absolute; ocultas fuera de la pantalla.

Cambiar lo anterior a left: -999999px; position: absolute; resolvió el mismo problema que tenía el OP (pantalla blanca a la derecha y posibilidad de deslizar hacia la derecha).

Estoy usando Bootstrap 3.3. Probé todas estas soluciones, y nada funcionó. Luego, cambié mi <div class="container"> a <div class="container-fluid"> en la sección con la que tenía problemas. Esto resolvió el problema.

Probé todo lo que se ha sugerido aquí, nada funciona. Luego he relizado que se conecta con la escala de la página. Entonces agregué <meta name="viewport" content="width=device-width, initial-scale=1.0"> al encabezado.php en la carpeta de mi tema principal y ' s problema solucionado.

Parece que los resultados varían para diferentes circunstancias, pero a nivel de todo el sitio

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

Parece haber funcionado para mí!

Fijo! Tenía un problema similar. Solucionado estableciendo el ancho a un ancho de dispositivo actual.

body, html {
  max-width: 100vw;
  margin: 0 auto;
  overflow-x: hidden;

}

RESUELTO ¡¡

Desde la instalación de protostar joomla plantilla 3.X y empezar a añadir contenido en el módulo K2 Me di cuenta de que scroll molesto con un espacio en blanco en el lado derecho, visible especialmente en iphones.

Se dio una respuesta parcial correcta para Eva Marie Rasmussen, agregando a la etiqueta body en la plantilla de archivo.css estos valores:

width: auto;
overflow-x: hidden;

Pero esta solución es solo parcial. Buscar clase div o etiqueta que está causando este problema y una vez detectado añadir a esa clase en el archivo templete.css los mismos valores:

width: auto;
overflow-x: hidden;

En mi caso agregue a la clase "span" estas dos líneas para finalmente verse así:

[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
width: auto;
overflow-x: hidden;

Y su funcionamiento ahora ¡¡