android - google - 手機chrome手勢




如何在Lollipop的最新Chrome版本中更改標題欄和地址欄的顏色? (3)

尚未找到與此主題相關的任何內容。 我真的很喜歡在概述中更改地址欄顏色和標題顏色的功能嗎? 有沒有簡單的方法可以做到這一點?

我認為您需要Android 5.0 Lollipop才能正常運行,並且Chrome的“ 合併”標籤和“應用” 設置為。


例如,將背景設置為您喜歡的顏色/品牌顏色

將以下 元屬性 添加到 HEAD 節中的HTML代碼中

<head>
  ...
  <meta name="theme-color" content="Your Hexadecimal Code">
  ...
</head>

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

在下方圖片中,我剛剛提到了Chrome如何獲取主題色屬性

Firefox OS,Safari,Internet Explorer和Opera Coast允許您使用元標記為瀏覽器甚至平台的元素定義顏色。

<!-- Windows Phone -->
<meta name="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特定樣式

從指導 文件在這裡

隱藏Safari用戶界面組件

將apple-mobile-web-app-capable元標記設置為yes,以打開獨立模式。 例如,以下HTML使用獨立模式顯示Web內容。

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

更改狀態欄外觀

您可以將默認狀態欄的外觀更改為黑色或半透明。 對於黑色半透明,狀態欄浮動在全屏內容的頂部,而不是向下推。 這樣可以增加佈局的高度,但會阻礙頂部。 這是所需的代碼:

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

有關狀態欄外觀的更多信息, 請參閱apple-mobile-web-app-status-bar-style。

例如:

屏幕截圖使用黑色半透明

屏幕截圖使用黑色


您實際上需要3個 meta 標記來支持Android,iPhone和Windows Phone

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">

經過一些搜索找到了解決方案。

您需要在 <head> 中添加一個包含 name="theme-color"<meta> 標記,並將您的十六進制代碼作為內容值。 例如:

<meta name="theme-color" content="#999999" />




google-chrome