H5的兼容问题总结

Posted 2021-01-07 luyh2015

 

聚焦问题

android会出现点击聚焦的情况，出现黄色的边框，通过对相应的元素设置css –webkit-tap-highlight-color: rgba(0,0,0,0)解决，另外一些高版本的系统也可能会出现有黄色边框的情况，这时候试着用outline：none来解决。

Android  position:fixed及input中文输入bug

在android系统中，如果页面中有position为fixed的元素，input外层的元素定位为relative或者自身的定位为relative，就会产生一种奇怪的现象，在input中输入数字或者字母都很正常，当切换输入法为中文后，发现无法输入，当把position设置为absolute后一切正常，所有当遇到这种情况时就只能改变布局了。

Android 渐变问题

background:-webkit-gradient(linear,00,0100%, color-stop(1%,rgba(111,191,7,0)), color-stop(74%,rgba(111,191,7,0)), color-stop(75%,rgba(111,191,7,0.9)), color-stop(100%,rgba(111,191,7,0.9))); 
Linear是指渐变方式，0 0指从哪个方向开始。0 0 到 0 100% 说明是从上到下渐变。 后面的color-stop 可以指定百分比和颜色值。

Android4.0及低版本系统touch事件bug

在android4.0系统中，存在部分子版本的系统有touch事件的bug，表现为touchstart是正常的，touchmove只有在touchstart触发的时候触发一次，touchend不会被触发，android2.3会触发startmove一次，当touch结束后会执行剩余的move和end。在zepto库中此问题也没有得到解决,在android4.2系统中也存在这样的问题，后来发现是浏览器将事件cancel调了，目的应该是防止在滚动页面的时候调用，所以在touchmove事件中添加e.preventDefault()，发现touchend被触发了，所以解决方案根据实际使用场景来进行处理。

Android4.X placeholder问题

placeholder 文字字体会偏上。 但是placeholder只能设置他的color。如： 
input::-webkit-input-placeholder{ 
color:red;} 
行高不能设置。这时候把line-height设成normal 就能上下居中了。

各个系统对position:fixed的支持情况

手机Safari – ios5及以后版本都支持. iOS4及以下版本不支持，会当做static处理. 
Android

• Android 2.1 及以下版本不支持.
• Android 2.2 滚动过程中不保持fixed的位置，滚动完成后回到fixed的位置.
• Android 2.3 支持fixed, 但是要求页面禁止缩放.
• Android 3和4支持fixed.

Touchstart, click, tap事件分析

在移动端我们会经常用到touch事件，touchstart事件很灵敏，所有如果要绑定类似于pc端的click事件，用touchstart会经常的误操作，例如滚动页面的时候被误点，所有市面上有很多手势库，封装出了tap等方面，而在移动端click事件也是可以触发的，click事件会在点击300ms左右出发（原因是浏览器希望判断是否是双击），原始的解释参见google这篇[Creating Fast Buttons for Mobile Web Applications](Creating Fast Buttons for Mobile Web Applications)，个人经过实验，页面元素的点击可以考虑用click，和tap效果无明显差别，所以在没有手势库的情况下可以考虑用click来处理用户的点击行为。

禁用webkit浏览器默认样式

webkit上的input,button,及select的默认样式可以通过 –webkit-appearance:none禁用，然后自定义。

Placeholder自适应bug

一个placeholder自适应bug，页面中使用<input>标签并且有属性placeholder，在页面横屏再转回竖屏时，会导致页面无法自适应，无论是android还是ios都会中招。 
解决方法是，在<input>外层容器中加overflow:hidden

无刷新改变当前页面url的问题整理

浏览器对popstate事件的整体支持情况：

1. history的pushState可操作浏览器历史，并且改变当前页面的URL。添加对应的url到历史记录里。但是用pushState方法会产生历史记录，可用replaceState方法代替，不会产生额外的历史记录。
2. hashchange 和popstate事件 触发的时候，hash已经改变了，无法阻止默认行为。即e.preventDefault()不起作用。
3. pushState()方法永远不会触发hashchange事件
4. popstate方法的触发条件：

* 页面前进、后退时触发。 
* Hashchange时触发 
5. 如何跳转 
* 如果history堆栈里有pushState过，那么就回跳到pushState所定的hash页面。如window.history.pushState(‘object’, document.title, “#explorer”);的#explorer页面 
* 没有pushState过，就按照history的记录进行回退和前进。

Iscroll插件问题

Iscroll插件被很多webapp应用中来实现列表滚动，设置translate属性可以使滚动更加顺滑，但是在iscroll4.0中开启了translate属性后会导致滚动无法手动停止，在问答社区中有人说iscroll5会解决这个问题，等iscroll5正式发布后可以尝试一下。Iscroll在ios上表现很出色，但是在一些android手机，尤其是低端机，性能不是很好，所以使用也要慎重。