viewport 视口(可视区窗口)设置详解
当我们试图在iPhone中输出屏幕宽度的时候，会发现屏幕宽度是980，居然和pc屏幕宽度差不多大
苹果主导的这些手机厂商，为了使用户获得完整的WEB体验，很多设备都会欺骗浏览器返回一个数值较大的视口，告诉浏览器，别以为我身子小，但是我想以980px宽度显示这个页面（分辨率和视口没有关系（开发中根据视口来算的））
视口对于我们实现响应式是很不方便的。980太大了，不符合我们心中的期待，我们心中认为手机屏幕尺寸应该在320到400之间
默认不设置viewport一般可视区宽度在移动端是980，所有的手机响应式网站，都要加上meta viewport视口约束标记
解决这个问题只要约束视口即可：
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
一个id和name为 viewport的meta元标记，就表示现在要约束视口了
那么具体约束的规则写在content中，每个约束规则用逗号隔开：
width=device-width 命令视口的宽度，变为设备的宽（以1024*768屏幕为标准 iPhone等手机通常为320到380之间），(number||device-width)
initial-scale=1.0 命令视口默认的缩放等级为1（可以设置为任何数字，以倍数计算，IOS10没效果）
minimum-scale=1.0 命令视口最小缩放等级为1（可以设置为任何数字，以倍数计算，IOS10没效果）
maximum-scale=1.0 命令视口最大缩放等级为1（可以设置为任何数字，以倍数计算，IOS10没效果）
user-scalable=no 不允许用户缩放页面(yes||no)（可以设置为任何数字，以倍数计算，IOS10没效果）
其他的一些设置
强制横屏或者竖屏设置（X5内核的浏览器才支持）
可以设置为protrait（竖屏）和andscape（横屏）
<meta name="x5-orientation" content="portrait" />
设置全屏（X5内核有效）
<meta name="x5-fullscreen" content="true" />
UC浏览器强制竖屏或者横屏显示
可以设置为protrait（竖屏）和andscape（横屏）
<meta name="screen-orientation" content="portrait">
UC全屏显示
<meta name="full-screen" content="yes">
其他浏览器下如果要屏蔽横屏显示的功能，可以使用陀螺仪的方法来做，具体查看：移动端页面的陀螺仪操作这篇文章
<meta name="format-detection" content="telephone=no, email=no" />
禁止移动端电话号码和邮箱的识别
<meta name="format-detection" content="telephone=no, email=no" />
上面的设置是全局设置，如果说页面中有 一个地方需要识别电话号码和邮箱那么可以使用下面这样设置
<a href="tel:18888888888">请拨打电话18888888888</a> <a href="mailto:[email protected]">请发送邮件</a>
移动端页面开发常见的一些问题（开发之前需要先重置以下样式）
清除input，a，button等标签的点击阴影
在移动端input，a，button这三个标签点击的时候都会默认有阴影，那么怎么去掉或者替换其他的阴影样式呢，可以使用下面这个属性进行设置（下面是去除阴影）
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
<style>
a,
input,
button{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
<body>
<a href="http://miaov.com">妙味课堂-我是莫涛</a>
<input type="button" value="按钮">
</body>
清除按钮的圆角
在移动端input和button这两个标签都会默认有圆角，可以使用下面两个样式去除
input,
button {
-webkit-appearance: none;
border-radius: 0;
}
<style>
a,
input,
button{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
input,
button {
-webkit-appearance: none;
border-radius: 0;
}
</style>
<body>
<a href="http://miaov.com">妙味课堂-我是莫涛</a>
<input type="button" value="按钮">
</body>
选中文字设置（设置为不选中）
安卓不兼容这个属性，可以使用事件来兼容
-webkit-user-select: none;
禁止文字缩放
-webkit-text-size-adjust: 100%;
默认字体设置
因为移动端，每个手机默认的字体都不一样，所以需要重置一下，至于重置什么样的字体自己来定
font-family: Helvetica;
Font Boosting
在一段文字我们没有给他设置高度的时候，在webkit内核下，文字的大小被浏览器放大了，解决办法:设置高度或者设置最大高度max-hieght
固定定位在移动端的问题
移动端IOS回弹的问题
IOS下overflow的问题
就是是说body下某个元素超过页面宽度后，即使body设置了overflow为hideen，在IOS下也没有用，解决办法就是将body下的所有子元素包裹在一个div上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>Document</title>
<style type="text/css">
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
margin: 0;
overflow: hidden;
position: relative;
}
.wrap {
height: 100%;
overflow: auto;
}
header {
position: absolute;
width: 200%;
height: 40px;
background: rgba(0, 0, 0, .5);
color: #fff;
text-align: center;
}
section {
padding-top: 40px;
}
</style>
</head>
<body>
<div class="wrap">
<header>我是一个头部</header>
<section>
页面内容<br/>
</section>
</div>
</body>
</html>