关于WebApp开发中遇到的坑

发布于 代码

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

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

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

<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: 1;-webkit-tap-highlight-color: rgba(0,0,0,0);width: 100%;-webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);-o-transform: translateZ(0);transform: translateZ(0);-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;-o-text-size-adjust: none;text-size-adjust: none;}
</style>
<body onload="init()">
    <div id="title">标题栏</div>
    <div class="footer">底栏<div>
    <div id="space">
        <div id="scroller">
            网页内容
        </div>
    </div>
</body>

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

-webkit-overflow-scrolling: touch;

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

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

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

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

修改为

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

才适应我的手速。。。

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

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

border-bottom:1px solid #eaeaea;

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

<style>
.class{
    box-shadow: 0 1px 1px -1px rgb(0, 0, 0) inset;
    height:1px;
}
</style>
<div class="class"></div>

评论

  • test 2017-03-08 15:24:56 回复
    teas12a 啊
  • 发表评论