iPhone前端兼容性问题汇总

来源：互联网发布：陕师大网络教育平台编辑：程序博客网时间：2024/06/11 19:18

背景：

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

0 0