移动Web开发基础-meta锦集
来源:互联网 发布:问答系统 知乎 编辑:程序博客网 时间:2024/06/11 07:48
什么是meta
Meta标签是HTML语言head区的一个辅助性标签,它位于HTML文档头部的head标记和title标记之间,它提供用户不可见的信息。
Meta : 即 元数据(Metadata)是数据的数据信息。
元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。
用我们的大白话来说,它本身是一个没什么用的标签,但是一旦在它内部通过其他属性设置了某些效果,它就起作用了,所以我们称之为“ 元数据 ”。
它内部可填写的属性如下:
移动端meta
1、移动端页面设置视口宽度等于设备宽度,并禁止缩放。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
2、移动端页面设置视口宽度等于定宽(如640px),并禁止缩放,常用于微信浏览器页面。
<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
3、禁止将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />
4、忽略对邮箱地址的识别
<meta name="format-detection" content="email=no" />
5、当网站添加到主屏幕快速启动方式,伪装webapp,可隐藏工具栏/菜单栏/地址栏,仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- ios7.0版本以后,safari上已看不到效果 -->
6、添加到主屏幕后,全屏显示
<meta name="apple-touch-fullscreen" content="yes">
7、设置ios的safari浏览器顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可选default、black、black-translucent -->
8、添加到主屏后的标题
<meta name="apple-mobile-web-app-title" content="标题">
9、添加智能 App 广告条 Smart App Banner
告诉浏览器这个网站对应的app,并在页面上显示下载banner。
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
10、其他meta
<!-- 针对手持设备优化,主要是针对一些老的不识别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">
针对苹果手机说明:
配合 Web App 的 icon 和启动界面需要额外的两端代码进行设定,如下所示:
<link rel="apple-touch-icon-precomposed" href="iphone_logo.png" />
说明:这个 link 就是设置 Web App 的放置主屏幕上 icon 文件路径
使用:该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。图片尺寸可以设定为 57*57(px)或者 Retina 可以定为 114*114(px),iPad 尺寸为 72*72(px)
<link rel="apple-touch-startup-image" href="logo_startup.png" />
说明:这个 link 就是设置启动时候的界面。
使用:放置的路径和上面一样。
官方规定启动界面的尺寸必须为 320*640(px),原本以为 Retina 屏幕可以支持双倍,但是不支持,图片显示不出来。
如果对 Web App 的这两个 meta 还有不能详细理解的可以查看官方解释:Meta Tags
关于 link 方面还有更多的参数设置(例如:iPod、iPad、iPhone 不同尺寸不同图标),可以查看官方标准文档:Configuring Web Applications
参考:
1.前端 Meta 用法大汇总
2.移动端meta汇总
- 移动Web开发基础-meta锦集
- 移动web开发 meta头
- meta web移动端
- 移动Web开发基础-Viewport
- 移动开发的meta
- 移动开发 meta标签
- web移动--<meta>标签整理
- 移动开发 meta参数参考
- 移动Web应用程序开发 HTML5基础
- 移动Web开发基础-reset样式
- 移动Web开发基础-比例盒子
- 移动Web开发基础-rem布局
- 移动Web开发基础-flexible布局方案
- 移动WEB开发之Safari、QQ、UC、360浏览器的私有Meta属性
- 移动Web应用常用的Meta标签
- 移动端Web系列4 -- meta
- 移动web前端meta通用设置
- web移动端meta标签小结
- unix环境IPC通信之消息队列,并使用多进程的实例
- CSS浮动
- 基于Unity UGUI RawImage的网络头像功能实现方案
- 移位操作
- MYSQL 自定义函数(if else)
- 移动Web开发基础-meta锦集
- 理解矩阵
- vcomp140.dll缺失 OSError: [WinError 126] 找不到指定的模块。
- (C++)智能指针的模拟实现及使用
- 数据结构
- CiteSpace介绍与使用
- 树莓派3 基于Ubuntu mate 16.04的web服务器搭建
- 游戏中纹理压缩格式之Texture压缩纹理
- Python 训练人脸识别模型(2) NVIDIA显卡驱动安装