Margen derecho de representación del navegador iPhone/iPad/webkit

Tengo un fragmento de html debajo que se muestra perfectamente en todos los navegadores. Sin embargo, en el juego web de un iphone y ipad, cuando pellizco la página (para que sea más pequeña), veo un borde negro que es el color de fondo del cuerpo que brilla solo en el borde derecho. Esto solo ocurre cuando especifico el ancho del div .headerpic. Dado que este es el único lugar en el documento que especifico el ancho, me preguntaba por qué no llega a llegar al borde derecho (ya que teóricamente es la parte más ancha del documento).Margen derecho de representación del navegador iPhone/iPad/webkit

He adjuntado una foto de lo que parece desde mi ipad.

<!doctype html> 
<html> 

    <head> 

    <style> 
     body {background-color:#000;color:#231f20;margin:0;} 
     #wrapper {background-color:#fff;min-height:1000px;} 
     #header .headerpic {height:102px;padding-top:80px;margin:0 auto;width:986px;} 
     #footer {color:#fff;} 
    </style> 
    </head> 

    <body> 

    <div id="wrapper"> 
     <div id="header"> 
     <div class="headerpic"> 
     </div> 
     </div> 
    </div> 

    <div id="footer"> 
    </div> 

    </body> 
</html>

Photo Of problem

Fuente

2011-03-01 robzolkos

Se ilustrará su problema un poco claro: http://jsbin.com/ilenu5/5

Lo que hice:

he aumentado el ancho de la #headerpic a 1286px
añadí un color fondo de #headerpic , que es rojo

Entonces, su problema real es: se produjo un desbordamiento

¿Por qué? porque no se establece su viewport (width=device-width) y la anchura física mínima (en píxeles o cm o EM) de body, por lo que su anchura body por defecto es 980 px y heredado por #wrapper - para que su 986px #headerpic desborda los #wrapper y hace que aparezca tu fondo negro. Como el ancho del área desbordada es pequeño (986-980 = 6px), verá una línea negra.

Fuente

2011-03-01 18:32:10 vincicat

¡Gracias! Establecí el min-ancho del cuerpo en 986px y el problema se soluciona en iphone/ipad y no afecta a los navegadores normales. Gracias por tu ayuda. – robzolkos

De nada :) – vincicat

Supongo que esta es una buena explicación de por qué está ocurriendo el problema, pero para mí no parece traducirse en una solución. [Esta otra respuesta] (http://stackoverflow.com/a/15029243/199712) es lo que me solucionó. –

Haciendo #wrapperposition:absolute corrige el problema.

Fuente

2011-03-01 15:03:30 Alex

cierto, esto soluciona el problema en el iphone/ipad pero rompe el diseño en un navegador normal. – robzolkos

En mi caso usando:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

En lugar de:

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

hizo el truco!

Fuente

2013-02-22 16:53:51

Esto funcionó para mí. Parece que esta debería ser la respuesta aceptada. –

En mi caso esto:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

html, body {min-width:980px; overflow-x: hidden;}

soluciona el problema.

Fuente

2014-09-29 15:12:57 Starkadh

Aplicando

overflow-x:hidden;

a uno de mis divs lo hizo

Dando crédito a @starkadh por la inspiración.

Fuente

2016-03-12 18:00:32

Margen derecho de representación del navegador iPhone/iPad/webkit

Respuesta

Cuestiones relacionadas