iphone - como - habilitar cookies en ios 12

Cambia el color de la barra de estado de iOS 7 en Safari y Chrome

Question

Quiero cambiar el color de la barra de estado de iOS 7 en Safari y Chrome. Estoy trabajando en una aplicación web móvil y me gustaría que se sintiera nativa y ahora mismo, solo obtengo una barra de estado blanca.

Answer 1

Actualización 3

minimal-ui se eliminó en iOS 8 :( Más información aquí: iOS 8 eliminó la propiedad de la ventana gráfica "ui-minimal", ¿existen otras soluciones de "pantalla completa suave"?

Actualización 2

Un error diferente ahora aparece en iOS 7.1. No importa en qué content esté configurado, e independientemente del background-color de background-color de la página, la barra de estado siempre es transparente cuando el usuario agrega la aplicación web a la pantalla de inicio. Vea la demostración here .

Tenga en cuenta que iOS 7.1 introdujo una nueva etiqueta llamada minimal-ui , que ayuda a ocultar el navegador Chrome en Mobile Safari, pero no hace nada cuando se agrega a la pantalla de inicio. Más detalles here .

Actualizar

Todavía un error en 7.0.4.

Parece que hay un error a partir de iOS 7.0.3.

No tener <meta name="apple-mobile-web-app-status-bar-style"> definido o definirlo como content="default" = fondo negro con texto en negro.

content="black" = fondo negro con texto en blanco.

content="black-translucent" = fondo negro con texto blanco si el fondo del lienzo no es blanco puro ( FFF ). O fondo translúcido con texto negro si el fondo es blanco.

Cualquier otro valor de content como el white no funciona y se exhibe el comportamiento default .

Confirmado por esta referencia: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

Answer 2

Estoy usando esto mientras que ios tiene el error mencionado en otras respuestas.

Primero establezco la barra de estado con esto:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Para mí, eso pone el texto en blanco y el fondo transparente. También flota sobre mi contenido.

Luego tengo el siguiente css:

body{
    background:#dddddd;
}
body:before{
    display: block;
    content: " ";
    height:20px;
    top: 0;
    background:rgba(0,0,0,0.8);
    position:-webkit-sticky;
    position:sticky;
}

Con este enfoque tengo un fondo oscuro en mi barra de estado con algo de transparencia.

No he probado esto con ios6 y probablemente se romperá una vez que Apple corrija el error. También se ve un poco apagado cuando se desplaza hacia la parte superior y el efecto de rebote mueve el fondo desde debajo de la barra de estado.

Aún así, es una solución bastante fácil por ahora y sobre todo CSS.

Answer 3

He estado buscando una manera de hacer lo mismo. Las únicas opciones que he visto hasta ahora involucran el uso de una de estas tres etiquetas meta en el documento html.

<meta name="apple-mobile-web-app-status-bar-style" content="default">

<meta name="apple-mobile-web-app-status-bar-style" content="black"> Esto hace que la barra de estado sea negra y empuja el contenido debajo de la barra de estado.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> Esto hace que el contenido vaya detrás de la barra de estado.

Answer 4

Puedes afectar el tinte de la barra superior en safari cambiando el color de fondo del cuerpo

body { background-color: blue; /* for the tint */ background-image: linear-gradient(to bottom, green 0%, green 100%); /* for the body */ }

a través de http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review