【前记】今天跟大家分享一下移动端meta元标签
【内容】
分类:meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)
设置编码格式语法:
<meta charset="utf-8">
标签的作用:提供有关页面的元信息,标签位于文档的头部,不包含任何内容。 还包含页面描述信息(name),主要有以下几个作用:叙述网页关键词、描述页面(设置页面说明)、添加作者信息、设置移动屏幕缩放。 标签的作用: (1)设置页面关键字
<meta name=”keywords” content=”输入具体的关键字” >
(2)设置网站页面说明,用于搜索引擎推广
<meta name=”description” content=”设置页面说明”>
(3)添加网站作者信息
<meta name=”author” content=”作者的名称” >
name 属性为viewport 时,主要控制移动屏幕的缩放 .
name 属性为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)
移动端开发时常用语法
<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 也随之放大,导致页面出现错乱问题,解决方法:定义页面的最小宽度
方案: