移动端Web Meta标签
在介绍移动端特有 meta 标签之前,先简单说一下 HTML meta 标签的一些知识。
meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name)。
http-equiv:
该枚举的属性定义,可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。
最常见的大概属于
Content-Type
了,设置编码类型。如<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
H5中可以简化为
<meta charset="utf-8">
http-equiv常见还有其它如下等(合理使用可增加 SEO 收录)。
- Content-Language : 设置网页语言
- Refresh : 指定时间刷新页面
- set-cookie : 设定页面 cookie 过期时间
- last-modified : 页面最后生成时间
- expires : 设置 cache 过期时间
- cache-control : 设置文档的缓存机制
- ...
name: 该属性定义了文档级元数据的名称。用于对应网页内容,便于搜索引擎查找分类,如 keywords, description; 也可以使用浏览器厂商自定义的 meta, 如 viewport;
移动端特有属性
viewport
可视区域的定义,如屏幕缩放等。告诉浏览器如何规范的渲染网页。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
上一章节中已经详细讲解过了,这边就不再重复了。
format-detection
对电话号码的识别
<meta name="format-detection" content="telphone=no" />
IOS私有属性
apple-mobile-web-app-capable
启用 webapp 模式, 会隐藏工具栏和菜单栏,和其它配合使用。
<meta name="apple-mobile-web-app-capable" content="yes" />
apple-mobile-web-app-status-bar-style
在webapp模式下,改变顶部状态条的颜色。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
default(白色,默认) | black(黑色) | black-translucent(半透明)
注意:若值为“black-translucent”将会占据页面位置,浮在页面上方(会覆盖页面 20px 高度, Retina 屏幕为 40px )。
webapp对应的Link标签
apple-touch-icon
在webapp下,指定放置主屏幕上 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">
默认 iphone 大小为 60px, ipad 为 76px, retina 屏乘2;
如没有一致尺寸的图标,会优先选择比推荐尺寸大,但是最接近推荐尺寸的图标。
ios7以前系统默认会对图标添加特效(圆角及高光),如果不希望系统添加特效,则可以用apple-touch-icon-precomposed.png代替apple-touch-icon.png
apple-touch-startup-image
在 webapp 下,设置启动时候的界面;
<link rel="apple-touch-startup-image" href="/startup.png" />
不支持 size 属性,可以使用 media query 来控制。iphone 和 touch 上,图片大小必须是 230*480 px,只支持竖屏;
其它meta
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
末尾总结
所以,一般新建页面的时候,可以采用如下结构, 再依据自己的实际需要添加所需即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection"content="telephone=no" />
<title>Demo</title>
</head>
<body>
<!-- code here -->
</body>
</html>
WebApp之Meta标签
"添加到主屏幕“后,全屏显示
<meta name="apple-mobile-web-app-capable" content="yes" />
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。 <meta name=”apple-mobile-web-app-status-bar-style” content=black” />
默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
注意: 若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。 在iOS中有两个meta值,apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style,这两个会让网页内容以应用程序风格显示,并使状态栏透明。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png" />
说明: 这个link就是设置web app的放置主屏幕上icon文件路径。
图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px),ipad尺寸为72*72(px) <meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />//将不识别邮箱
告诉设备忽略将页面中的数字识别为电话号码 iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时,在手机HOME界面创建应用程序样式的图标。
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />
移动端Web Meta标签的更多相关文章
- h5移动端页面meta标签
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...
- 移动端默认meta标签
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><met ...
- 移动端的<meta>标签
<head> <meta charset="UTF-8" /> <!-- 页面关键词 --> <meta name="keywo ...
- 移动端meta标签整理-备
分类 在介绍移动端特有 meta 标签之前,先简单说一下 HTML meta 标签的一些知识. meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name). h ...
- 移动端web开发初探之Vuejs的简单实战
这段时间在做的东西,是北邮人论坛APP的注册页.这个注册页是内嵌的网页,因为打算安卓和IOS平台同时使用.因此实际上就是在做移动端的web开发了. 在这过程中遇到了不少有意思的东西. DEMO的git ...
- web前端-《手机移动端WEB资源整合》——meta标签篇
前端网页meta元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向 ...
- 手机H5移动端WEB资源整合之meta标签
一.相关网站使用meta的实例 youku首页的Meta设置: <meta charset="utf-8"> <meta http-equiv="X-U ...
- 移动web前端之meta标签
最近这段时间忙着做web移动端,东西跟pc端还是有区别的.这个月也学到了不少东西,太多了就从头开始,先总结meta标签吧. 主要标签内容和注释如下: <meta charset="UT ...
- 移动端的头部标签和meta
<!DOCTYPE html><!--HTML5 doctype--> <html> <head> <title>xxx</title ...
随机推荐
- Python(多线程threading模块)
day27 参考:http://www.cnblogs.com/yuanchenqi/articles/5733873.html CPU像一本书,你不阅读的时候,你室友马上阅读,你准备阅读的时候,你室 ...
- 前端ajax传数据成功发送,但后端接收不到
前几天遇到这样的问题,找了好久,是在ajax contentType属性设置的问题. contentType默认是application/x-www-form-urlencoded 但是 ...
- webpack快速入门——实战技巧:开发和生产并行设置
package.json中,devDependencies和dependencies是不同的 devDependencies:开发依赖 dependencies:生产依赖(线上) 1.安装生产环境的依 ...
- ThreadPool线程池的关注点
public class TestThreadPool { //线程池维护线程的最少数量 private static final int COREPOOLSIZE = 2; //线程池维护线程的最大 ...
- rpm使用方法
查看rpm信息:rpm -q [软件的rpm名字]rpm -q下还有很多选项,具体功能如下:rpm -qa 列出所有已安装的RPM文件rpm -qa | grep [rp ...
- Golang 并发Groutine实例解读(一)
Go语言的并发和并行 不知道你有没有注意到一个现象,还是这段代码,如果我跑在两个goroutines里面的话: var quit chan int = make(chan int) func loop ...
- 什么是汉明窗?加Hanmming窗的作用?
什么是汉明窗?加Hanmming窗的作用? 1.什么是汉明窗? 答:我是做语音识别的,我就从语音的角度跟你说一下吧. 语音信号一般在10ms到30ms之间,我们可以把它看成是平稳的.为了处理语音信号, ...
- nginx重启报错:nginx: [error] invalid PID number "" in "/run/nginx.pid"
问题描述:执行 nginx -t 是OK的,然而在执行 nginx -s reload 的时候报错 nginx: [error] invalid PID number “” in “/run/ngin ...
- [转]创建一个 Microsoft Outlook 扩展插件
本文转自:https://coyee.com/article/10625-how-to-create-an-add-in-for-microsoft-outlook 下载示例 1.介绍 Visual ...
- Spring-----AOP深度理解
AOP定义了一些新的概念,要想深入的理解AOP的原理,就必须掌握这些概念的具体含义,本人菜鸡一枚,一下是自己对一些概念的理解,如果哪里不对,欢迎评论区指正 AOP核心概念AOP即Aspect-Orie ...