简单来说，我只说明在<head>的下面添加一行代码“<meta content='颜色/#颜色代码' name='theme-color'/>”。
-S-A-M-P-L-E-
详细说明如下
Blogger > 主题背景 > 修改HTML
搜寻“<head>”字眼。
在“<head>”的下面，添加以下框内的meta代码。
代码“ <meta content='#' name='theme-color'/> ”中的“#”处，是填入颜色代码和颜色名称的地方。
你可填充“#XXXXXX”在#处。
黑色“#212121”
保存模板，完成。
官方链接
想要参考更多，请根据官方详情：
点我！ 或链接地址：https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/
官方内容
By Paul Bakaus
< meta content='#' name='theme-color'/>
-S-A-M-P-L-E-
详细说明如下
Blogger > 主题背景 > 修改HTML 搜寻“<head>”字眼。< head >
在“<head>”的下面，添加以下框内的meta代码。 代码“ <meta content='#' name='theme-color'/> ”中的“#”处，是填入颜色代码和颜色名称的地方。 你可填充“#XXXXXX”在#处。
例子：
- 名称
< meta content='pink' name='theme-color'/>
- 代码
黑色“#212121”
< meta content='#212121' name='theme-color'/>
* 其他 html color code ( 不常见的颜色或许会没有哦）。
保存模板，完成。官方链接
想要参考更多，请根据官方详情：
点我！ 或链接地址：https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/
官方内容
图标和浏览器颜色
By Paul Bakaus
现代浏览器让您能够轻松地定制特定组件，如图标、地址栏颜色，甚至允许添加自定义磁贴等对象。这些简单的改进可提升吸引力，吸引用户再次访问您的网站。
提供出色的图标和磁贴
当用户访问您的网页时，浏览器会尝试从 HTML 提取图标。图标可能出现在许多地方，包括浏览器标签、最近的应用切换、新的（或最近访问的）标签页面等。
提供高质量的图像将使您的网站更具辨识度，让用户更容易发现您的网站。
为充分支持所有浏览器，您需要向每个页面的
<head> 元素添加几个标记。
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome 和 Opera
Chrome 和 Opera 均使用
icon.png，图标将被缩放到设备所需的大小。 为防止自动缩放，您还可以通过指定 sizes 属性另外提供尺寸。
注：图标大小应基于 48px，例如 48px、96px、144px 和 192px
Safari
Safari 还使用带有
rel 属性的 <link> 标记：apple-touch-icon。
您可以指定显式尺寸，即为每个图标提供单独的链接标记，防止操作系统调整图标的大小：
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
Internet Explorer 和 Windows Phone
Windows 8 的新主屏幕体验可支持 4 种不同固定网站布局，因此需要 4 个图标。 如果您不想支持特定尺寸，则可以省去相关的元标记。
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Internet Explorer 中的磁贴
Microsoft 的“固定网站”及其旋转的“动态磁贴”远远超越了其他实现方法，不在本指南的介绍范围内。 您可以在 MSDN 的如何创建动态磁贴中了解更多信息。
定义浏览器元素的颜色
使用不同的
meta 元素，您可以自定义浏览器，甚至自定义平台的元素。 请谨记，某些元素只能在特定平台或浏览器上使用，但是它们可以大大增强体验。
Chrome、Firefox OS、Safari、Internet Explorer 和 Opera Coast 允许您使用元标记来定义浏览器元素的颜色，甚至定义平台的颜色。
Chrome 和 Opera 的元主题背景色
要指定 Android 版 Chrome 的主题背景色，请使用元主题背景色。
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Safari 特定的样式
Safari 允许您设置状态栏样式和指定启动图像。
指定启动图像
默认情况下，Safari 在加载过程中显示空白屏幕，在多次加载之后会显示应用之前状态的屏幕截图。 要避免出现这种情况，您可以通过
rel=apple-touch-startup-image 添加一个链接标记，让 Safari 显示独特的启动图像。
例如：
<link rel="apple-touch-startup-image" href="icon.png">
图像必须为目标设备屏幕的特定尺寸，否则不会被使用。 请参考 Safari 网页内容指南了解更多详情。
尽管 Apple 的文档缺少此主题的内容，但开发者社区已想出一种针对所有设备的办法：使用高级媒体查询来选择相应的设备，然后指定正确的图像。以下是一个可行的解决方法，此方法由 tfausak 的 gist 提供
更改状态栏的外观
您可以将默认状态栏的外观更改为
black 或 black-translucent。 通过 black-translucent，状态栏浮在全屏内容的顶层，而不是将内容向下推。 这样使布局有更大高度，但有点遮挡顶层。 以下是所需的代码：<meta name="apple-mobile-web-app-status-bar-style" content="black">
 |
使用 black 的屏幕截图 |
 |
使用 black-translucent 的屏幕截图 |
让手机浏览器访问你的网页时，改变上栏的颜色
Reviewed by I'm grey
on
13.6.17
Rating:
Reviewed by I'm grey
on
13.6.17
Rating:
没有评论:
Thanks your comments(●′ω`●)