前端 iOS 和 Android 的兼容问题 |
您所在的位置：网站首页 › vue做h5兼容所有屏幕怎么做 › 前端 iOS 和 Android 的兼容问题 |
前端 iOS 和 Android 的兼容问题
|
目录
一、javascript 兼容1、iOS 日期的兼容2、iOS 的 beforeunload 事件的兼容3、Android 下，点击 input 框键盘将页面顶起4、iOS 点击 input 框键盘将底部按钮顶起，正常需要隐藏底部按钮5、iOS 键盘收起，页面底部出现空白问题6、Android 和 iOS 下，表单的 input 事件和 change 事件
二、css 兼容1、iOS 下，input 框聚焦时出现 outline 或者阴影2、Android 和 iOS 下，设置 input 框禁止选择内容3、iOS 改变 input 框的默认 placeholder 属性样式4、iOS 下，input 框输入的内容偏上5、Android 下 line-height 和 height 的兼容6、iOS 下，解决 “input 按钮” 样式会被默认样式覆盖的问题7、iOS 下，阻止图片在 微信 里被点击放大8、Android 下，margin-top 失效9、Android 下页面出现横向滚动条，iOS 正常10、Android 下给页面设置 fixed 固定定位无效，iOS 正常11、iOS 适配底部小横条（Android 机上也可以调出这个小横条的）12、iOS 中字体加粗无效 Android 正常13、iOS 下拉页面时，自定义的头部导航栏消失了
三、html 兼容1、iOS 下，会将数字当成电话号码，导致变色
一、javascript 兼容
1、iOS 日期的兼容
ios 下 new Date('2020-03-11 00:00:00') 不生效，需要对日期进行 date.replace(/-/g, '/') 处理。 2、iOS 的 beforeunload 事件的兼容ios 下 beforeunload 事件废弃了，需要使用 pagehide 事件替代。 3、Android 下，点击 input 框键盘将页面顶起 // vue // ... focus () { const u = navigator.userAgent; const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; // 判断机型，android终端 if (isAndroid) { const that = this const originalHeight = document.documentElement.clientHeight || document.body.clientHeight window.onresize = function () { const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight if (resizeHeight - 0 originalHeight - resizeHeight}px` } else { that.$refs.input.style.bottom = `0px` } } } }, 4、iOS 点击 input 框键盘将底部按钮顶起，正常需要隐藏底部按钮因为是点击input后触发的问题，所以应该在input聚焦时处理，也就是放在focus事件中改变页面的top值。 下面是解决该问题的大概的模板： // vue // ... focus () { const u = navigator.userAgent; const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // 判断机型，ios终端 if (isiOS) { document.body.addEventListener("focusin", () => { // 软键盘弹出的事件处理 this.isShowFooterBar = false; }); document.body.addEventListener("focusout", () => { // 软键盘收起的事件处理 this.isShowFooterBar = true }); } }【拓展】 ios：focusin 和 focusout 事件支持冒泡，分别对应 focus 和 blur 事件。 上面的方法中，之所以使用 focusin 和 focusout 的原因是：假设有多个输入框需要处理，这样就可以使用事件代理来处理多个输入框存在的情况了。 5、iOS 键盘收起，页面底部出现空白问题 // vue // ... blur () { window.scrollTo(0, 0) } 6、Android 和 iOS 下，表单的 input 事件和 change 事件ios11之后，有些情况使用 input 事件 ios 自带的输入法，当选择拼音输入时会自动输入多个字符，这是因为有时 ios 对 input 事件不兼容导致的，使用 change 事件即可解决这个问题。 ios 收起输入法时会失去焦点，触发 change 事件，但是 Android 收起输入法时并不会失去焦点，所以可以通过判断 UA（navigator.userAgent） 的方式来针对不同系统使用不同的事件。 二、css 兼容 1、iOS 下，input 框聚焦时出现 outline 或者阴影 input:focus{outline:none} // 去除外边框 input:{-webkit-appearance: none;} 2、Android 和 iOS 下，设置 input 框禁止选择内容 // android 中这样实现 input { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none; } // ios 中应当将上述样式中的属性 -webkit-user-select 的值由 none 改为 auto input { -webkit-user-select: auto; } 3、iOS 改变 input 框的默认 placeholder 属性样式 input::-webkit-input-placeholder { color: #bbb; font-size: 0.3rem; line-height: normal; } 4、iOS 下，input 框输入的内容偏上 // 给你 input 去除 line-height 属性，然后添加下面的样式 input::-webkit-input-placeholder { line-height: normal; } 5、Android 下 line-height 和 height 的兼容对于一般PC浏览器以及iOS设备的浏览器表现就是我们想要的居中效果，但是大部分 Android 设备的浏览器文字都会稍微向上偏离。 结合行高、对齐的关系 和 伪元素，可以给当前元素添加以下样式来尝试解决该问题： &::before { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; margin-top: 1px; } 6、iOS 下，解决 “input 按钮” 样式会被默认样式覆盖的问题 input, textarea { border: 0; -webkit-appearance: none; } 7、iOS 下，阻止图片在 微信 里被点击放大 img { pointer-events: none; } 8、Android 下，margin-top 失效给其父元素添加 padding-top，代替该元素的 margin-top。 9、Android 下页面出现横向滚动条，iOS 正常给该元素设置： overflow-x: hidden; 10、Android 下给页面设置 fixed 固定定位无效，iOS 正常给该元素设置： position: fixed; left: 0; top: 0; 11、iOS 适配底部小横条（Android 机上也可以调出这个小横条的）此方案亦可解决：H5 嵌入式开发时，让页面适配端上提供的组件。
第一步：需要在 index.html 文件中的 标签中增设 viewport-fit 属性来改变网页在可视窗口的布局方式 viewport-fit 属性是 iOS11 新增的特性。苹果公司为了适配 iPhoneX 对现有 viewport meta 标签新增加的一个扩展，用于设置网页在可视窗口的布局方式。 viewport-fit 可设置三个值： auto：默认值，效果与 contain 一样。contain：可视窗口完全包含网页内容（类似于给第二步：在需要兼容的页面中用 env() 和 constant() 这两个 CSS 函数来设定安全区域以及边界的距离。 env() 和 constant() 是 iOS11 新增的两个 CSS 特性，用来设定安全区域以及边界的距离。 env() 和 constant() 可设置四个值： safe-area-inset-left：安全区域离 左边 边界的距离。safe-area-inset-right：安全区域离 右边 边界的距离。safe-area-inset-top：安全区域离 顶部 边界的距离。safe-area-inset-bottom：安全区域离 底部 边界的距离。 .box { position: fixed; bottom: 0; left: 0; width: 100%; height: 3.87rem; padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS=11.2 */ }【注意】constant 和 env 的先后顺序不能换。 【参考文献】网页适配 iPhoneX，就是这么简单 12、iOS 中字体加粗无效 Android 正常这是我遇到的一个问题，当时去掉 font-family 就好了。 13、iOS 下拉页面时，自定义的头部导航栏消失了因为，iOS 自带的回弹特效不会触发 scroll 事件，也就导致 scrollTop 的值为 undefined。需要做一个兼容：默认是 0 就好了——let scrollTop = e.target.scrollTop || 0。 三、html 兼容 1、iOS 下，会将数字当成电话号码，导致变色【参考】 H5 软键盘 兼容方案 前端ios和安卓的兼容性问题 web前端兼容性问题总结 ios兼容性问题 |
iOS 底部有个小横条，如何保证内容不被横条遮挡呢？最好的办法就是用 CSS 来做下兼容。【本文地址】
今日新闻 |
推荐新闻 |