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.
Cambiar el color del navegador en Android
<!– Chrome, Firefox OS y Opera –>
<meta name=”theme-color” content=”#fafafa”>
Cambiar el color del navegador en iOS
<!– iOS Safari –>
<meta name=”apple-mobile-web-app-status-bar-style” content=”#fafafa”>
Cambiar el color del navegador en Windows Phone
<!– Windows Phone –>
<meta name=”msapplication-navbutton-color” content=”#fafafa”>
Cambiar el color del navegador en Safari
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
