Doubt with theme-color, change the color of the browser

Question

Doubt with theme-color, change the color of the browser

Navigation

#1 by (1 votes)

1

After accessing the mobile phone, I did not notice that it changed the color of the browser, nothing changed, using safari on ios or Android, was something missing? I made the inclusion in my head:

<!--mudar a cor do navegador -->
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#FFFFFF" />
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#FFFFFF" />
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

html5 css

asked by anonymous 26.06.2017 / 03:01

1 answer

How do I store 2 SQL queries in a single variable? PHP Store Image in variable

score 1 · Answer 1

For example, to set the background for a color color

Add Meta property to your HTML in HEAD

<head>
  ...
  <meta name="theme-color" content="Seu Código Hexadecimal">
  ...
</head>

Example

<head>
  ...
  <meta name="theme-color" content="#444444">
  ...
</head>

Underneath the image, I just mentioned how Chrome got its theme color property

FirefoxOS,Safari,InternetExplorerandOperaCoastallowyoutosetcolorsforbrowserelementsandeventheplatformusingmetatags.

<!--WindowsPhone--><metaname="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Safari specific style

For more details Documentation here

Hiding the Safari UI Components

Set the meta-tag compatible with the Apple-mobile-web-web application to yes to enable stand-alone mode. For example, the following HTML displays web content using standalone mode.

<meta name="apple-mobile-web-app-capable" content="yes">

Changing the appearance of the status bar

You can change the appearance of the default status bar to black or black-translucent. With black-translucent, the status bar floats above the contents of the full screen, instead of pressing it. This gives the layout greater height, but obstructs the top. Here is the required code:

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

For more information about the appearance of the status bar, see apple-mobile-web-app-status-bar-style.

For example:

Screenshot using black-translucent

Screenshotusingblack