前端项目开发中碰到的坑、移动端兼容性问题_scrollintoview的坑-程序员宅基地

技术标签: 经验分享  前端  

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

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); 只在刚进入单应用的时候保存!
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/thewar196/article/details/123729811

智能推荐

ViewPager+Fragment实现Tab主界面_viewpager + fragment 完成新闻模块主页面-程序员宅基地

文章浏览阅读6.3k次。毕竟是第一次做项目,所以在每一点上都做得特别认真,接下来我来给大家大致讲述一下用ViewPager+Fragment来实现app Tab主界面,突然想起来LZ居然2天没去上课了......(>....package com.bob.tabui;import android.support.v4.app.*;import android.os.Bundle;import android._viewpager + fragment 完成新闻模块主页面

前端面试(4)之zoom一面没后续-程序员宅基地

文章浏览阅读3.1k次。  视频面,面试官问的非常的细节,大概一个小时的时间,涉及到多个方面。是我面过的问的问题最多的,但是没有非常的深入。JS部分es5到es6,有什么变化?原型链,怎么不用instance of知道一个对象的类型。正则表达式中的exce方法。apply和call的区别。怎么用apply计算一个数组的最大值。typeof和instanceof的区别。怎么设置一个变量的默认值。异步加载j..._zoom一面多久出结果

Chrome for mac 58 之后burpsuite 证书不信任的解决方法_chrome58以后-程序员宅基地

文章浏览阅读2.3k次。一句话,升级burp到最新的2.x版本,问题解决~1.6那么好用的版本还是要淘汰了。_chrome58以后

Problem——118A. String Task——Codeforces_problem 118a - string task-程序员宅基地

文章浏览阅读134次。time limit per test2 secondsmemory limit per test256 megabytesinputstandard inputoutputstandard outputPetya started to attend programming lessons. On the first lesson his task was to write a simpl..._problem 118a - string task

第二章、Groovy基础功能窥探_图灵 groovy-程序员宅基地

文章浏览阅读421次。文章目录1、生成代码1.1、Groovy 代码注释1.2、编译Groovy代码和java语法1.3、简洁之美2、assertion 断言探针3、Groovy一瞥3.1、声明类3.2、使用脚本 (测试类)3.3、Groovy bean3.4、注解(annotations)3.5、使用@Grab3.6、处理文本3.7、Numbers是数字对象3.8、使用Lists, Maps, ranges3.9、闭包(代码即对象)3.10、Groovy 控制语句4、Groovy在java环境中的位置4.1、我的类是你的类4._图灵 groovy

Wireshark抓取数据包_wireshark如何抓取clink数据包-程序员宅基地

文章浏览阅读3.8k次,点赞5次,收藏16次。分析ICMP协议数据包实验原理 ping是用来测试网络连通性的命令,一旦发出ping命令,主机会发出连续的测试数据包到网络中,在通常的情况下,主机会收到回应数据包,ping采用的是ICMP协议。实验步骤 在过滤条件中分别输入“icmp” 点击开始抓包,为了抓取使用ICMP的包,我们要设置过滤条件,点击“选项”。 这是可以看到抓包过滤按钮后面..._wireshark如何抓取clink数据包

随便推点

c#基于sqlserver数据库的三层架构_c#数据库三层架构列子-程序员宅基地

文章浏览阅读2.8k次。我比较菜,大神就不用看了,写这个是为了做一个学习记录。本来布置的是基于sqlite,还涉及对配置文件的读写,还有基于Base64编码,读取sqlite数据库。上网查了资料对具体的实现方法还是不很清楚,于是就用sqlserver简单的实现了一下。谈谈我自己的理解吧,首先是优点 ,它把一个项目分成了三个大块(UI,DAL,BLL),让它们各司其职,某一个地方出现问题,更改自己的那一亩三分地_c#数据库三层架构列子

Java 内存模型及GC原理 (转)-程序员宅基地

文章浏览阅读58次。来源:http://blog.csdn.net/ithomer/article/details/6252552一个优秀Java程序员,必须了解Java内存模型、GC工作原理,以及如何优化GC的性能、与GC进行有限的交互,有一些应用程序对性能要求较高,例如嵌入式系统、实时系统等,只有全面提升内存的管理效率,才能提高整个应用程序的性能。本文将从JVM内存模型、GC工作原理,以及GC的...

Lingo数据_lingo的数据-程序员宅基地

文章浏览阅读1.2k次。3.1 模型的数据部分 3.1.1 数据部分入门 数据部分提供了模型相对静止部分和数据分离的可能性。显然,这对模型的维护和维数的缩放非常便利。 数据部分以关键字“data:”开始,以关键字“enddata”结束。在这里,可以指定集成员、集的属性。其语法如下:object_list = value_list; 对象列(object_list)包含要指定值的属性名、要设置集成员的集名,用_lingo的数据

Hive UDAF开发详解_hive udaf如何选择objectinspector-程序员宅基地

文章浏览阅读787次。说明这篇文章是来自Hadoop Hive UDAF Tutorial - Extending Hive with Aggregation Functions:的不严格翻译,因为翻译的文章示例写得比较通俗易懂,此外,我把自己对于Hive的UDAF理解穿插到文章里面。udfa是hive中用户自定义的聚集函数,hive内置UDAF函数包括有sum()与count(),UDAF实现有简单与通用两种方式,简..._hive udaf如何选择objectinspector

HTML5&CSS3基础:HTML的列表,超链接(2)_css,html阶段案例风云人物列表页面超链接-程序员宅基地

文章浏览阅读521次,点赞2次,收藏2次。该篇文章主要对HTML的列表和超链接进行知识小结,包含了几种列表和超链接的定义、组成、格式等。文章目录第一节:课程简介第三节:HTML的简介、标记、属性前言一、列表1. 无序列表1.1 标记组成1.2 标记属性1.3 语法格式及用法2. 有序列表2.1 标记组成2.2 标记属性2.3 语法格式及用法3.定义列表3.1 标记组成3.2 语法格式及用法4.列表嵌套二、超链接1. 超链接标记2. 文件路径3. 超链接其它用法第一节:课程简介点击访问第一节内容第三节:HTML的简介、标记、属性..._css,html阶段案例风云人物列表页面超链接

为何现在开源OA越来越热门?_open oa-程序员宅基地

文章浏览阅读194次。开源软件,有何缺点和优点?如上图所示:一种典型的回答是,优点就是可以自己改,缺点是安全性差。当然,从优点上来讲,选择开源OA或者开源软件有非常多的优点,可不仅仅是可以自己改和便宜,比如:1、能更详细地了解供应商或者选择的项目是否优质,代码一看就明白了;2、可以得到更好的技术支持,发布开源软件的开发者一般都会留下联系方式,遇到问题可以直接通过公开的方式进行联系,解决自己遇到的问题;3、因为有很多人都在使用,项目的迭代会持续进行,相当于大家都在为同一个项目不断提供经验,不断修复问题,项目_open oa