HTML5常见问题的解决方案
HTML5常见问题的解决方案
阿祥_开源中国 发表于2年前
HTML5常见问题的解决方案
  • 发表于 2年前
  • 阅读 1191
  • 收藏 0
  • 点赞 1
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

摘要: 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; 代码,重置文档的滚动值

 

共有 人打赏支持
粉丝 18
博文 24
码字总数 9890
×
阿祥_开源中国
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: