文档章节

HTML5常见问题的解决方案

阿祥_开源中国
 阿祥_开源中国
发布于 2015/11/29 22:14
字数 932
阅读 1327
收藏 2

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
作品 0
朝阳
程序员
TWAIN扫描识别工具Dynamic Web TWAIN的常见问题FAQ合集

Dynamic Web TWAIN是一个专为Web应用程序设计的TWAIN扫描识别控件,本文给大家分享几个有关Dynamic Web TWAIN的常见问题,欢迎收藏! Dynamic Web TWAIN中文介绍丨免费下载丨资源教程丨示例D...

Harriet666
2017/11/07
0
0
HTML5和CSS3不仅仅是两项新的Web技术标准

HTML5和CSS3不仅仅是两项新的Web技术标准 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术。虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那...

课工场CC老师
2017/10/24
0
0
HTML5定稿了,为什么原生App世界将被颠覆

2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿。 过去这些年,HTML5颠覆了PC互联网的格局,优化了移动互联网的体验,接下来,HTML5将颠覆原生App世界...

程序袁_绪龙
2015/01/05
0
0
html5 sessionStorage 与 localStorage使用详解

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结...

Adam-Lee
2012/08/22
0
1
HTML5视频教程之canvas合成海报所遇问题及解决方案

本篇文章扣丁学堂HTML5培训小编大家分享HTML5开发方面的问题:canvas合成海报所遇问题及解决方案,HTML5不论是现在还是今后的发展相信很多人都是很看好的,下面和小编一起来了解一下HTML5开发...

扣丁学堂
08/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

20180920 rzsz传输文件、用户和用户组相关配置文件与管理

利用rz、sz实现Linux与Windows互传文件 [root@centos01 ~]# yum install -y lrzsz # 安装工具sz test.txt # 弹出对话框,传递到选择的路径下rz # 回车后,会从对话框中选择对应的文件传递...

野雪球
今天
2
0
OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
今天
7
3
java -jar运行内存设置

java -Xms64m #JVM启动时的初始堆大小 -Xmx128m #最大堆大小 -Xmn64m #年轻代的大小,其余的空间是老年代 -XX:MaxMetaspaceSize=128m # -XX:CompressedClassSpaceSize=6...

李玉长
今天
4
0
Spring | 手把手教你SSM最优雅的整合方式

HEY 本节主要内容为:基于Spring从0到1搭建一个web工程,适合初学者,Java初级开发者。欢迎与我交流。 MODULE 新建一个Maven工程。 不论你是什么工具,选这个就可以了,然后next,直至finis...

冯文议
今天
2
0
RxJS的另外四种实现方式(四)——性能最高的库(续)

接上一篇RxJS的另外四种实现方式(三)——性能最高的库 上一篇文章我展示了这个最高性能库的实现方法。下面我介绍一下这个性能提升的秘密。 首先,为了弄清楚Most库究竟为何如此快,我必须借...

一个灰
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部