【H5】H5安卓、ios兼容性问题

这篇具有很好参考价值的文章主要介绍了【H5】H5安卓、ios兼容性问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、H5兼容性问题

H5在安卓机型和IOS机型或者相同机型的不同浏览器中的某些样式会存在不一样的表现,所以需要解决相应的兼容性问题

二、IOS常见兼容性问题

1、IOS端兼容input光标高度

  • 问题症状:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样
  • 原因分析:通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离(行高),当点击输入的时候,光标的高度就自动和父盒子的高度一样了。(谷歌浏览器的设计原则,还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值,当有内容时,光标从input的顶端到文字的底部)
  • 解决方案:高度height和行高line-height内容用padding撑开

2、IOS键盘唤起,键盘收起以后页面不归位

  • 问题症状:输入内容,软键盘弹出,页面内容整体上移,但是键盘收起,页面内容不下滑
  • 原因分析:固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件
  • 解决方案:
changeBlur () {
     let u = navigator.userAgent, app = navigator.appVersion;
     let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
     if(isIOS){
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
          }, 200)
     }
}
  • 拓展知识: position: fixed的元素在IOS里,收起键盘的时候会被顶上去,特别是第三方键盘

3、IOS端h5页面上下滑动时卡顿、页面缺失

  • 问题描述:在IOS端,上下滑动页面时,如果页面高度超出了一屏,就会出现明显的卡顿,页面有部分内容显示不全的情况
  • 解决方案:只需要在公共样式加入下面这行代码
* {
  -webkit-overflow-scrolling: touch;
}

扩展知识:-webkit-overflow-scrolling是什么?

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.

auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。

touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

4、IOS移动端click事件300ms的延迟响应

  • 问题描述:移动设备上的web网页是有300ms延迟的,往往会造成按钮点击延迟甚至是点击失效
    解决方案:

  • fastclick可以解决在手机上点击事件的300ms延迟

  • zepto的touch模块,tap事件也是为了解决在click的延迟问题

  • 触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件,加快对事件的响应,解决300ms延迟问题

5、IOS双击页面缩放禁止

  • 问题描述:IOS10中自带的Safari浏览器不识别meta viewport
  • IOS10以外解决移动端禁止页面缩放的方法:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  • IOS10解决方案:
(1)禁用双指缩放
document.documentElement.addEventListener('touchstart', function (event) {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
}, false);
(2)禁用手指双击缩放
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
  var now = Date.now();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

三、微信浏览器常见兼容性问题

1、填写表单信息弹出键盘会把页面顶上去,键盘消失的时候页面不自动下来

解决方案:使用onblur方法在表单失去焦点的时候让页面滚动到最顶部。

<form class="form" action="" method="">
    <div>
        <label for="idNumber">身份证号</label><input type="text" name="idNumber" onblur="window.scrollTo(0, 0);" id="idNumber">
    </div>
</form>

2、去除移动端点击时的背景

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
 }

3、去掉input框的默认样式

input {
    background-color: transparent;/*背景变透明*/
    filter: alpha(opacity=0); /*androd*/
    appearance: none;  /*去除系统默认appearance的样式,常用于IOS下移除原生样式(下拉框去掉右侧图标等)*/
    -moz-appearance: none;
    -webkit-appearance: none;
}

4、音视频不自动播放

  • 原因分析:出于节省流量的初衷,IOS系统禁止音视频自动播放
  • 解决方案:使用微信的JS-SDK
(1)先引入微信的JS-SDK
 <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
(2)然后在wx.ready中调用play方法播放
var audio = document.getElementById('bgmusic');
    autoPlayAudio();
    function autoPlayAudio() {
        wx.config({
            // 配置信息, 即使不正确也能使用 wx.ready
            debug: false,
            appId: '',
            timestamp: 1,
            nonceStr: '',
            signature: '',
            jsApiList: []
        });
        wx.ready(function() {
            audio.play();
        });
    }

四、其他兼容性问题

1、在IOS手机上,绑定click事件到非button元素的元素上,IOS下不会触发

解决方案:元素样式添加 cursor:pointer

2、在IOS中li元素按下会有阴影效果

 -webkit-tap-highlight-color: transparent;

3、在IOS中,input会有内阴影

 -webkit-appearance:none;

4、IOS下取消input在输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

5、禁止IOS弹出各种操作窗口

-webkit-touch-callout:none

6、禁止IOS和android用户选中文字

-webkit-user-select:none

7、禁止IOS识别长串数字为电话

<meta content="telephone=no" name="format-detection" />

8、禁止IOS手机识别邮箱

<meta content="email=no" name="format-detection" />

9、IOS系统中文输入法输入英文时,字母之间可能会出现一个六分之一空格

解决方案:可以通过正则去掉 this.value = this.value.replace(/\u2006/g, '');

10、阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

11、在移动端修改难看的点击的高亮效果,IOS和安卓下都有效

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

12、往返缓存问题

点击浏览器的回退,有时候不会自动执行js,特别是在mobilesafari中。这与往返缓存(bfcache)有关系。

解决方法 :window.onunload = function(){};

13、Input 的placeholder会出现文本位置偏上的情况

input 的placeholder会出现文本位置偏上的情况:PC端设置line-height等于height能够对齐,而移动端仍然是偏上,解决是设置line-height:normal

14、在IOS和andriod中,audio元素和video元素无法自动播放

element.addEventListener('touchstart',function(){
    audio.play()
},false)

15、消除 transition 闪屏

-webkit-transform-style: preserve-3d;     /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
-webkit-backface-visibility: hidden;      /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/

16、CSS动画页面闪白,动画卡顿

解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位
2.开启硬件加速
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);

17、fixed定位缺陷

原因分析:

  • IOS下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位
  • android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位
  • IOS4下不支持position:fixed

解决方案: 可用iScroll插件解决这个问题

18、calc的兼容性处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀,目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc,所以要在之前增加一个保守尺寸。

解决方案:文章来源地址https://www.toymoban.com/news/detail-599520.html

div { 
    width: 95%; 
    width: -webkit-calc(100% - 50px); 
    width: calc(100% - 50px); 
}

到了这里,关于【H5】H5安卓、ios兼容性问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端】vant组件移动端兼容性问题汇总

    记录使用vant组件开发过程中遇到的兼容性问题 问题截图: 解决方法: 模拟滚动触发日历组件的加载,在van-calendar上绑定@open=\\\"openCalendar\\\"事件 参考来源:vant 日历插件,部分全面屏手机显示不出来 解决方法: 更改挂载节点,在van-popup上加get-container=“body” 参考来源:vant兼容

    2024年02月10日
    浏览(50)
  • 如何处理Flutter应用在iOS平台上的兼容性问题

    大家好,我是咕噜铁蛋!今天我想和大家聊聊一个常见但令人头疼的问题——Flutter应用在iOS平台上的兼容性问题。在开发跨平台应用时,尤其是在Android和iOS两大平台上,兼容性问题总是难以避免。而Flutter,作为一个旨在解决跨平台开发难题的框架,虽然大大简化了这一过程

    2024年04月14日
    浏览(43)
  • 前端浏览器的兼容性问题探讨和解决方案

    解决不同浏览器之间的兼容性问题,可以采取以下一些常用的解决方案: 使用 CSS Reset:不同浏览器对于默认样式的定义存在差异,使用 CSS Reset 可以将不同浏览器的默认样式重置为统一的基准样式,从而减少浏览器之间的差异。 使用 CSS Hack 或浏览器前缀:某些 CSS 属性或值

    2024年02月14日
    浏览(47)
  • 前端开发中常见的浏览器兼容性问题及解决方案

    提示:这里主要阐述浏览器兼容性产生的环境: 所谓的浏览器兼容性问题,是指 因为不同浏览器对同一段代码有着不同的解析,所造成页面显示效果不统一的情况。 为此,解决浏览器兼容,也成为了跨浏览器开发的一个核心问题。 当初微软不加入W3C,使得后者不采用IE的方

    2023年04月18日
    浏览(47)
  • 前端笔记10——Win7下node.js和npm版本兼容性问题解决。

    新版本node.js不支持WIN7。 Win7的电脑只能支持到Node v13.14.0。 可能之前装了新版本的node,删了重装后,导致运行npm命令老是提醒信息,说是不支持node版本。 npm does not support Node.js v13.14.0 可是显示版本正常 解决方法: 卸载node之后,在把npm和npm cache两个文件夹删掉。 删干净后再

    2024年02月15日
    浏览(58)
  • socket.io 解决浏览器兼容性(WebSocket)

             在上一篇讲了 npm 上最流行的 WebSocket 库之一的 ws 库,那么本篇就来讲另外一个,就是 socket.io 库,socket.io 其实是一个兼容方案,当浏览器不支持 H5 的情况下就不能够使用上一篇内容讲的 WebSocket ,只能采用其他的方案,socket.io 就解决了关于浏览器的兼容。 Node实

    2023年04月21日
    浏览(52)
  • CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)

    CSS3是用于为HTML文档添加样式和布局的最新版本的层叠样式表 (Cascading Style Sheets)。下面是一些常用的CSS3属性及其详细解释: border-radius:设置元素的边框圆角的半径。可以使用四个值设置四个不同的圆角半径,也可以只使用一个值来设置统一的圆角。 box-shadow:创建一个元

    2024年02月08日
    浏览(50)
  • html常见兼容性问题

    1. png24位的图片在iE6浏览器上出现背景 解决方案:做成PNG8,也可以引用一段脚本处理. 2. 浏览器默认的margin和padding不同 解决方案:加一个全局的 *{margin:0;padding:0;} 来统一。 3. IE6双边距bug:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。

    2024年02月12日
    浏览(50)
  • 移动端兼容性问题集锦

    去年主要工作就是混合开发,写app内嵌的h5。在开发期间多多少少遇到些兼容性问题,最近工作比较清闲,整理下方便以后查阅,也希望能帮助到一些同学。 并且本文会持续补充内容,欢迎关注我,另外我会更新一些前端方面的其他一些知识。 问题描述: ios规定日期要以“

    2023年04月08日
    浏览(37)
  • Microsoft edge兼容性问题

    连接需要登录界面的无线网络时候,Microsoft edge老是会出现兼容性问题的错误。 这时候设置什么也打不开。 通过网上搜索,我是通过修改注册表的方法成功的。 Win10 Edge兼容性问题打不开|解决浏览器兼容性问题_白云一键重装系统 步骤一:打开运行 ①可以同时按键盘的Win和

    2024年02月10日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包