Bloque de centrado en cromo android

Tengo un problema extraño con la visualización de mi página web en Chrome móvil. Tengo un bloque centrado horizontalmente y se muestra muy bien en Chrome de escritorio, pero en Chrome móvil se adhiere al borde izquierdo de la página.

Después de algunas investigaciones me di cuenta de que hay "visor" móvil que es diferente del tamaño de la pantalla. Por lo tanto, no es una tarea simple tener algo centrado.

El marcado simplificado que estoy usando:

<body> <div class="block"> </div> </body>

Y el CSS:

 body { width: 100%; margin: 0; } .block { position: relative; width: 1024px; height: 768px; background-color: red; top: 44px; margin: auto; }

También he intentado centrar el bloque usando:

 left: 50%; margin-left: -512px; position: absolute;

Pero eso tiene el mismo efecto. También he intentado agregar viewport metatag:

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

Y tampoco ayuda. Mi dispositivo tiene una resolución de hardware de 1920×1080 y muestra la página con una anchura real de ~ 1200px o menos, pero el "ancho del dispositivo" es de 640px por defecto y si escala la página usando multitouch, mantiene el borde izquierdo en la posición inicial.

La mejor meta posible para mí sería tener la página fija en alguna resolución (1200px está muy bien y no requiere escala para mi tarea) y el bloque a centrar. Pero no veo la manera de establecer el "ancho del dispositivo" al tamaño del píxel de hardware real y bloquear la escala … (sé cómo bloquear la escala, pero no ayuda con la resolución y el centrado).

Un ejemplo de la página donde se puede reproducir fácilmente: http://37.48.93.204/androidtest.htm

Funciona muy bien en Chrome de escritorio, pero ha descrito problema en Android Chrome.

Suponiendo que usted está hablando de centrado horizontal:

La forma más fácil de centrar algo dentro de su contenedor, sería darle un ancho fijo, y luego usar el margin-left: auto; Y margin-right: auto; . Esto centrará el elemento dentro de su contenedor.

El mejor enfoque sería establecer un máximo de ancho y jugar con los márgenes tan pronto como el tamaño de la pantalla es lo suficientemente grande.

Cree una envoltura ancha con la imagen de fondo (centrada horizontalmente) y limite el contenido dentro de esa envoltura a un máximo de 1024px. A continuación, deje que cambie el tamaño cuando la pantalla es más estrecha entonces 1024px.

MANIFESTACIÓN

Ejemplo de código HTML

 <html> <head> <meta name="viewport" content="width=1224"> </head> <body> <div class="mainblock"> <div class="topside"> Top </div> <div class="content-wrapper"> <div class="content"> Content </div> </div> <div class="bottomside"> Bottom </div> </div> </body> </html>

Ejemplo de código CSS

 body { width: 100%; margin: 0; } .mainblock { max-width: 1024px; width: 100%; height: 768px; margin: 0 auto; } .content-wrapper { background: url('http://lorempixel.com/1224/768/') no-repeat 50% 0; display: block; position: relative; max-width: 1024px; padding: 0; } .content { background: salmon; box-sizing: border-box; min-height: 768px; padding: 0; max-width: 1024px; width: 100%; } .topside, .bottomside { max-width: 1024px; height: 50px; background-color: blue; margin: 0 auto; } @media only screen and (min-width: 1024px) { .mainblock, .content-wrapper { max-width: 1224px; } .content { margin: 0 auto; width: 1024px; position: relative; z-index: 2; } }

Editar:

También agregue la etiqueta de meta de restablecimiento de la vista a la sección principal de su código HTML:

 <meta name="viewport" content="width=1224">

Editar 2:

Creó una nueva demo ( http://codepen.io/anon/pen/dPzJPX ) y actualizó la respuesta inicial.

Para ajustar la página correctamente en los dispositivos con una resolución diferente, debe utilizar las consultas de medios CSS . De esta manera usted puede hacer que los tamaños de sus elementos dependan del tamaño de la pantalla. Por ejemplo:

 /* normal desktop */ .block { width: 1024px; } @media only screen and (max-width: 1023px) /* notebook */ { .block { width: 800px; } } @media only screen and (max-width: 793px) /* tablet */ { .block { width: 600px; } } @media only screen and (max-width: 479px) /* old smartphone */ { .block { width: 400px; } }

En cuanto al centrado, es una mala práctica para engañar a los píxeles exactos como usted trata de hacer. Existen métodos de centrado más universales y fiables, como el diseño basado en tablas o el modelo de cajas flexibles. Para más información lea el artículo Centrado vertical de elementos en HTML .

Cada dispositivo y navegador tiene un agente de usuario, puede hacer reglas específicas sólo para el navegador cromo android. Este es un ejemplo de lo que estoy hablando:

 <script type="text/javascript"> $(document).ready(function() { var userAgent = navigator.userAgent; var cssIosURL = '<link href="${contextPath}/css/ios.css" rel="stylesheet">'; var cssNativeAndroidURL = '<link href="${contextPath}/css/nativeAndroid.css" rel="stylesheet">'; var cssAndroidChromeURL = '<link href="${contextPath}/css/androidChrome.css" rel="stylesheet">'; if (userAgent.indexOf('Mac OS') >= 0) { if (userAgent.indexOf('Mobile') >= 0) { $('head').append(cssIosURL); } } if (userAgent.indexOf('Android') >= 0) { if ((userAgent.indexOf('Firefox') < 0) && (userAgent.indexOf('Chrome') < 0) && (userAgent.indexOf('Opera') < 0)) { $('head').append(cssNativeAndroidURL); } else { $('head').append(cssAndroidChromeURL); } } }); </script>

Yo recomendaría cambiar su CSS para que sea así para el bloque:

 .block { position: absolute; width: 200px; height: 200px; background-color: red; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; }

Sea cual sea el ancho de su contenedor, haga que el margin-left igual a la mitad del width .

Mi código anterior, se centrará horizontal y verticalmente en la página.

Así: http://jsfiddle.net/6x3a4uaL/

Acabo de comprobar Chrome en mi teléfono Android y funciona bien en la página jsFiddle.

Para centrar su objeto "bloquear", puede probar esto:

 .block { display: block; margin: 0 auto; width: 30em; height: 60em; background-color: red; }

En caso de que no lo haya hecho, trate de usar la etiqueta <center></center> . Sé que se interrumpe, pero vale la pena intentarlo. Además, en lugar de margin: auto try margin: 0px auto .

CSS

 body { width: 100%; margin: 0; } .block { display: flex; position: relative; width: 1024px; height: 768px; background-color: red; top: 44px; margin: auto; }

HTML

  <div class="block"> </div>

Echa un vistazo a la propiedad flex de CSS

No veo el punto de tener en el cuerpo 100% de ancho. Debe proporcionar más información o contexto sin embargo.

He intentado algo http://jsfiddle.net/c5afz9b1/

width: 100%; extraído width: 100%; De cuerpo
Para probar, coloque bordes en ambos lados del bloque para ver si está centrado o no. Y parece que está funcionando.
Dependiendo de su contexto, intente poner overflow: hidden en el cuerpo.

Si usted proporciona más información que sería útil para nosotros.

http://jsfiddle.net/t178r76n/2/

Este JSF es algo que necesito que mires. Esencialmente he cambiado algún código para ser más flexible basado en lo que usted está proporcionando.

Ahora el bloqueo principal es tu elemento primario …

 .mainblock { width: 1024px; height: 768px; position: relative; max-width: 100%; max-height: 100%; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

Necesito su entrada en esto sin embargo … Necesito saber si estoy en el campo de la izquierda o el redondeo casero.