前言
之前学习前端中,对meta标签的了解仅仅只是这一句。
<meta charset="UTF-8"> |
但是打开任意的网站,其head标签内都有一列的meta标签。比如我们武林站长站网站,但是自己却很不熟悉,于是把meta标签加入了学习计划的最前方。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no”> |
这个用的最多,width和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字,要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。
user-scalable指令指定用户是否可以缩放视区,即缩放Web页面的视图。值为yes时允许用户进行缩放,值为no时不允许缩放
initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面,设为1.0则将显示未经缩放的Web文档。
maximum-scale和minimum-scale指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同,这些指令的值是应用于视区内容的缩放比例。
所有智能手机浏览器都支持ViewPort <meta>标记的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令,而是主张用户应始终保留在移动浏览器中缩放Web页面的能力。
下面还真用得少
devicePixelRatio
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是:window.devicePixelRatio = 物理像素 / dips
fit-to-screen网站自适应屏幕
如果content的值小于或等于screen width 网站自适应屏幕fit-to-screen将被关闭网站不会随着浏览器拉伸缩放
如果content的值大于screen width;fit-to-screen将开启
苹果浏览器相关
2015-07-08
<meta name=”viewport” content=”minimal-ui”> |
在iOS 7.1的Safari中为meta标签新增minimal-ui属性,让网页在加载时便可隐藏顶部的地址栏与底部的导航栏。
<meta name=”apple-mobile-web-app-capable” content=”yes”> |
是否启动webapp功能 设置为yes 网站就会在满屏模式full-screen mode删除默认的苹果工具栏和菜单栏
<meta name=”apple-touch-fullscreen” content=”yes”> |
开启对web app程序的支持
<meta name=”format-detection” content=”telephone=no”><meta name=”format-detection” content=”email=no” /> |