移动端问题解决

2019/08/24 移动端

最近一直在写移动端,以前的复制粘贴,现在的手写

等以后写多了,我想有经验了,应该也是复制粘贴吧,很多东西不到手机上,不进行手机兼容性测试,发现不了问题。记录兼容性,手机端问题

移动端需求(PC 有些也可以用)

  1. 默认只展示三行,有一个按钮可以点击查看更多(这个有兼容性问题,可以参照文章根据接口页面内容来展示内容的展示与收起)
  display: -webkit-box; //必须配合使用,否则无限
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 3; /** 显示的行数 **/
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden
  1. 点击页面的电话号码,调起手机里面拨号版,并且把电话号码复制到拨号板

最开始的时候以为很难,需要调用原生 app 那边的 api 后来我发现,是我想多了,javascript 原生的方法就可以实现,而且很简单,利用 a 标签的 href 属性

    <!-- 控制它的显隐,弹框确定后,可点击,就跳到打电话页面了 :href="'tel:'+tel" 必须这样写 -->
    <a  :href="'tel:'+tel"></a>

注意了:如果 href 是一个变量值,必须那样写,常量的话就 <a href="'tel:12306"></a>

  1. 以前在移动端遇到过,离开了输入框,但是键盘还没有收起,这个交互有点不太好,导致每次操作都变的很繁琐,(点击非输入框的键盘收起事件)
document.addEventListener('touchend', e => {
  if (['INPUT', 'TEXTAREA'].indexOf(e.target.nodeName) < 0) {
    let inputArr = document.getElementsByTagName('input')
    let textareaArr = document.getElementsByTagName('textarea')
    if (inputArr.length) {
      for (let i = 0; i < inputArr.length; i++) {
        inputArr[i].blur()
      }
    }
    if (textareaArr.length) {
      for (let j = 0; j < textareaArr.length; j++) {
        textareaArr[j].blur()
      }
    }
  }
}, false)

一名伪程序猿——sunseekers,曾被bug虐的体无完肤,却依旧待他如初恋。

如果我改过的某一个bug,吐槽过的某一个需求,写过的某一行代码

曾在你的心里荡起涟漪,那至少说明在逝去的岁月里,我们在某一刻,共同经历着一样的情愫。

有时候,虽然素未谋面。却已相识很久,很微妙也很知足。


如果你喜欢我写过的某一个文字,请支持我,鼓励我,你的鼓励是我最大的动力来源

当然恰好你也喜欢我的话,我们可以互相关注,相互学习的哟!

sunseekers

Search

    Table of Contents