Hoy os mostraremos como conseguir cambiar el color del navegador cuando vemos nuestra web en dispositivos móviles.
Es una acción muy sencilla que consiste en añadir entre las etiquetas head de nuestro código HTML la meta etiqueta de nombre «theme-color».
Cada navegador interpreta la esta etiqueta de forma diferente por lo que tendremos que añadir varias líneas de código para cada uno de los principales navegadores.
Índice de contenidos:
<!– Chrome, Firefox OS y Opera –>
<meta name=»theme-color» content=»#fafafa»>
<!– iOS Safari –>
<meta name=»apple-mobile-web-app-status-bar-style» content=»#fafafa»>
<!– Windows Phone –>
<meta name=»msapplication-navbutton-color» content=»#fafafa»>
En Safari podemos conseguir que la barra de estado sea translucida o negra.
Con la opción translucida la barra de estado flotará sobre el contenido de tu web en lugar de desplazarlo hacia abajo, con lo que conseguiremos aportar más altura pero corremos el riesgo de tapar la parte superior de nuestra página.
<meta name=»apple-mobile-web-app-status-bar-style» content=»black-translucent»>
<meta name=»apple-mobile-web-app-status-bar-style» content=»black»>
¿Dónde añadir los códigos?
En Prestashop 1.7: al final del archivo header.tpl, que localizaréis en;
themes/plantilla/templates/partials/header.tpl
En Prestashop 1.6: en ela rchivo header.tpl entre las etiquetas <head> y </head>.
En WordPress: en el archivo header.php entre las etiquetas <head> y </head>.
Tienes más info sobre este tema en;
https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/?hl=es
