post | ios7下移动web开发的几个坑 | webapp |
1.Retina屏下1px border
由于高清屏的特性，1px是由2×2个像素点来渲染，那么我们样式上的border:1px在Retina屏下会渲染成2px的边框，一般有以下几种方法：
- 图片
- 阴影
- 缩放
移动版开发采用软图片的方法：
.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
linear-gradient(270deg, red, red 50%, transparent 50%),
linear-gradient(0deg, red, red 50%, transparent 50%),
linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}
同样的方式也可以搞定分割线：
.border {
background-image:linear-gradient(180deg, #ccc, #ccc 50%, #fff 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom;
}
2.safari 工具栏隐藏
当用户在垂直模式（portrait ）滚动页面时，底部工具栏将消失，URL栏变成一个小的半透明的条出现在顶部。
水平模式（landscape），用户滚动页面底部工具栏和主域名栏同时消失，变成完整的全屏模式。
当用户轻敲底部的时候，底部工具栏会出现，导致用户无法点中底部链接，如：加入购物车按钮
解决方案：让工具栏始终隐藏，当用户轻敲URL栏时出现：
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui'/>
参数minimal-ui主要功能是让iOS7.1设备中的Safari移动地址栏和下面的工具条不显示
3.safari bfcache
BFCache（Back-Forward Cache）可以翻译成往返缓存。这是用来加速前进后退操作 时页面展示时使用的一种技术。
由于移动端网速特性，跳转页面改用js跳转，触发click事件先弹出loading层，然后location.href="xxx",当用户返回的时候，没有重新加载页面，loading层不会消失。
解决方案：利用pageshow/pagehide事件来检测BFcache的使用情况
$(window).on('pageshow',function(event){
if (event.persisted) {
toolfix();
$.jPops.hideAlerts();
$('#J_search').html('').addClass('a-search-btn');
$('#gallery-page').show();
$('#gallery-search').hide();
initBack();
}
});