项目中用到的Meta标签相关的新内容

原创 潇洒先生 随笔 HTML/CSS 161阅读 2018-01-11 10:14:59 举报

1.
标签内容:<meta name="apple-mobile-web-app-status-bar-style" content="black">

可选值:
status-bar-style:default
status-bar-style:black
status-bar-style:black-translucent

作用:“apple-mobile-web-app-status-bar-style”当启动webapp功能时,显示手机信号、时间、电池的顶部导航栏的颜色。默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。这个主要是根据实际的页面设计的主体色为搭配来进行设置。

2.
标签内容:<meta name="apple-mobile-web-app-capable" content="yes">

可选值:
content: yes
content: no

作用:如果content设置为yes,则Web应用程序以全屏模式运行; 否则,它不。默认行为是使用Safari来显示网页内容。您可以使用window.navigator.standalone只读布尔JavaScript属性来确定网页是否以全屏模式显示。

3.
标签内容:<meta name="apple-mobile-web-app-title" content="AMUI React">

作用:添加启动图标标题在iOS上,您可以为启动图标指定一个Web应用程序标题。默认情况下使用<title>标签。要设置不同的标题,请在网页中添加元标记替换AppTitle你的标题

4.
标签内容:<link rel="apple-touch-icon-precomposed" href="i/app-icon72x72@2x.png">

作用: 这个link就是设置web app的放置主屏幕上icon文件路径。图片尺寸可以设定为5757(px)或者Retina可以定为114114(px),ipad尺寸为72*72(px),iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时,在手机HOME界面创建应用程序样式的图标。

5.
标签内容:<meta content="telephone=no" name="format-detection" />

作用:告诉设备忽略将页面中的数字识别为电话号码

6.
标签内容:<meta content="email=no" name="format-detection" />

作用:告诉设备忽略将页面中的数字识别为邮箱

7.
标签内容:<meta name="renderer" content="webkit">

作用:指定浏览器默认内核

可选参数:
content="webkit" webkit内核
content="ie-comp" IE兼容内核
content="ie-stand" IE标准内核

8.
标签内容:<meta http-equiv="Cache-Control" content="no-siteapp">

作用:这个是百度官方给的禁止转码声明。在网页中添加了这一条,百度就不会移动搜索中将网站转码,并呈现给移动端用户。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复