文档章节

移动端开发,大多数人都会遇到的几个兼容性坑

o
 osc_g8254g7s
发布于 2019/08/19 18:22
字数 1538
阅读 12
收藏 0

精选30+云产品,助力企业轻松上云!>>>

1、ios端兼容input光标高度

问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上
当点击输入的时候,光标的高度和父盒子的高度一样。例如下图,左图是正常所期待的输入框光标,右边是ios的input光标。

 

出现原因分析:通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离(行高),当点击输入的时候,光标的高度就自动和父盒子的高度一样了。(谷歌浏览器的设计原则,还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值,当有内容时,光标从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上下滑动后,卡顿导致如左图下面部分丢失。

 

出现原因分析:

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

解决办法:只需要在公共样式加入下面这行代码

 

 

 

 

*{
  -webkit-overflow-scrolling: touch;
}复制代码

 

 

 

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

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

MDN上是这样定义的:

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

 

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

问题详情描述:

 输入内容,软键盘弹出,页面内容整体上移,但是键盘收起,页面内容不下滑

出现原因分析:

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

解决办法:

 

 

 

<div class="list-warp">
  <div class="title"><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); } },复制代码

 

拓展知识:

Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而 Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动

 

 

 

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

问题详情描述:

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

 

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

解决办法:

(1)可以使用改页面this.$router.push跳转,为window.location.href去跳转,而不使用路由跳转,这样可以使地址栏的地址与当前页的地址一样,可以分享成功(适合分享的页面不多的情况下,作为一个单单页运用,这样刷新页面跳转,还是..)

(2)把入口地址保存在本地,等需要获取签名的时候 取出来,注意:sessionStorage.setItem(‘href’,href); 只在刚进入单应用的时候保存!【该方法未验证】


作者:codercao
链接:https://juejin.im/post/5d47d2eff265da03f77e4e3a

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
判断是否移动端设备的JS代码,超短,百度都用它

大多数人都使用跳转适配的方式实现PC端到移动端的网页转换,而大多数人又是使用通过判断UA的方法来区分PC端还是移动端,思路一样,但代码各不相同,有长有短,主要是根据自己的编程习惯和网页...

fdhay
2016/12/22
88
0
前端学习---移动端vue开发踩坑记

前言: 大概两个月前投身于一个项目中去,项目是一个移动端的项目,所选用的框架是时下比较流行的vue。这篇文章也是针对这个项目和以前自己学习时的一些总结,包括一些通用的移动端开发要注意...

osc_fbkekcio
2018/02/13
6
0
移动端解决方案--mobileHack

mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案: 工具类网站 HTML5 与 CSS3 技术应用评估 各种奇妙的hack 几乎所有设备的屏幕尺寸与像素密度表 移动设备参数表 ios端移动设备...

1354057778
2015/10/22
647
0
firefox浏览器中使用vux的x-input报错TypeError: _this3.$refs.input.scrollIntoViewIfNeeded is not a function

最近做公众号项目,想着统一风格,所以决定使用vux。 在调试时发现,只要鼠标点击x-input输入框,就会报错 TypeError: _this3.$refs.input.scrollIntoViewIfNeeded is not a function 什么鬼...

osc_n6euf5h6
2019/03/19
2
0
移动端开发的注意事项

  在互联网营销的时代下,大部分企业除了自己的官网之外,也有建设手机网站,在移动用户比PC端用户多的情况下,企业又该如何去优化手机网站呢?其实手机网站建设都有一系列的注意事项,那么...

osc_s8kmhvea
2019/03/17
2
0

没有更多内容

加载失败,请刷新页面

加载更多

63. Unique Paths II

题目: 63. Unique Paths II A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The robot can only move either down or right at any p......

JiaMing
35分钟前
30
0
前后端分离了,跨域问题怎么处理?

利用Nginx反向代理解决跨域问题 使用jsonp 来进行解决,不推荐,老项目可以使用此方案,但是发送的http 请求体有大小限制,并且发送方式为get方式,大小限制、不安全。 服务器代理 CORS 请求...

SpringForA
37分钟前
19
0
Hacker News 简讯 2020-07-10

更新时间: 2020-07-10 00:00 How to track and display profile views on GitHub - (rushter.com) 如何在GitHub上跟踪和显示概要视图 得分:80 | 评论:36 XMEMS Announces World's First Mon......

FalconChen
51分钟前
97
1
如何在Java中将文本追加到现有文件 - How to append text to an existing file in Java

问题: I need to append text repeatedly to an existing file in Java. 我需要将文本重复添加到Java中的现有文件中。 How do I do that? 我怎么做? 解决方案: 参考一: https://stackoom...

fyin1314
昨天
12
0
Eclipse HotKey:如何在选项卡之间切换? - Eclipse HotKey: how to switch between tabs?

问题: How can I switch between opened windows in Eclipse? 如何在Eclipse中打开的窗口之间切换? There is Ctrl + F6 , but it's asking me which one I want, but I want switch it lik......

富含淀粉
昨天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部