最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 移动端常见的一些问题

    正文概述 掘金(我在曾经眺望彼岸)   2021-03-12   598

    前言

    随着移动互联网的兴起,渐渐的手机浏览器也争先恐后的出世,PC浏览器独占鳌头的时代已经过去,现在是多元化时代,由于移动端机型太多,导致前端在每个手机的表现形式不一致,下面针对一些常见的情况出一份文档

    移动端常见问题

    ios端时间显示为NaN

    我们有时候能看到ios在显示时间的时候会显示NaN, 而安卓机却没事

    原因是

    1.ios上的时间dataString必须满足iso8601或者Rfc2822格式不然无法解析

    iso8601:YYYY-MM-DDThh:mm:ss+00:00
    
    而后端返回的可能数据不符合以上格式
    
    1. ios不支持YYYY-MM-DD格式

    解决方案:

    1.后端传回符合格式时间格式
    
    2.前端手动更改-变为/
    

    ios触发input file

    通过js唤起input file时, ios:需要点击两下, android:只需要一下

    **解决方案: **

    ios需要连续触发两下click事件
    input.click()
    input.click()
    

    ios上拍照图片会旋转

    IOS在拍照上传图片的时候,图片会被翻转90度

    解决方案:

    引入Exif.js根据当前图片旋转角度来更改图片角度
    

    移动端双击浏览器会缩放

    <meta name="viewport" content="user-scalable=none, initial-scale=1.0">
    

    虚拟键盘的高度

    我们在有时做移动端的时候会有访问虚拟键盘高度的需求,恰巧安卓与IOS表现行为不一致

    键盘弹出的不同表现

    IOS:IOS的键盘处在窗口的最上层,当键盘弹起时,webview的高度height并没有改变,只是 scrollTop发生变化,页面可以滚动。且页面可以滚动的最大限度为弹出的键盘的高度,而只有键盘弹出时页面恰好也滚动到最底部时,scrollTop的变化值为键盘的高度,其他情况下则无法获取。这就导致在IOS情况下难以获取键盘的真实高度。

    Android:webview中留出空间,该空间小于等于的键盘空间,变化的高度差会随着布局而不同,有的认为键盘高度+页面高度=原页面高度:是错误的误导,只有在某种很巧合的布局情况下才可套用此公式。

    键盘收起的不同表现

    IOS:触发键盘上的按钮收起键盘或者输入框以外的页面区域时,输入框会失去焦点,因此会触发输入框的blur事件。 Android:触发键盘上的按钮收起键盘时,输入框并不会失去焦点,因此不会触发页面的blur事件;触发输入框以外的区域时,输入框会失去焦点,触发输入框的 blur事件。

    监听键盘的弹出与收起

    在h5中目前没有接口可以直接监听键盘事件,但我们可以通过分析键盘弹出、收起的触发过程及表现形式,来判断键盘是弹出还是收起的状态。

    键盘弹出:输入框获取焦点时会自动触发键盘的弹起动作,因此,我们可以监听输入框的focus事件,在里面实现键盘弹出后所需的页面逻辑。这在ios及android中表现一致。

    键盘收起:从第2部分可知,触发键盘收起的不同形式会存在差异化表现,当触发其他页面区域收起键盘时,我们可以监听输入框的blur事件,在里面实现键盘收起后所需的页面逻辑。而在通过键盘按钮收起键盘时在ios与android端存在差异化表现,下面具体分析:

    IOS:触发了输入框blur事件,仍然通过该办法监听。 Android:没有触发输入框的blur事件。但通过第1、2部分我们可以知道,在android中,键盘的状态切换(弹出、收起)不仅和输入框关联,同时还会影响到webview高度的变化,那我们不妨通过监听webview height(window.onresize事件)的变化来判断键盘是否收起

    小结

    1.在ios中,无论何种布局,为了使输入框展示在可视区域中,键盘弹出时,页面会向上滚动,该过程与Element.scrollIntoViewIfNeeded()方法(将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域)产生的效果一致;且高度始终不变,页面可滚动。

    2.在android中,键盘唤起后,页面可滚动与否由其处在正常文档流中的元素决定:如果正常文档流中的元素可全量展示,页面不可滚动,否则页面支持滚动;(如果正常文档流的元素所占的可见区域超过一屏幕可以滚动)

    3.在android中,键盘唤起后,fixed元素的基准会发生变化:根据bottom定位的元素,其基线变为键盘上部;根据top定位的元素,仍然根据页面顶部,因此为照顾正常文档流及fixed元素的用户体验,有的元素可根据顶部定位,有的可以根据底部定位。

    解决方案

    android:
     1.获取键盘弹起前的documentElement的clientHeight
     2.监听window.resize时间或者input的focus事件
     3.在执行第一步
     4.两者相减就是虚拟键盘高度
    
    
    ios:
     ios比较复杂,因为它变得是scrollTop,而window下没有scrollHeight的属性,导致无法计算虚拟键盘高度
     但是在ios13版本以上有个visualViewport
     window.visualViewport.addEventListener('resize', function() {
      window.visualViewport.height
      // 键盘高度
    })
    

    结束语

    各位看官看的可以的点个赞吧,嘻嘻

    可以关注微信公众号哦: 前端马丁

    往期

    ?javascript面试指南(一)

    ?javascript面试指南(二)

    ?javascript技巧(一)

    ?javascript技巧(二)

    ?html凡尔赛技巧


    起源地下载网 » 移动端常见的一些问题

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元