移动端遇到的坑

1 h5页面嵌入到app里面需要通信
2 如果有滚动ios会连带着body一块滚动 解决办法 使用inobounce.js解决
3 click事件 点击延迟 解决办法 使用clickfast.js
4 如果出现手机渲染问题 可以加入这几个属性依次试一下

 transform:translate3d(0,0,0)  //css3动画渲染加速
 backface-visibility: hidden;  //隐藏动画
 transform:scale(1.000000001);  //扩大
 transform:scale(0.999999999); //缩小

5 阴影问题
可以给不规则图形加阴影

filter: drop-shadow(0 0 1.33vw rgba(0, 0, 0, 0.5)) 

只能给规则图形加阴影

box-shadow ...

6 ios手机回弹问题 -webkit-overflow-scrolling: touch
这个属性遇到滑动 搜索框显示与隐藏 会很扯淡 加载更多 加载到底部 和顶部会有回弹效果 搜索框就会显示 解决的办法是 监听滚动条 监听touch事件 判断滚动和触摸的方向 监听 触摸速度 但是偶尔还会出现
直接上代码

   public_border() {
        let tabControl = document.getElementById('tab-control')
        if (this.$refs.content.$el.clientHeight < document.body.clientHeight - (getCoupon.clientHeight + tabControl.clientHeight)) {   return }
        if (this.$refs.content.couponType !== 1) {  return   }
      },
      input_show_hide() {
        let getCoupon = document.getElementById("getCoupon");
        let scrollcontent = document.getElementById("scroll-content");
        let couponblock = document.querySelectorAll('.coupon-block')
        var startX, startY, moveEndX, moveEndY, X, Y,
          startMoveTime = 0,
          lastMoveTime = 0;
        let last_scroll_position, new_scroll_position = 0;
        scrollcontent.addEventListener("scroll", e => {
          this.public_border()
          // 滚动条的距离
          last_scroll_position = scrollcontent.scrollTop; //10
          if (new_scroll_position < last_scroll_position && last_scroll_position > getCoupon.clientHeight) {
            // 隐藏
            getCoupon.classList.remove("slideDown");
            getCoupon.classList.add("slideUp");
          } else if (new_scroll_position >= last_scroll_position && last_scroll_position <= getCoupon.clientHeight) {
            getCoupon.classList.remove("slideUp");
            getCoupon.classList.add("slideDown");
            return
          }
          new_scroll_position = last_scroll_position; //10
        });
        scrollcontent.addEventListener("touchstart", e => {
          if (this.$refs.content.couponType !== 1) {
            return
          }
          startX = e.touches[0].pageX;
          startY = e.touches[0].pageY;
          startMoveTime = e.timeStamp || Data.now() //初始时间
          console.log(startMoveTime + ":开始时间")
        });
        scrollcontent.addEventListener("touchmove", e => {
          this.public_border()
          moveEndX = e.changedTouches[0].pageX;
          moveEndY = e.changedTouches[0].pageY;
          X = moveEndX - startX;
          Y = moveEndY - startY;
          lastMoveTime = e.timeStamp || Data.now(); //最后时间
          let moveSpeed = Math.abs(Y) / (lastMoveTime - startMoveTime);
          console.log(moveSpeed + ":速度")
          console.log(scrollcontent.scrollTop)
          // 向下拉 触摸
          if (Math.abs(Y) > Math.abs(X) && moveSpeed > 0.5 && Y > 0) {
            getCoupon.classList.remove("slideUp");
            getCoupon.classList.add("slideDown");
          }
          // up
          else if (Math.abs(Y) > Math.abs(X) && moveSpeed > 0.5 && Y < 0) {
            getCoupon.classList.remove("slideDown");
            getCoupon.classList.add("slideUp");
          }
        });

7 class动态添加的时候尽量不要使用js操作dom
8 上拉加载更多用的是mint ui 可以在github上查看 但是不太顺畅 好像还有适配问题 之后又用了 无限加载更多这个组件 这个组件也会有问题 如果keep-alive 缓存 会一直加载 而且滚动条的位置无法缓存 之后缓存的这个方案就搁浅了
9 手机端尺寸 宽高 都用vw 1-2px还用px 否则有些手机会不显示
10 解决安卓手机圆角失效问题

 border-radius: 2px; 
 background-clip: padding-box;

11 解决ios input 默认圆角边框问题 border-radius: 0;
12 android软键盘弹出 会压缩布局问题 给被压缩的容器设置一个最小高度min-height
13 在能使用基本布局的情况下 不要使用flex布局 这样会造成一些无法预知的情况
比如 下面有一个按钮需要固定在底部 中间又有input输入框 如果用了flex:1 当软键盘弹起的时候 中间的布局可能压缩 这个时候把上面的布局用 智能计算高度
min-height: calc(100% - 13.06667vw); 减去的是按钮的高度
14 android上面line-height不居中问题
原因 1.字体大小不要使用奇数字号,带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。
本质原因:
是Android在排版计算的时候参考了primyfont字体的相关属性(即HHead Ascent、HHead Descent等),而primyfont的查找是看font-family里哪个字体在fonts.xml里第一个匹配上,而原生Android下中文字体是没有family name的,导致匹配上的始终不是中文字体,所以解决这个问题就要在font-family里显式申明中文,或者通过什么方法保证所有字符都fallback到中文字体。
15:
calc() = calc(四则运算)
用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 "+", "-", "*", "/" 运算;
calc()函数使用标准的数学运算优先级规则;
2.使用rem的单位时造成(根元素如果动态改变时,根元素字体可能不是整数)。

处理办法
table布局 在元素外再包一层,使用表格布局

<div class="container"><span class="content">Jason's Word</span> </div>
.container {display: table;}
.content {
    background-color: gray;
    font-size: 10px;
    display: table-cell;
    vertical-align: middle;
}

16 移动端input输入placeholder垂直不居中问题
在移动端编写input输入框时候,为了输入文字与输入框垂直居中,一般情况下,会将input的line-height的高度等于height。但在移动端输入的时候会发现,虽然输入内容确实是垂直居中了,但是光标的位置是靠上的,导致感官上的不美观。于是对input设置的时候,首先确定字体的大小如font-size:16px,其次我们确定设计稿里input的高度,如input高度为40px,那么此时的代码应该是这样的:input{height:16px;line-height:16px;padding:12px 0;border:1px solid #ddd;},这样的代码在移动端无论是视觉还是输入时都是符合要求的。可是html5出来一个新属性,那就是placeholder,不得不说这个属性的出现解救了以往繁琐的js实现效果,但是,当你给input设置了placeholder后,在pc端看,好像是偏上了那么一点点,好像也不是很影响使用。但是在手机端浏览后,就会发现虽然输入文字可以垂直居中,placeholder里的内容明显的靠上,严重的不美观。

在网上查了一些资料,对于原理性的解释好像基本上没看到。但是国外的网站对这个属性给了一个默认的建议,那就是不要设计input的line-height或者设置line-height为normal,即可。

不过,又发现问题了,虽然在手机端正常,但是在pc端看的时候,placeholder还是有点偏下的感觉。强迫症害死人啊。。。那怎么办。。。设置line-height:1.5em,或者将em换算成实际的px也可以。

17 H5微信开发iOS 6.4.7真机上input调起软键盘后不回弹的解决方案
问题描述:input输入在iOS的微信中调起软键盘之后,输入完成收起软键盘的时候页面下方(原来软键盘的位置)有空白,这将导致下方fixed定位按钮失效等问题,解决方案:通过给input添加失去焦点事件,触发该事件的时候使页面自动滑动到顶部,亲测有效,代码如下:

$("input").blur(function(){
        setTimeout(function() {
                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
            }, 300);
    })

18 关于移动端屏幕适配 使用vw单位 但是在pc端比例会比较大 建议在屏幕宽度比较大的情况下加上媒体查询 例如

@media screen and (min-width: 500px) {
  body {
    max-width: 500px;
    margin: auto;
    position: relative;
  }

  .wrapper {
    position: relative;
    height: 850px;
  }

  .wrapper form {
    height: 230px;
    box-shadow: 0 2.5px 17.5px 0 rgba(0, 0, 0, 0.19);
    padding: 15px;
  }

  .wrapper form .form-title {
    font-size: 22px;
  }

  .wrapper form input {
    font-size: 23px;
    margin-top: 10px;
    border-radius: 3px;
    height: 65px;
    line-height: 22.5px;
    padding-left: 15px;
    text-align: center;
  }

  .wrapper form button {
    margin-top: 5px;
  }

  .button {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    margin-top: 20px;
    height: 65px;
    font-size: 23px;
  }

  .wrapper .rules-link {
    font-size: 20px;
  }

  .close-btn {
    width: 35px;
    height: 35px;
  }

  .wrapper .top-container .logo {
    margin-top: 10px;
    margin-left: 15px;
  }

  .rules {
    max-width: 500px;
    height: 850px;
  }

  .rules .rules-container {
    width: 385px;
  }

  .rules h3 {
    font-size: 24px;
    padding: 25px 0;
  }

  .rules ul li {
    margin-bottom: 5px;
  }

  .close-btn::before,
  .close-btn::after {
    width: 35px;
  }

  .wrapper .rules-link {
    line-height: 60px;
  }

  .success-page img {
    padding: 50px 40px;
  }

  .wrapper form .tip{
    font-size: 12px;
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,470评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,393评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,577评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,176评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,189评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,155评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,041评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,903评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,319评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,417评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,013评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2 353

推荐阅读更多精彩内容