文档章节

HTML5常见问题的解决方案

阿祥_开源中国
 阿祥_开源中国
发布于 2015/11/29 22:14
字数 932
阅读 1370
收藏 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; 代码,重置文档的滚动值

 

© 著作权归作者所有

共有 人打赏支持
阿祥_开源中国
粉丝 17
博文 24
码字总数 9890
作品 0
朝阳
程序员
私信 提问
使用excanvas时的常见问题

HTML5标准已经发布一段时间了,新标准中强大的绘图能力和嵌入多媒体能力备受关注,canvas标签无疑是HTML5的一大招牌。IE6、7、 8原本不支持canvas标签,google提供了一个有效的解决方法Explo...

红薯
2011/11/05
2.2K
0
HTML5(目前)无法帮你实现的五件事

一直以来,很多人都专注于HTML5能够实现什么(或者是如何将各种方法连接起来,实现一个更加优雅的解决方案)。而现在,也不少人想将目光投向那些HTML5无法实现的事情。MSDN上微软员工thebeeb...

虫虫
2011/12/12
3.8K
22
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 企业安全访问控制的七种武器

自从2010年乔布斯宣布苹果不再支持Flash而专注于HTML5以来的近5年以来,HTML5得到了迅猛的发展。如今HTML5的创建工具层出不穷。这些工具已经不仅仅局限于游戏和视频的创建。其中一些,比如说...

oschina
2014/06/13
2.9K
3

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
57分钟前
2
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
4
0
flutter 底部输入框 聊天输入框 Flexible

想在页面底部放个输入框,结果键盘一直遮住了,原来是布局问题 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("评论"), ...

大灰狼wow
昨天
4
0
Kernel I2C子系统

备注:所有图片来源于网络 1,I2C协议: 物理拓扑: I2C总线由两根信号线组成,一条是时钟信号线SCL,一条是数据信号线SDA。一条I2C总线可以接多个设备,每个设备都接入I2C总线的SCL和SDA。I...

yepanl
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部