HTML5常见问题的解决方案

Android Webapp 中 input 聚焦软键盘弹出时，遮住输入框问题

解决方案：

 在 webview 所在的 activity 中设置属性 android:windowSoftInputMode="adjustResize"，设置后，输入框聚焦软键盘弹出时页面会自动上移，键盘不会挡住输入框。当 activity 处于全屏模式时，该属性无效。参考链接：http://blog.sina.com.cn/s/blog_71068bbb0101lrpn.html。

  设置之后，键盘弹出时，输入框仍被遮住，请检查 css 中是否存在如下代码：

body, html {
  height: 100%;
  overflow: hidden;
}

如有，请去除 overflow:hidden;，去除后，若仍有问题，请检查输入框的父容器是否包含 position:fixed 样式，若有请删除。

在Android系统中，浏览器通过改变 webview 的高度来实现输入框上移的效果，此时可以通过 window 高度变化来获取改变的值；在 ios 系统中，浏览器通过滚动视窗来实现输入框上移的效果，此时可以通过 document.body.scrollTop 来获取页面上移的值。

IPhone 5C iPhone OS 7_0_6 系统，webview 并不是通过滚动视窗来实现输入框的上移，而是通过改变 webview 的高度来实现输入框上移的效果，而且输入框聚焦时，document.activeElement 的值是 body，应特别注意。

 

XMLHttpRequest 在设置 withCredentials 时，报 DOM Exception 11 的问题？

解决方案：

问题机型：小米 2S,4.1.1 JRO03L

XMLHttpRequest 设置 withCredentials 属性的操作放在 open 方法之后。

https://github.com/madrobby/zepto/pull/935

https://github.com/madrobby/zepto/issues/921

 

Android 4.0 webapp 加载本地资源时，资源后面增加参数导致资源无法加载的问题？

https://code.google.com/p/android/issues/detail?id=17327

http://stackoverflow.com/questions/10066572/adding-parameter-in-link-causes-network-error-android-4-0-3phonegap

 

微信跳转到第三方 app 失败的问题？

http://www.zhihu.com/question/24029212

http://jingyan.baidu.com/article/f71d60377d90611ab641d1d0.html?qq-pf-to=pcqq.c2c

 

iframe display:none; 或者 visibility:hidden; 在 ios Safari 无效的问题？

解决方案：

1、对 iframe 设置 z-index

2、使用 width: 0;height: 0;border: none;

3、使用 position: absolute; left: -9999px;

 

tap 事件点透问题？

解决方案：

 

ajax 同步请求跨域不能通过 cookie 维持会话的问题？

解决方案：

改成异步请求，同步请求 withCredentials 无效。

参考链接：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

 

iOS div 局部滚动卡死的问题？

问题描述：

  1、暴力拖动局部滚动无效的问题

  2、拖动内容时，标题、底部菜单跟随滚动的问题

解决方案：

确保滚动容器的 scrollTop 不为 0 、不为滚动内容的最大值。

 

微信 X5 内核，touchmove 不持续触发的问题？

解决办法：

对 touchmove 事件处理函数添加 e.preventDefault() ，即可解决该问题。

 

div 局部滚动卡顿的问题？

解决办法：

html 或者 body 上的滚动条不存在卡顿的问题，如果可以，将滚动转移到 body 或者 html 上。

 

ios 微信修改页面标题无效问题的解决方案？

解决办法：

function modifyDocumentTitle (title) {
	var $body = $('body');
	document.title = title;
	// hack在微信等webview中无法修改document.title的情况
	var $iframe = $('<iframe src="" style="width:0px;height0px;border:0px;"></iframe>');
	$iframe.on('load', function() {
		setTimeout(function() {
			$iframe.off('load').remove();
		}, 0);
	}).appendTo($body);
}

 

ios 键盘弹出后，不点完成导致页面出现错乱的问题？

原因分析：

  出现问题是因为 ios 在键盘弹出时，如果键盘有可能挡住输入框，系统会修改 document.scrollTop 的值，来实现页面上移的效果，非正常关闭键盘，该值未正常重置，导致 position 为 fixed 的元素出现显示错乱的问题。

解决方案：

  1、如果非正常关闭导致标题错乱，取消标题的 fixed 定位

  2、如果非正常关闭导致弹层定位错乱，添加：document.body.scrollTop = 0; 代码，重置文档的滚动值

 

转载于:https://my.oschina.net/u/1259707/blog/537153