关于WebApp开发中遇到的坑

1：Safari下拉网页的【橡皮筋效果】

在Safari和微信浏览器中，访问网页，在最顶部下拉和最底部下滑，会有如下图这种橡皮筋效果。

解决方法：使用iscroll.js插件，大概的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<script type="text/javascript" src="./js/iscroll.js"></script>
<script>
	var myScroll;
	function init(){
		myScroll = new IScroll('#space', { mouseWheel: true, click: true ,momentum: true,});
	}
	document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>
<style>
	#title{height:49px;;width:100%;text-align:center;background:rgba(255,255,255,.97);line-height:50px;font-size:.28rem;position:fixed;top:0;}
	#scroller{
	position: absolute;z-index: ;-webkit-tap-highlight-: (,,,);: ;-webkit-: ();-moz-: ();-ms-: ();-o-: ();: ();-webkit-touch-callout: none;-webkit-: none;-moz-: none;-ms-: none;: none;-webkit-: none;-moz-: none;-ms-: none;-o-: none;: none;}


	标题栏
	底栏
	
		
			网页内容
		
	

2：iscroll.js顺便解决了另一问题，就是webapp的滑动流畅问题，正常app的体验是滑动操作非常流畅且跟手的，比如手指慢滑，屏幕也跟着慢慢移动，手指猛的快滑，屏幕此时会继续惯性滑动一段距离会停止，正常情况下，web中并没有如此优雅的体验，据说在iOS5以上，系统是支持以下私有css属性可以实现：

1-webkit-overflow-scrolling: touch;

我稍微看了下，似乎没有生效，没有去深究原因，因为直接使用了iscroll.js，在new IScroll的时候，加入momentum: true即可(不加也可以，默认开启)，比如：

1new IScroll('#space', { mouseWheel: true, click: true ,momentum: true,});

不过在体验过程中，有一点不完美，我正常慢滑的时候，手指离开屏幕过快，会误判成快滑，查看了 一下iscroll.js的源代码，找到

1if ( this.options.momentum && duration < 300 )

修改为

1if ( this.options.momentum && duration < 150 )

才适应我的手速。。。

3：retina视网膜屏幕和viewport无法真实的还原1px

比如标题栏下面，想有1px的灰边

1border-bottom:1px solid #eaeaea;

在webapp和原生app的对比中，怎么看怎么觉得不止1px，后来google才发现，对于width=device-width，1px实际上是有所放大的，比如在我的iPhone 6s Plus(1080*1920 Retina)上，截图放到ps中，1px是被放大成3px的，部分机型也会放大成2px。根据腾讯体验设计部文章的结尾，查找到解决方案，大概如下：

1
2
3
4
5
6
7<style>
.class{
	box-shadow: 0 1px 1px -1px rgb(0, 0, 0) inset;
	height:;
}