背景:
在做一个微信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>