webapp移动开发所带来的坑

脱离文档流时的渲染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也是

转载本站文章《webapp移动开发所带来的坑》,
请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/html5/2017_0117_7942.html