為什麼有些網站在chrome上能夠讓狀態欄變色而絕大部分網站不可以?

//經@NovaDNG 指正,這個是狀態欄變色,是由網頁一行代碼決定,google也有詳細介紹https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android?hl=en

在安卓chrome瀏覽器上發現一些網站可以使chrome開啟沉浸模式,十分美觀,但又不是所有的網站都能開啟這個模式,想知道這個的原理是什麼,網站需要什麼優化才能開啟沉浸?還是chrome會自己選取一個主題色?而且我發現就算是一個網上有些頁面可以沉浸,有些頁面不能。

沉浸樣式如圖:

還有其他很多的網站也能開啟沉浸,見我另一個答案為什麼手機chrome瀏覽器沒有沉浸模式? - 野比小丸子的回答。而且有些網站有些頁面能開啟,有些頁面不能,所以想知道這到底是網站決定還是有chrome自己決定?

這是沉浸下的:

同一網站不同頁面不沉浸下的:


瀉藥。

評論裡面 @NovaDNG 已經說得挺準確了,我就直接給一個例子吧。

在要變色的網頁&裡面,加一個meta標籤即可。

例如:

&

寫個簡單的例子:

&
&
&
&

&
& Hello,World! & &

&

換成你要替換的RGB顏色即可。

用手機Chrome訪問一下,你就會看到通知欄變色了。

PS:Material Design 的配色,可以去Material Design Color Palette Generator這裡來查找,自己搭配。


推薦閱讀:

現在哪些手機廠商操作系統還有二級菜單(應用抽屜)?

TAG:GoogleChrome | 網頁設計 | GoogleNexus | AndroidUI | MaterialDesign |