iphone - parental - Fondo de iPad para bloques div que no abarca todo el ancho de la pantalla

olvide mi codigo de restricciones iphone 5

Question

Tuve un problema continuo con bloques div que se extienden a lo largo de todo el ancho de la pantalla de mi iPad. Parece detenerse unos 20 píxeles desde el lado derecho de la pantalla.

Capturas de pantalla:

Para el menú, tengo un bloque div y un UL adentro para el menú en sí. El ancho de UL se establece en 1000px y el bloque div de fondo se establece en ancho: 100%; El ancho de este fondo es exactamente 1009px.

El pie de página es un bloque div con el fondo y dos bloques div flotantes. El ancho del fondo para esto es exactamente 1004px.

He tenido este problema en otros sitios web, específicamente en esta área. ¿Alguien tiene alguna idea?

Answer 1

¿Qué sucede si intenta usar la metaetiqueta de la ventana gráfica para establecer el ancho de la ventana gráfica en el ancho del dispositivo?

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

Fuente: Mozilla Developer Network

Answer 2

Agregar en la cabeza de tu página

<meta name="viewport" content="width=1000px">

Funciona para todos los navegadores en el ipad, no solo para safari

Answer 3

El ancho de la pantalla del iPad, cuando se habla en modo horizontal, es 1024 píxeles, no 1004.

Answer 4

Está viendo el problema en el iPad porque su ventana gráfica predeterminada es de 980 píxeles (consulte los documentos de Apple ). Por lo tanto, el efecto que está viendo es el mismo que si reduce el navegador de su computadora de escritorio a menos de 1000 píxeles y se desplaza hacia la derecha (hace lo mismo).

Notarás que el tamaño de la brecha cambia dependiendo del ancho de la ventana del navegador. Esto se debe a que cuando configura ancho: 100% para sus divisores de envoltura, le está diciendo que cambie el tamaño del ancho del elemento contenedor, que en este caso es la ventana del navegador o la ventana gráfica del iPad. No les está diciendo que cambien el tamaño del contenido dentro.

La solución de @ sandeep es la correcta, y la forma en que la implementó funciona bien para mí en Safari pero no en ningún otro navegador en el que lo intente. ¿Es usted agente de usuario husmeando para servir el código solo a Safari? Si es así, no hay necesidad, solo puede aplicar el min-width:1024px , o incluso solo el min-width:1000px a la etiqueta de su body , o .footerbg sin embargo, normalmente aplica CSS.

Answer 5

He echado un vistazo a su sitio web, el problema no está solo en el iPad sino también en la versión de PC porque cuando el desplazamiento horizontal está en la PC, la página se comporta de la misma manera que en la versión de iPad. Compruébalo.

Solución: solo escriba lo siguiente en su cuerpo:

body{
 min-width:1024px;
}

Answer 6

Si usted / alguien necesita arreglar solo en iPads, puede hacer

<?php if ((bool) strpos($_SERVER[''HTTP_USER_AGENT''],''iPad'')): ?>
    <meta name="viewport" content="width={{YOUR PREFERED WIDTH FOR IPAD}}">
<?php else: ?>
    <meta name="viewport" content="width=device-width">
<?php endif ?>

Espero que esto ayude :)

Answer 7

Tienes el tamaño de ancho incorrecto. Pero no hay necesidad de preocuparse. Solo necesita tener 1024 en lugar de 1004.

¡Espero que esto ayude!

Answer 8

esto funciona

<meta name="viewport" content="width=1003, initial-scale=1, maximum-scale=1">