首页 > webfront > SGML > html5 > > 正文

webapp移动开发所带来的坑

发布人:zhoulujun@live.cn    点击:

webapp开发中,html5中常见的疑难杂症整理及处方。

脱离文档流时的渲染BUG

移动端过多定位元素布局时,偶尔操作fixed元素html不会渲染,解决方案是同步改变与之相关的static元素,便会引导渲染

参考文章:http://www.cnblogs.com/yexiaochai/p/4359983.html

关于iso单页面修改title无效

先道出问题:当页面载入时,微信顶部 title 获取并显示,之后怎么用JS修改 title ,无效。

这个是针对IOS出现的 hack ,Android是有效的。 貌似是IOS的webview没有监听titlechange事件。 目前的处理就是使用重新载入页面的形式来唤醒页面的title有关事件。

这里使用在页面重载了个iframe的形式:

//解决iOS设备修改title不起作用的bug
  function set_title(title) {
      document.title = title;
      if (!ua.is_idevice) return;
      //随便访问iframe访问一个网页,title就可以刷新了
      var url = 'http://xxx.html';
      var dom_id = 'refresh-ios-title-iframe';
      var dom = $('#' + dom_id);
      if (dom.length == 0) {
          dom = $('<iframe style="width:0px;height:0px;display:none" id="' + dom_id + '" src="' + url + '" />');
          $("body").append(dom);
      } else {
          dom.attr('src', url);
      }
  }

iOS Safari 中绑定点击事件失效的解决办法

因为项目里的HTML是使用了模板引擎塞进去的,固然统一的事件会用绑定,也可在模板引擎后面添加。 我这里使用了全局事件绑定:

// 是否为系统分发礼包
    is_system_activity ? to_system_activity() : distribute_activity();

    $("body").on("touchstart", ".explain", function() {
        if (_hmt) {
            _hmt.push(["_trackEvent", "点击次数", "查看游戏规则"])
        }
        $("#game-info").show();
    })

我这里使用了.on()事件,在IOS测试的时候,无效; 我在想是不是.on事件太新了,啊哈哈哈哈啊哈~~~固然不是啦~!!! 我就直接使用了.bind()事件来绑定,测试没问题。

那么现在问题来了,到底为什么会这样呢?

问题描述

当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效。


解决办法有 4 种可供选择:

将 click 事件直接绑定到目标元素(即 .target)上 将目标元素换成 或者 button 等可点击的元素 将 click 事件委托到非 document 或 body 的父级元素上 给目标元素加一条样式规则 cursor: pointer; 推荐后两种。从解决办法来看,推测在 safari 中,不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。

来自:http://happycoder.net/solve-ios-safari-click-event-bug/

手机不弹出虚拟键盘

我们在手机上想弹出键盘,需要的就是让文本框获取焦点,文本框获取焦点便会弹出键盘,但是我这里提出一个问题


弹出键盘==文本框获取焦点
文本框获取焦点!=弹出键盘

经过我的研究一定要这种情况下才会弹出键盘:

① 文本框获取焦点

② 手指触屏(网页区域,混合开发触屏app头不能让webview弹出键盘)

③ 没有延迟(不会ajax回调,不会延迟)

我这里举一个例子,并且此例子与fastclick还有一定关系,如果没有关系这里就没有意义了:http://sandbox.runjs.cn/show/0bmobuyy

如果你使用ios访问这个链接,你会发现,其中的input已经获取了焦点,这个时候你快速的点击文本框就不会弹出键盘

这个情况导致的原因就是文本框已经获取焦点了,再去点击就不会弹出键盘,当然这个情况只是在使用fastclick的情况下

但是,弹出键盘还是得满足以上情况,缺一不可

参考文章:http://www.cnblogs.com/yexiaochai/p/3515987.html

原生andriod浏览器回退后dom(click)事件全体失效问题探究

在原生浏览器下,为dom元素绑定一个click事件,其中有个a标签外链,点击a后进入其他页面,点击浏览器后退后,页面点击事件全体失效!

andriod硬件加速  ||垃圾回收/后台挂起

我们在页面上看到的页面具有一个dom树,而我们的事件js保存在另一个地方,而此时硬件加速为我们提供了一个类似png的中间件 他负责了通讯,但是在我们该网页转入后台时,这之间的映射关系却被破坏了

参考文章http://www.cnblogs.com/yexiaochai/p/3498650.html

提升手持设备点击速度之touch事件带来的坑!

zepto初始化时便为document.body绑定touchstart、touchmove、touchend事件,所以我们现在每一次在手机上的点击都会触发一次touch事件,由此可能引起的BUG:每次手指触屏都会触发touchstart等事件,可能堵塞浏览器本身行为。由于我们是单页应用,初始化会为body设置height为100%,就算进入列表页或者其它,body页高度不会增加,于是就会出现不可点击现象!

去哪儿网站分析


由于其城市列表为absolute,其它dom皆不显示从而导致body实际高度为0,那么此时如果为城市绑定tap事件的话,那么tap事件在ios手机上不会有作用,电脑上有用,某些android无效

此问题较容易解决:

① 让body可伸缩,跟着元素扩展(不易实现)

② 将事件绑定至document(推荐)

IOS的web设置了body height:100%;注意地方

因为IOS带来的滑可将整个页面滑动,固然它是会计算页面的高度然后开始将页面拉出去~~

如果没什么必要,没有什么必要再body 设置height:100%, 除非是个全页面;如果是个溢出设置的话,那就会卡~~~卡得厉害!

IOS的web监听.scroll()注意的地方

 $(window).scroll(function() {
        callback();
    });

测试到一些IOS webview是在滑动停止之后才触发这个监听~~~所以就不是实时监听的。

tap特有的点透现象

地球人都知道tap会出现点透现象,我这里上一个代码给各位测试一番

至于原因,我这里也只能是猜测div(d)的触发是由于冒泡引起,而就算阻止冒泡阻止浏览器默认操作也不能阻止input获取焦点

劳什子android里面moveover事件偶然比尼玛touchstart还快!!!

而ios压根就不理睬mouseover事件,这是主要问题产生原因!!!

而android在movedown时候,开开心心触发了input的focus事件,然后键盘就弹起来了!!!

所以针对android,我们还得将mousedown干掉才行!!!!

而事实上,我们input获取焦点,就是通过mousedown触发的,ios也是