Aquí es el sitio en cuestión: www.prestigedesigns.com100% anchura de emisión Css sólo en Safari Mobile
El problema es que mi cabecera y el pie de página no se estirarán a su asignado 100%, pero sólo en el iPhone/IPAD.
He intentado lo que creo que es todo y realmente podría necesitar ayuda? ¿Hay alguien más que tenga un problema similar?
Gracias.
Es una especie de un tema de visualización con Safari móvil, pero se puede obtener el mismo efecto por la reducción de la anchura de la ventana del navegador de escritorio y el desplazamiento a la derecha, verá su fondo comienza a abandonar los estudios.
Esto es porque cuando se está configurando width:100% a sus #top y #header divs, usted les está diciendo a cambiar el tamaño de la anchura del elemento contenedor, que en este caso es la ventana del navegador, (o ventana). No les está diciendo que cambien el tamaño del contenido dentro.
El ancho de la ventana gráfica predeterminada de Mobile Safari es 980px, por lo que usa 980px como el ancho del elemento contenedor para sus divs. Esta es la razón por la cual su disposición, que está alrededor de 1050px, está cortando su fondo.
Puedes solucionar este problema de Safari móvil directamente mediante el establecimiento de su ventana (leer Apple's Docs), o mediante la adición min-width:ancho de su diseño en píxeles; a su body. Mobile Safari usará el valor min-width para establecer su ventana gráfica, y también evitará que esto suceda en los navegadores de escritorio también.
no está asignado width: 100% el encabezado está recibiendo width: 1009px; lo mismo que con el pie de página.
hey David. ¿Cómo está obteniendo el encabezado 1009px? estoy confundido. porque si ese fuera el caso, se mostraría en los navegadores de escritorio en ese px. pero no lo es. eso es lo que estoy confundido acerca de – george
parece que lo leí mal, su página no parece funcionar muy bien en safari. mi suposición es la forma en que la cabeza está anidada en el encabezado. es más que probable que tenga un problema de ventana con el iphone –
que se ve bien en mi navegador Safari de escritorio (mac). puede ser un problema de ventana. me está volviendo loco – george
Solo una corazonada ya que no puedo probarlo, pero el elemento de pie que tiene dentro de la barra de pies tiene un ancho absoluto en píxeles mientras la barra de pies está configurada en% - lo mismo con su elemento de encabezado - intente cambiar estos a% también?
de hecho, como dice David arriba, el encabezado no tiene asignado un 'ancho: 100%;' en absoluto – allanmayberry88
estoy confundido mi CSS tiene un contenido div #top establecido en 100% y luego que contiene div #topbox establecido para mantener los elementos superiores centrados en la página dentro del ancho de 1024px del pie de página/encabezado – george
#top está siendo reemplazado por otro estilo, intente! importante donde el ancho es 100% –
Configure la ventana gráfica para adaptar su página en cualquier dispositivo.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Perfecto, gracias! –
Establezca min-width:(Width of your design)px; en un archivo CSS y este problema estará resuelto.
Gracias walter. Lo aprecio y ahora se ve bien en iPhone/iPad. – george
Gracias! body {min-width: 980px} soluciona este problema. –
thx por esto ... estaba reventando mi cabeza. – chris