移动平台对 meta 标签的定义
下面介绍一些有关标记的例子及解释。
一、meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)。
1、http-equiv 属性的 Content-Type 值(显示字符集的设定)
说明:设定页面使用的字符集,用以说明主页制作所使用的文字语言,浏览器会根据此来调用相应的字符集显示 page 内容。
用法:
1
|
<</CODE> meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
|
注意:该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ,就是万国码。它可以在同一页面显示中文简体、繁体及其它语言(如日文,韩文)等。
2、name 属性的 viewport 值(移动屏幕的缩放)
也就是可视区域。对于桌面浏览器,我们都很清楚 viewport 是什么,就是除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,这是真正有效的区域。由于移动设备屏幕宽度不同于传统 web,因此我们需要改变 viewport 值。
实际上我们可以操作的属性有 4 个:
width – // viewport 的宽度 (范围从 200 到 10,000,默认为 980 像素)
height – // viewport 的高度 (范围从 223 到 10,000 )
initial-scale – // 初始的缩放比例 (范围从 > 0 到 10)
minimum-scale – // 允许用户缩放到的最小比例
maximum-scale – // 允许用户缩放到的最大比例
user-scalable – // 用户是否可以手动缩放 (no,yes)
1
|
<</CODE> meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
说明:
- 强制让文档与设备的宽度保持 1:1 ;
- 文档最大的宽度比列是1.0( initial-scale 初始刻度值和 maximum-scale 最大刻度值);
- user-scalable 定义用户是否可以手动缩放( no 为不缩放),使页面固定设备上面的大小;
注意:实际测试中发现,有些安卓系统自带的浏览器并不支持这一条规则,能够对页面进行放大,一旦放大响应的 box 也随之放大,导致页面出现错乱问题,解决方法:定义页面的最小宽度
1
2
3
|
body {
min-width : 320px ;
}
|
3、name 属性的 format-detection 值(忽略页面中的数字识别为电话号码)
1
|
<</CODE> meta name = "format-detection" content = "telephone=no" />
|
说明:
- 使设备浏览网页时对数字不启用电话功能(不同设备解释不同,iTouch 点击数字为存入联系人,iPhone 为拨打电话),忽略将页面中的数字识别为电话号码。
- 若需要启用电话功能将 telephone=yes 即可,若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。
4、name 属性的 apple-mobile-web-app-capable 值(网站开启对 web app 程序的支持)
1
|
<</CODE> meta name = "apple-mobile-web-app-capable" content = "yes" />
|
说明:
- 网站开启对 web app 程序的支持。
- 该 meta 可以看出内容为“苹果设备 web 应用程序 xx”,就是说该 meta 是专门定义 web 应用的。
5、name 属性的 apple-mobile-web-app-status-bar-style 值(改变顶部状态条的颜色)
1
|
<</CODE> meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
|
说明:
- 在 web app 应用下状态条(屏幕顶部条)的颜色;
- 默认值为 default(白色),可以定为 black(黑色)和 black-translucent(灰色半透明);
注意:若值为“black-translucent”将会占据页面位置,浮在页面上方(会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px )。
6、name 属性设置作者姓名及联系方式
1
|
<</CODE> meta name = "author" contect = "liudanyun, liudy102@163.com" />
|
二、苹果 Web App 其他设置:
当然,配合 Web App 的 icon 和启动界面需要额外的两端代码进行设定,如下所示:
1
|
<</CODE> 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)
1
|
<</CODE> link rel = "apple-touch-startup-image" href = "logo_startup.png" />
|
说明:这个 link 就是设置启动时候的界面。
使用:
- 放置的路径和上面一样。
- 官方规定启动界面的尺寸必须为 320*640(px),原本以为 Retina 屏幕可以支持双倍,但是不支持,图片显示不出来。
http://www.cssue.com/xhtml-css/html5-css3/mobile-meta.html
转载于:https://www.cnblogs.com/liuzhuqing/p/7480327.html
移动平台对 meta 标签的定义相关推荐
- 前端meta标签内容定义及使用说明,meta详细说明,meta标签使用
<HEAD> //1.基本标签 <! - 声明文档使用的字符编码 - > <meta charset ="utf-8"/> <! - ...
- 网站元数据meta标签的含义和用法
最近在做网页,个人对网站元数据meta标签的含义和用法了解的不是很深,所以在网上搜到了一些关于这方面的知识,并摘抄至此,希望能够与大家共同学习,高手勿喷哦~~~ (注:此文原文内容访问地址:http: ...
- 最齐全的网站元数据meta标签的含义和用法
最齐全的网站元数据meta标签的含义和用法 随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到如今Windows 7.Windows 8的IE9 ...
- meta标签及其含义大全
meta运用在head标签中,但是对于H5中meta标签元素的定义已经运用场景没有几个人能够说是熟练运用的,现在我就来罗列html中meta标签的定义以及运用场景. 定义和用法: <meta&g ...
- html中meta标签
html中meta标签 html中meta标签 meta标签的作用 http-equiv/content name/content charset 练习 在Begin - End区域内补充代码 参考答 ...
- meta 标签知多少
meta 标签提供该页面的一些信息,比如针对搜索引擎和更新频度的描述和关键词,它还可以控制页面缓冲.响应式窗口等,定义 meta 标签有利于网站 SEO(有利于搜索引擎访问),对于响应式窗口也起着作用 ...
- meta标签使用手册
目录 一.meta标签的含义 二.meta使用说明 1. charset 2. http-equiv (1). content-security-policy (2). content-type (3 ...
- SEO优化之meta标签
2019独角兽企业重金招聘Python工程师标准>>> meta的标签的使用是我在前端学习中曾经困惑过一段时间的问题.一方面不是很了解meta标签的用途,另一方面是对于meta标签里 ...
- html5 meta标签属性整理
html5 meta标签属性整理 前言:不知道有没有人觉得,html的meta标签描述的头部信息特别多,有针对的SEO的头部信息,也有针对移动设备的头部信息,今日特地在网上搜集资料自己稍微对其整理一下 ...
最新文章
- 鸿蒙系统哪里的,华为“鸿蒙系统”IPFS/FIL:区块链的“鸿蒙系统”?
- Struts 2基础
- HAproxy - 铁钉 - 51CTO技术博客
- 是个狠角色。。 | 今日最佳
- 深入浅出话VC++(2)——MFC的本质
- 计算机顶会论文写作科研利器
- ora-12505报错解决方法(转)
- 163的在线编辑器简析和配置使用
- Android 网易云IM开发
- 死链接处理,seo站长必会
- HDU1175 连连看 模拟搜索
- android 游戏音效格式,Android基础 - Android Studio 添加游戏音效
- Linux内核kernel panic机制浅析
- 【XGantt教程】为甘特图分组添加舒适排序选项的三个步骤
- class07:Express框架、中间件
- 音视频的流程:录制、播放、编码解码、上传下载等
- 网迅wx1860网卡原理图驱动
- 11 月中国手游海外收入排行:米哈游《原神》第一,《使命召唤手游》第二
- 28 诊断偏差和方差:学习曲线 (28 Diagnosing bias and variance_ Learning curves)
- 两段文章清楚弄明白什么是异步IO、同步IO、同步阻塞IO、同步非阻塞IO、异步阻塞IO、异步非阻塞IO