H5页面前端开发常见的兼容性问题解决方法
1. IOS系统下输入框光标高度不正常
问题描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样,看起来很怪异。例如下图,左图是正常所期待的输入框光标,右边是IOS的 input 光标。
解决办法:高度height和行高line-height内容用padding撑开。
.content{float: left;box-sizing: border-box;height: 88px;width: calc(100% - 240px); .content-input{display: block;box-sizing: border-box;width: 100%;color: #333333;font-size: 28px;// line-height: 88px;padding-top: 20px;padding-bottom: 20px;}
}
2. IOS 端微信H5页面上下滑动时卡顿和页面缺失
问题描述:在IOS端,上下滑动页面时,如果页面高度超出了一屏,就会出现明显的卡顿,页面有部分内容显示不全的情况。例如下图,右图是正常页面,左边是IOS上下滑动后,卡顿导致如左图下面部分丢失。
解决办法:只需要在公共样式加入下面这行代码。
*{-webkit-overflow-scrolling: touch;
}
注意:加了这个属性以后,如果页面中有设置了绝对定位的节点,那么该节点的显示会错乱。
-webkit-overflow-scrolling是什么?MDN上是这样定义的:
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。
auto:使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。
touch:使用具有回弹效果的滚动,当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比,同时也会创建一个新的堆栈上下文。
3. IOS键盘唤起,键盘收起以后页面不归位
问题描述:输入内容,软键盘弹出,页面内容整体上移,但是键盘收起,页面内容不下滑。
解决办法:在输入框失失去焦点的时候添加一个事件,让页面回滚。
changeBlur(){var userAgent = navigator.userAgent; var isIOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);if(isIOS){setTimeout(() => {var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;window.scrollTo(0, Math.max(scrollHeight - 1, 0))}, 200)}
}
注意:固定定位的元素在IOS里,收起键盘的时候会被顶上去,特别是第三方键盘。
4. 安卓弹出的键盘遮盖文本框
问题描述:安卓微信H5弹出软键盘后挡住input输入框,看不到输入的字符。如下左图是期待唤起键盘的时候样子,右边是实际唤起键的样子。
解决办法:给input和textarea标签添加focus事件,先判断是不是安卓手机下的操作,当然,也可以不用判断机型,Document 对象属性和方法setTimeout延时0.5秒,因为调用安卓键盘有一点迟钝,导致如果不延时处理的话,滚动就失效了。
changefocus(){var userAgent = navigator.userAgent;var isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1;if(isAndroid){setTimeout(function() {document.activeElement.scrollIntoViewIfNeeded();document.activeElement.scrollIntoView();}, 500); }
}
Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。
Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域,但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。
5. Vue中使用hash模式路由,微信H5页面在IOS分享异常
问题描述:IOS当前页面分享给好友,点击进来是正常,如果二次分享,则跳转到首页。使用vue router跳转到第二个页面后在分享时,分享设置失败。如下图中的第二个分享就是有问题的,而第一个分享是正常的。
解决办法:
1. 可以用window.location.href去跳转,而不使用路由跳转,这样可以使地址栏的地址与当前页的地址一样,可以分享成功;
2. 把入口地址保存在本地,等需要的时候取出来;
如果能用小程序写的页面,尽量上小程序吧,H5开发在微信开发者工具里看页面效果可能看不出问题,因为不能唤起软键盘。
H5页面前端开发常见的兼容性问题解决方法相关推荐
- 微信 H5 页面前端开发,大多数人都会遇到的几个兼容性坑
关注上方"前端开发博客",选择"设为星标" 回复"2"加入前端群 最近给公司写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑, ...
- 微信H5页面前端开发,大多数人都会遇到的几个兼容性坑(转载)
1.ios端兼容input光标高度 问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样.例如下图,左图是正常所期待的输入框光 ...
- 混合开发与移动端--H5混合开发、H5页面的开发布局、开发注意事项、H5与原生(安卓)交互、webpack打包优化解决方案、H5调试工具、webview
H5混合开发 混合开发.原生开发.H5开发的区别: 简述:主流APP:原生APP.H5(webapp).混合APP,相对应的定制研发即原生开发.H5开发.混合开发 原生APP开发优缺点: 可以访问手机 ...
- 实况2018服务器维护,《实况足球2018》常见dll丢失问题解决方法汇总
<实况足球2018>常见dll丢失问题解决方法汇总 2017-10-17 10:18:14来源:绿茵吧编辑:评论(0) <实况足球2018>已经发售一段时间,玩家在进入体验式也 ...
- anguler 画面布局适应屏幕大小_前端开发常见的五大布局模式,绝对不要错过这篇分享!...
点击上方蓝字关注我哦前端五大常见布局 前端5种常见布局方式 作为前端开发工程师,布局方式有多种,对于不同的场景可以使用不同的布局方式,但是很多刚参加工作的同学对于这些不是很了解,那么我们就先来简单的来 ...
- 移动端H5页面编辑器开发实战--原理结构篇
一.前言 在去年10月份左右,接到了需求:开发一个H5移动端页面编辑器的任务,目的主要是解放公司内在制作这类网页的所投入的人力以及解决使用外部H5编辑器所涉及到的版权问题. 因此,一款能够与市面上已经 ...
- 移动端H5页面编辑器开发实战--经验技巧篇
一.前言 在上一篇<原理结构篇>中,主要针对移动端网页进行了分类描述,并介绍了H5编辑器的需求.原理以及框架结构,本文将延续开发实战这一主题,针对策略和开发技巧做进一步的介绍. 二.策略篇 ...
- 前端开发常见的缩写词中英文对照
趁着周末总结一下我们作为前端开发人员,需要掌握的一些缩写的词,这次总结的都是概念中的内容,不包括流行的框架,库等的名词. 关于框架和库的名词介绍,欢迎关注我后续的更新. AJAX ==[Asynchr ...
- 浏览器配置异常_IE浏览器常见故障及问题解决方法大全
IE浏览器常见问题解决方法.IE浏览器常见故障全指南. IE浏览器常见故障 1.发送错误报告 故障现象在使用IE浏览网页的过程中,出现Microsoft Internet Explorer遇到问题需要 ...
最新文章
- Adapter的getView
- mysql 连接url中useUnicode=truecharacterEncoding=UTF-8 的作用
- ajax返回值怎么取出来_螺丝断孔里了,怎么取出来?
- dcmtk程序包综述(1)
- ols残差_python数据关系型图表散点图系列残差分析图
- 用python进行归并排序,用Python做归并排序
- MTK 驱动部分双分区升级原理
- 安装linux ubuntu11系统时,应该如何选择键盘布局,在ubuntu上创建新键盘布局需要哪些步骤?...
- javascript 获取邮箱的后缀
- 个人资料管理经验总结
- Laravel 速查表 Cache
- 信捷PLC中Y0用C语言怎么表示,信捷PLC
- Word图片插入后只显示最底下一行,输入文字后后面的文字不见了(解决办法(全程简洁无废话))
- Write Zeroes
- QQ侧滑菜单的实现和拓展-DrawerLayout
- 不仅仅是“屠龙之技”-编译器开发者的精神胜利!
- php 高德地图点击事件,javascript - 高德地图marker动态绑定点击问题
- openFrameworks下的肤色检测源码
- 四旋翼与四元数学习笔记
- 工程经济—资金时间价值的计算及应用
热门文章
- html 高度塌陷,前端高度塌陷问题
- android平板忘了密码,平板电脑忘记密码怎么办
- Manifest merger failed with multiple errors, see logs解决方案
- 互联网产品的定义及分类
- 做为一个玩家如何架设传奇
- 爱立信携手韩国SK电讯和宝马实现全球首个多车辆5G测试
- C语言/771.宝石与石头
- 6.7.1 机器人系统仿真/URDF、Gazebo与Rviz综合运用/机器人运动控制以及里程计信息显示
- ffmpeg截取视频流、rtsp录mp4,与海思NVR,内存问题
- Android中的线程