H5的兼容问题总结

本文档详细探讨了移动Web开发中常见的技术难题,包括Android点击聚焦问题、position:fixed及input中文输入bug、渐变背景设定、touch事件bug、placeholder显示异常等,提供了实用的代码示例和解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

聚焦问题


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手机,尤其是低端机,性能不是很好,所以使用也要慎重。

转载于:https://www.cnblogs.com/luyh2015/p/9687161.html

移动H5 的兼容性问题主要包括以下几个方面: 1. 屏幕适配问题:由于移动设备的屏幕尺寸和分辨率千差万别,需要对页面进行响应式设计,以适应不同的屏幕大小。 2. 浏览器兼容性问题:不同的移动设备可能使用不同的浏览器,而不同的浏览器对 HTML、CSS、JavaScript 的支持程度也有差异,需要进行兼容性测试。 3. 图片加载问题:移动设备的网络环境比 PC 端要差,需要对图片进行优化,以减少页面加载时间。 4. 动画效果问题:移动设备的硬件性能相对较弱,需要对动画效果进行优化,以避免卡顿现象。 5. 视频播放问题:不同的移动设备可能使用不同的视频格式,需要对视频进行兼容性处理。 6. 输入框兼容性问题:移动设备的软键盘弹出时可能会遮挡输入框,需要对输入框进行特殊处理。 7. 其他特殊问题:如微信浏览器的 JS-SDK 接口、单页应用路由跳转问题等。 针对以上问题,可以采用以下方法进行解决: 1. 使用响应式布局方案,如 Bootstrap、Foundation 等。 2. 使用浏览器兼容性 CSS 样式,如 -webkit-、-moz-、-ms- 等。 3. 对图片进行压缩,使用适当的图片格式,如 JPEG、PNG、SVG 等。 4. 使用 CSS3 动画代替 JavaScript 动画,或者使用 JavaScript 动画代替 GIF 动画。 5. 使用 HTML5 视频标签,同时提供多种视频格式。 6. 对输入框进行特殊处理,如监听软键盘事件,调整输入框位置等。 7. 针对特殊问题,查找相关资料或者咨询专业人士进行解决。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值