移动端常见问题(二)

发表于 | 分类于
| 字数统计: 1.8k 字

WEB前端开发中，除了对PC端浏览器进行各浏览器兼容，移动端页面中android端和ios端的页面兼容也是有很多问题，特此整理一下遇到过的或者可能遇到的常见问题。

1. 解决页面使用overflow: scroll在iOS上滑动卡顿的问题

在滚动的容器中增加: -webkit-overflow-scrolling: touch

2. input输入框ios的光标问题

在ios上有时候看到光标和输入的文字错位比较明显 是因为设置了line-height导致的
解决办法: 使用padding去撑开需要的高度,不使用line-height

3. 移动端click事件300ms的延迟

移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效
解决方案:

  • fastclick插件可以解决在手机上点击事件的300ms延迟
  • 使用zepto的tap事件也是为了解决在click的延迟问题
  • 通过绑定ontouchstart事件,touchstart --> touchmove --> touchend --> click

4. 在ios和andriod中,audio元素和video元素在无法自动播放

1
2
3
$('html').one('touchstart',function(){
    audio.play()
})

5. 如何在手机上实现弹出框弹出时，弹出框内可以上下滚动，背后的页面锁定不能滚动？

弹出模态框 html,body{ height:100%; overflow:hidden }
关闭模态框 html,body{ overflow: visble }

6. flex：固定宽度+flex：1 之后单行或多行省略不生效 在父级加 min-width：0

1
2
3
4
5
6
7
8
9
10
<div class="wrap">
  <div class="item">宽度不确定</div>
  <div class="item"><p class="ellipsis">单行文字省略单行文字省略单行文字省略单行文字省略单行文字省略</p></div>
</div>
<style>
.wrap { display: flex; }
.ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
/* 需要添加 .item { min-width:0 } 单行省略才能生效 */
.item { min-width: 0 }
</style>

7. flex 多列布局中 将最后一列居右显示

1
2
3
// flex 垂直方向 单独设置某一列对象方式时 可以使用 align-self:flex-end
// 但水平方向是没有这样的属性  但可以使用 margin-left: auto 来达到单独居右的效果
.btn { margin-left: auto; }

8. ios的input设置disabled属性后默认样式问题

1
2
3
4
5
6
7
8
input:disabled, input[disabled]{
  background-color : #fff;   //修改默认灰色样式
  filter: alpha(opacity=100);
  -webkit-text-fill-color:#bbb; //字体颜色安卓与IOS适配
  -webkit-opacity:1;   // 不透明级别安卓与IOS适配
  opacity:1;
  color: #bbb;
}

9. ios input自动填充后出现黄色背景问题

1
2
3
4
5
// 解决ios浏览器中 input自动填充黄色背景问题
input:-webkit-autofill,input:-webkit-autofill:focus{
  // -webkit-text-fill-color: #fff !important;
  transition: background-color 55000s ease-in-out 0s;//设置5000s后改变填充密码框的背景色，使背景透明
}

10. 鉴于clip裁切隐藏是最佳可访问隐藏

1
2
3
4
.clip{
   position:absolute;
   clip:rect(0,0,0,0)
}

11. ios机型margin属性无效问题？

最底部元素的margin-bottom在safari里失效,直接padding代替margin

12. ios绑定点击事件不执行？ ios手机,事件委托失效

添加样式cursor:pointer 消除背景的css -webkit-tap-highlight-color:transparent
$('body').on('click',selector,function(){}) 点击无效时,只需要css设置 selector { cursor: pointer; }即可

13. h5底部输入框被键盘遮挡问题

  • 让dom元素出现在可见视图的顶部或底部
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 需要加延迟 部分手机软键盘弹出有延迟
    // scrollIntoView 使调用元素或获得焦点元素出现在视口中
    // scrollIntoViewIfNeeded 将不在视口可见区域的元素滚动到视口可见区域，如果已在视口可见区域则不滚动
    setTimeout(() => {
      //1. ele.scrollIntoView(true)或scrollIntoView() // 滚动之后调用元素顶部与视口顶部尽可能平齐
      // document.querySelector('#inputId').scrollIntoView()
      //2. ele.scrollIntoViewIfNeeded() 同 ele.scrollIntoViewIfNeeded(true) 元素将在其所在滚动区的可视区域中居中对齐
      document.querySelector('#inputId').scrollIntoViewIfNeeded()
    }, 100)

14 .ios页面橡皮弹回效果遮挡页面选项卡？

(1) 有时body和html的height: 100%去除掉问题可能就没有了。
(2) 到达临界值的时候在阻止事件默认行为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var startY,endY;
//记录手指触摸的起点坐标
$('body').on('touchstart',function (e) {
  startY = e.touches[0].pageY;
});
$('body').on('touchmove',function (e) {
  endY = e.touches[0].pageY;  //记录手指触摸的移动中的坐标
  //手指下滑，页面到达顶端不能继续下滑
  if(endY>startY&& $(window).scrollTop()<=0){
    e.preventDefault();
  }
  //手指上滑，页面到达底部能继续上滑
  if(endY<startY&& $(window).scrollTop()+
    $(window).height()>=$('body')[0].scrollHeight){
    e.preventDefault();
  }
})

15. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示

可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决

16. 屏蔽手机系统自带软键盘(用于自定义键盘)

<input type="text" autocomplete="off" unselectable="on" onpaste="return false" onfoucs="this.blur()" />

17. flex多行多列布局中，最后一行子项左对齐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- 弹性布局中，两端对齐，子项是多行时，最后一行 不对齐处理 想让最后一行左对齐  -->
<div class="wrap">
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
</div>
<style>
/* 1. 每一行列数固定 */
/* 方法一. 不使用 justify-content: space-between 使用margin对间隙进行控制 */
.wrap { display: flex; flex-wrap: wrap; }
.list { width: 24%; height: 100px; background-color: skyblue; margin-top: 15px; }
.list:not(:nth-child(4n)) { margin-right: calc(4%/3); }
/* 方法二. 设置最后一行不同元素个数时，不同的margin值 最后一个元素的margin-right就是列表宽度+间隙大小 */
.wrap { display: flex; justify-content: space-between; flex-wrap: wrap; }
.list:last-child:nth-child(4n - 1) { /* 最后一行是三个元素 */
  margin-right: calc(24% + 4%/3); background-color: tomato;
}
.list:last-child:nth-child(4n - 2) { /* 最后一行是两个元素 */
  margin-right: calc(48% + 8%/3); background-color: tomato;
}
/* 2. 列数不固定，html结构也不能调整 使用grid布局 */
.wrap { display: grid; justify-content: space-between; grid-template-columns: repeat(auto-fill, 24%); }
.list { height: 100px; background-color: skyblue; margin-top: 10px; }
</style>

18. flex弹性布局中，img或者button等内容被压缩变形

1
2
3
4
5
6
7
8
<style>
  .con{ display: flex; }
  button{ flex: none; /* flex-shrink: 0; */ }
</style>
<div class="con">
  <p>右侧按钮或图片如果未设置flex:none或flex-shrink:0,右侧按钮会被压缩，右侧按钮不被压缩，随着按钮文字增多，左侧内容宽度自动减小，</p>
  <button>设置</button>
</div>

19. 为每个元素之间添加border或margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
  <ul class="nav">
    <span>首页</span>
    <span>排行榜</span>
    <span>我的订单</span>
    <span>个人中心</span>
  </ul>
  <style>
    .nav{ display: flex; list-style: none; }
    .nav span{ flex: auto;background-color: #444;color: #fff;text-align: center; }
    /* 方法一 使用 + 选择器*/
    /* .nav span + span{ margin-left: 10px; } */
    /* 方法二 使用 :not(:first-child) */
    .nav span:not(:first-child){ margin-left: 10px; }
  </style>
</body>
-------------本文结束感谢您的阅读-------------
0%