文档章节

HTML5常见问题的解决方案

阿祥_开源中国
 阿祥_开源中国
发布于 2015/11/29 22:14
字数 932
阅读 1253
收藏 2
点赞 1
评论 0

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
朝阳
程序员
Safari无痕模式下,storage被禁用问题

前言 Safari开启无痕模式后,localStorage和sessionStorage为空,对其进行set操作也会报错,也就是说这种情况下,storage是被禁止使用了。接下来说一下解决方法。 解决方案 我们项目框架上的...

ITgecko ⋅ 05/02 ⋅ 0

H5本地存储一

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可...

刘梓航 ⋅ 2014/10/27 ⋅ 2

AmplifyJS

AmplifyJS 是一套组件集合用于解决一般web应用开发的常见问题,其目的是简化所有表单数据处理,其存储组件可处理浏览器端的持久化存储,使用标准的 LocalStorage 和 SessionStorage。 Amplif...

匿名 ⋅ 2012/03/10 ⋅ 0

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

Spring Boot集成Spring Data Reids和Spring Session实现Session共享

首先,需要先集成Redis的支持,参考:http://www.cnblogs.com/EasonJim/p/7805665.html Spring Boot集成Spring Data Redis+Spring Session非常的简单,也不用担心版本问题,只需要引入相应的...

easonjim ⋅ 2017/11/10 ⋅ 0

超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员 ⋅ 04/25 ⋅ 0

HTMl5的sessionStorage和localStorage

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

lg2045 ⋅ 2014/10/09 ⋅ 0

html5 sessionStorage 与 localStorage使用详解

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

Adam-Lee ⋅ 2012/08/22 ⋅ 1

WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CENTOS7防火墙命令记录

安装Firewall命令: yum install firewalld firewalld-config Firewall开启常见端口命令: firewall-cmd --zone=public --add-port=80/tcp --permanent firewall-cmd --zone=public --add-po......

cavion ⋅ 54分钟前 ⋅ 0

【C++】【STL】利用chromo来测量程序运行时间与日志时间打印精确到微秒

直接上代码吧,没啥好说的。头疼。 #include <iostream>#include <string>#include <ctime>#include <sstream>#include <iomanip>#include <thread>#include <chrono>using ......

muqiusangyang ⋅ 57分钟前 ⋅ 0

Mac环境下svn的使用

在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境。在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还需做一下简...

故久呵呵 ⋅ 今天 ⋅ 0

破解公司回应苹果“USB限制模式”:已攻破

本周四,苹果发表声明称 iOS 中加入了一项名为“USB 限制模式”的功能,可以防止 iPhone 在连接其他设备的时候被破解,并且强调这一功能并不是针对 FBI 等执法部门,为的是保护用户数据安全。...

六库科技 ⋅ 今天 ⋅ 0

MyBtais整合Spring Boot整合,TypeHandler对枚举类(enum)处理

概要 问题描述 我想用枚举类来表示用户当前状态,枚举类由 code 和 msg 组成,但我只想把 code 保存到数据库,查询处理,能知道用户当前状态,这应该怎么做呢?在 Spring 整合MyBatis 的时候...

Wenyi_Feng ⋅ 今天 ⋅ 0

synchronized与Lock的区别

# <center>王梦龙的读书笔记第一篇</center> ## <center>-synchronized与Lock的区别</centre> ###一、从使用场景来说 + synchronized 是能够注释代码块、类、方法但是它的加锁是和解锁使用一......

我不想加班 ⋅ 今天 ⋅ 0

VConsole的使用

手机端控制台打印输出,方便bug的排查。 首先需要引入vconsole.min.js 文件,然后在文件中创造实例。就能直接使用了。 var vConsole = new VConsole(); vConsole的文件地址...

大美琴 ⋅ 今天 ⋅ 0

Java NIO之字符集

1 字符集和编解码的概念 首先,解释一下什么是字符集。顾名思义,就是字符的集合。它的初衷是把现实世界的符号映射为计算机可以理解的字节。比如我创造一个字符集,叫做sex字符集,就包含两个...

士别三日 ⋅ 今天 ⋅ 0

Spring Bean基础

1、Bean之间引用 <!--如果Bean配置在同一个XML文件中,使用local引用--><ref bean="someBean"/><!--如果Bean配置在不同的XML文件中,使用ref引用--><ref local="someBean"/> 其实两种......

霍淇滨 ⋅ 今天 ⋅ 0

05、基于Consul+Upsync+Nginx实现动态负载均衡

1、Consul环境搭建 下载consul_0.7.5_linux_amd64.zip到/usr/local/src目录 cd /usr/local/srcwget https://releases.hashicorp.com/consul/0.7.5/consul_0.7.5_linux_amd64.zip 解压consu......

北岩 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部