背景:
在做一个微信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" οnclick="">
<a class="login"> 登录 </a>
</li>
<li οnclick="">
<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>