iPhone前端兼容性问题汇总
背景：
在作一个微信Web项目开发过程当中，遇到iPhone（主要iPhone4/4S）兼容性问题，记录以下。
问题：
1. 页面在iPhone下出现左右滑动的问题；
2. 顶部标题在iPhone4/4S下宽度不能100%；
3. iPhone4/4S下在input弹出输入法时，不支持position:fixed的问题（即 原本固定在顶部的菜单下移）；
分析：
viewport说明：
页面使用了viewport meta 标签， <meta name="viewport" content="width=320,user-scalable=no">。
其中，width：控制 viewport 的大小（即页面的宽度），能够指定一个值，或者用特殊的值 device-width 为设备的宽度。user-scalable：用户是否能够手动缩放。
为了保证在不一样移动设备下保持一致性，设置width=320，即页面宽度为320px。
viewport的一些问题：
对于iPhone，若是width定义为指定值，而当页面最宽的位置超过width时，width无效，仍按最宽的宽度来显示（出现左右滑动的问题）。
通过测试发现，当页面高度高于一屏，出现纵向滚动条，这时左右滚动问题会消失！因此能够利用这个为iPhone作兼容代码。
position:fixed说明：
顶部和底部菜单，使用了fixed绝对定位，是相对于浏览器窗口进行定位，不受viewport的限制。若是设置position: static就会受viewport width的限制。
在iPhone4/4S微信中，input focus弹出输入法时，顶部出现“防欺诈盗号,请勿支付或输入qq密码”提示，把fixed定位的元素压到了下面，如图：
因此，把设置position: static，而且把菜单的宽度由100%改成固定值。
解决办法：
问题1. 把高度设为110%，出现纵向滚动条，解决左右滚动的问题；
.container {
min-height: 110%;
}
问题2. 为iPhone4/4S写兼容性代码，从新设置宽度；
问题3. 为iPhone4/4S写兼容性代码，把position:fixed改成static；
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2) {
#top-menu {
position: static;
width: 340px;
}
}
附页面代码：
<html><!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=320,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<style type="text/css">
body, input, ul {
margin: 0;
padding: 0;
background: #ebebeb;
font: 16px 'Microsoft YaHei',arial,sans-serif;
}
.container {
width: 340px;
margin: 0 auto;
color: #484d57;
}
#top-space {
height: 49px;
}
#top-menu {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
background: #f6f6f6;
height: 49px;
min-height: 49px;
border-bottom: 1px #fff solid ;
}
#top-menu li {
float: left;
width: 50%;
height: 100%;
background-color: #ccccff;
text-align: center;
}
#top-menu li a {
color: #fff;
line-height: 49px;
}
#top-menu li.active a {
display: block;
background: #fff;
color: #9b98ff;
font-size: 16px;
}
.name, .password, .btn-login {
position: relative;
width: 310px;
height: 54px;
margin: 0 auto;
margin-top: 15px;
border: none;
background-color: #fafafa;
}
.btn-login {
margin-top: 19px;
background-color: #9a99ff;
color: #fff;
}
.name input, .password input, .btn-login input {
width: 100%;
height: 100%;
border: 1px #cacfd2 solid;
background-color: transparent;
font-size: 16px;
}
.btn-login input {
border: none;
color: #fff;
}
/* 解决 iPhone设备, 当页面内容大于320px时，出现左右滑屏的问题 */
.container {
min-height: 110%;
}
/* 兼容iphone4/4s 登陆页标题宽度 */
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){
#top-menu {
position: static;
width: 340px;
}
#top-space {
height: 0;
}
}
</style>
</head>
<body>
<div id="top-menu">
<ul>
<li class="active" onclick="">
<a class="login"> 登陆 </a>
</li>
<li onclick="">
<a> 注册 </a>
</li>
</ul>
</div>
<div id="top-space"></div>
<div class="container">
<form>
<div class="name">
<input type="text" placeholder="姓名" />
</div>
<div class="password">
<input type="text" placeholder="密码" />
</div>
<div class="btn-login">
<input type="submit" value="提交">
</div>
</form>
</div>
</body>
</html>