<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" />
iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！
telephone=no就忽略页面中的数字识别为电话号码
telephone=yes就开启了把数字转化为拨号链接,在默认是情况下就是开启！
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name=”"apple-mobile-web-app-status-bar-style" content=”black-translucent" />
控制状态栏显示样式 default（白色）black（黑色） black-translucent（灰色半透明）
link标签apple-touch-icon
如果 apple-mobile-web-app-capable 设置为 yes 了，那么在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。
而通过设置相应 apple-touch-icon 标签，则添加到主屏上的图标就会使用我们指定的图片。
以下是针对ox不同设备，选择一个最优icon。默认iphone的大小为60px，ipad为76px，retina屏乘以2倍。
<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">
ios7以前系统默认会对图标添加特效（圆角及高光），如果不希望系统添加特效，则可以用 apple-touch-icon-precomposed.png 代替 apple-touch-icon.png
图标使用的优先级如下：
如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。
如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。
如些有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。
如果未在区域指定用link标签指定图标，会自动搜索网站根目录下以 apple-touch-icon 为前缀的png图标。
注：ios7不再为icon添加特效，ios7以前则默认为icon添加特效，除非icon有关键字 -precomposed.png 为后缀。
IE浏览器
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 避免IE使用兼容模式
<meta name="MobileOptimized" content="320"> 微软为IE Mobile版设置的定义宽度标记
浏览器不会自动调整文件的大小,也就是说是固定大小,不会随着浏览器拉伸缩放。
<meta name="HandheldFriendly" content="true" />：是否对手持设备友好，只有true或者false
UC浏览器
<meta name="screen-orientation" content="portrait"> 强制竖屏
<meta name="full-screen" content="yes"> 强制全屏
<meta name="browsermode" content="application"> 应用模式
QQ浏览器
<meta name="x5-orientation" content="portrait"> 强制竖屏
<meta name="x5-fullscreen" content="true"> 强制全屏
<meta name="x5-page-mode" content="app"> 应用模式
360浏览器
<meta name="renderer" content="webkit"> 开启急速模式
meta指元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
手机端特有的有哪些？
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection">
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
在web app应用下状态条（屏幕顶部条）的颜色； 默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。 注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。
下面看一下各大厂移动端页面 meta
一、天猫
<meta name="aplus-terminal" content="1"/> <meta name="apple-mobile-web-app-title" content="TMALL"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/> <meta name="format-detection" content="telephone=no, address=no">
二、淘宝
<meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable"/> <meta content="yes" name="apple-touch-fullscreen"/> <meta content="telephone=no,email=no" name="format-detection"/> <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/> <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
三、京东
<title> 京东 - 手机版 </title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta http-equiv="Expires" content="-1"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Pragma" content="no-cache"> <meta name="Keywords" content=""> <meta name="description" content="">
四、网易
<title>手机网易网</title> <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta content="telephone=no" name="format-detection" /> <meta name="keywords" content="" /> <meta name="description" content="" />
五、百度
<meta name="referrer" content="always"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no">
六、搜狐
<title>手机搜狐网</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta name="MobileOptimized" content="320"/>
<meta name="description" content="" />
<meta name="keywords" content="" />
模拟手机端网页
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
viewport ->视窗(展示区域)
width=device-width设备宽度
视口
<metaname = 'viewport'content = "width=320">
<metaname = 'viewport'content = "width=device-width">
user-scalable=no/0是否允许缩放
initial-scale=1.0初始值
maximum-scale=1.0
minimum-scale=1.0
-----------------------------------------------------------------------------
<meta name="viewport" content="width=device-width, user-scalable=no">
user-scalable=no/0禁止用户缩放页面
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
initial-scale=1.0初始化页面缩放比例
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
maximum-scale=1.0最大缩放比例(为了个别手机华为Meta8)
-----------------------------------------------------------------------------
苹果设备专有meta:
<!---允许网页以app形式运行(允许添加到主屏幕)--->
<meta name="apple-mobile-web-app-capable" content="yes">
<!---状态栏颜色--->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
京东meta:
<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="apple-mobile-web-app-status-bar-style" content="black">
<!---禁止之别电话号码和邮箱--->
<meta name="format-detection" content="telephone=no,email=no">
淘宝meta：
<meta content="yes" name="apple-mobile-web-app-capable">
<!--点击页面区域全屏展示--->
<meta content="yes" name="apple-touch-fullscreen"/>
<meta content="telephone=no,email=no" name="format-detection"/>
<!--应用信息，保留系统历史记录，运动效果-->
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>
其他meta:
<!--强制让360浏览器用chrome内核渲染页面-->
<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">
作者：C_Y大渔
链接：https://www.jianshu.com/p/99c5e8c94736
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
