前端开发中碰到的坑、移动端兼容性问题

1、ios兼容input光标高度

问题：input输入光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。

**出现问题原因：**通常我们习惯用height属性设置行间的高度和line-height属性设置行高，当点击输入的时候，光标的高度就自动和父盒子的高度一样了。（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容的时候，光标从input的顶端到文字的底部）

**解决办法：**高度height和行高line-height内容用padding撑开。

2、ios端微信h5页面上下滑动时卡顿、页面缺失

问题：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况。

问题原因：微信浏览器的内核，Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。

*{-webkit-overflow-scrolling:touch;
}//解释：该属性控制元素在移动设备上是否使用滚动回弹效果。
//auto：使用普通滚动，当手指从触摸屏上移开，滚动会立即停止。
//touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。
//       继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

但是呢，这个属性是有bug的，比如如果你的页面中有设置了绝对定位的节点，那么该节点的显示会错乱，当然还有会有其他的一些bug。

3、ios键盘唤起，键盘收起后页面不归位

**问题：**输入内容，软键盘弹出，页面整体内容上移，但是键盘收起，页面内容不下滑。

问题原因：固定定位的元素在元素内 input 框聚焦的时候弹出的软键盘占位失去焦点的时候软键盘消失但是还是占位的导致input框不能再次输入在失去焦点的时候给一个事件。

<div class="list-wrap"><div class="title"><span>姓名</span></span></div><div class="content"><input class="content-input"placeholder="请输入姓名"v-model="peopleList.name"@focus="changefocus()"@blur.prevent="changeBlur()" /></div>
</div>

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里，收起键盘的时候会被顶上去，特别是第三方键盘

4、安卓弹出的键盘遮盖文本框

**问题：**安卓微信H5弹出软键盘后挡住input输入框，如下左图是期待唤起键盘的时候样子，右边是实际唤起键盘的样子

解决办法：给input和textarea标签添加focus事件，如下，先判断是不是安卓手机下的操作，当然，可以不用判断机型，Document 对象属性和方法，setTimeout延时0.5秒，因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了

changefocus(){    let u = navigator.userAgent, app = navigator.appVersion;    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;    if(isAndroid){      setTimeout(function() {       document.activeElement.scrollIntoViewIfNeeded();       document.activeElement.scrollIntoView();      }, 500);    }  }

5、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常

**问题：**ios当前页面分享给好友，点击进来是正常，如果二次分享，则跳转到首页；使用vue router跳转到第二个页面后在分享时，分享设置失败；以上安卓分享都是正常

**原因：**jssdk是后端进行签署，前端校验，但是有时跨域，ios是分享以后会自动带上from=singlemessage&isappinstalled=0 以及其他参数，分享朋友圈参数还不一样，貌似系统不一样参数也不一样，但是每次获取url并不能获取后面这些参数

解决办法：

可以使用改页面this.$router.push跳转，为window.location.href去跳转，而不使用路由跳转，这样可以使地址栏的地址与当前页的地址一样，可以分享成功（适合分享的页面不多的情况下，作为一个单单页运用，这样刷新页面跳转，还是…）
把入口地址保存在本地，等需要获取签名的时候取出来，注意：sessionStorage.setItem(‘href’,href); 只在刚进入单应用的时候保存！

.）

把入口地址保存在本地，等需要获取签名的时候取出来，注意：sessionStorage.setItem(‘href’,href); 只在刚进入单应用的时候保存！

前端项目开发中碰到的坑、移动端兼容性问题相关推荐

Vue项目开发中优雅的切换服务端ip
Vue项目开发中优雅的切换服务端ip 在进行Vue开发的时候,需要配置项目对应服务端的ip地址,但如果需要在多个服务端间进行切换,通常的做法是:手动修改vue.config.js配置文件中的服务端ip ...
vue项目的停止_基于Vue项目开发中遇到的坑及终结
之前一直在公司忙项目,忙项目的,好歹是发布了1.0版本.终于是有时间写一个总结了. 话说我就一个实习生一进来就要做项目核心,真的有点受宠若惊,还好项目是1.0版本,先实现部分功能,访问量也不大,加上一 ...
面试中常问的你在项目开发中遇到过哪些问题怎么回答？
一.你在项目开发中遇到过哪些问题? 此问题的回答一般从三个方向入手,一是技术问题,二是解决方案问题,三是甲方或团队配合问题,针对这三个方面的问题回答示例. 一.技术方面: 开发项目过程中遇到问题是难免 ...
aspnet是前端还是后端_项目开发中无法回避的问题：前端和后端如何合作和并行工作？...
项目开发中无法回避的问题:前端和后端如何合作和并行工作? 前端,后端要想非常愉快的合作开发和集成,那最开始第1步就是要定义一套共用的数据模型接口.这一步是所有工作可以顺利进行的前提. 数据模型接口之后 ...
美团点评境外度假团队前端项目开发实践总结
随着前端项目数量和规模越来越大,参与的人员也越来越多,如何在前端项目开发过程中保证优质的开发者体验和项目的可维护性,同时确保极致的用户体验将会是一个非常大的挑战. 为了应对这个挑战,美团点评境外度假前 ...
React项目开发中的数据管理
原文链接:https://blog.csdn.net/hl582567508/article/details/76982756 redux中文文档:http://cn.redux.js.org/ Re ...
马小看前端( 在开发中遇到问题如何解决 )
马小看前端( 在开发中遇到问题如何解决 ) 今天我们来说说,在开发中遇到问题该如何去找到并且去解决他,相信很多人在开发中不少遇到过bug这个东西,有的对于bug已经无可奈何,搞人心态哦,不过bug是一 ...
前端规范 - 前端项目开发规范
0 前言好好做业务,提高自己的工程能力 [强制] 1 开启eslint 根据团队的习惯,制定适合自己的rules 比如 no-console no-debugger可以关闭 [强制] 2 新项目使用 ...
尚硅谷前端项目开发笔记
尚硅谷前端项目开发笔记 B站视频直达,这个项目亮点在于所有 API 请求都并非在组件内编写,而是在组件内使用this.$store.dispatch() 派发任务,再由 Vuex(actions.mu ...

前端项目开发中碰到的坑、移动端兼容性问题