跳到主要内容

谈谈移动端

  • 兼容性？适配？
  • 兼容处理方案？
  • 遇到问题？
  • 多端适配问题？

谈谈meta如何设置​

  • 设置meta的viewport
    • 由于移动端会自动缩放页面，所以我们需要加入meta标签，使到页面不准缩放
    • device-width: 宽度设置为设备的实际宽度
    • initial-scale=1.0: 防止浏览器对页面进行缩放
    • user-scalable=no: 不允许用户手动缩放页面
    • maximum-scale、minimum-scale： 定义放大缩小比例
html
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

谈谈适配方案​

在实际项目中，rem和vw/vh搭配使用，容器的宽高的适配布局，可以通过vw/vh ，内容、字体可以通过rem

  • rem

  • vw/vh

    • 当屏幕大或者屏幕小的时候，字体可能太大或者太小

  • 第三方库：

    • postcss-pxtorem
      • 自动css文件的把px转换为rem
    • amfe-flexible
      • 动态计算根元素html字体大小
    • postcss-pxtorem 转换的是 rem 单位，amfe-flexible 控制的是 rem 的大小，可以搭配使用

  • 搭配 flex弹性布局

  • 媒体查询

    • 使用tailwind的话，媒体查询写起来很方便
      • 如md:w-32、lg:w-48

  • 图片响应式

    • <source> 标签指定不同设备条件下加载的图片资源。
    html
    <picture>
      <source srcset="image-small.webp" type="image/webp" media="(max-width: 600px)">
      <source srcset="image-medium.webp" type="image/webp" media="(max-width: 1200px)">
      <source srcset="image-large.webp" type="image/webp" media="(min-width: 1201px)">
      <img src="default.jpg" alt="Example Image">
    </picture>

谈谈移动端兼容​

  • 边框1px边框像素的问题
  • 底部安全区域横线适配
  • 100vh高度问题
  • 输入框搜索弹出键盘，导航栏会被撑出屏幕抖动问题、还有遮挡的问题
  • 开发h5的时候，在钉钉内置的浏览器打开h5，出现导航栏问题，需要使用钉钉SDK来修改标题

100vh高度问题​

在开发调试，使用100vh是没有问题，但是在真机可能会出现滚动条，因为在真机上，地址栏和工具栏是动态显示和隐藏的

  • 在真机上，100vh是不包含地址栏、工具栏， 会导致出现滚动条
  • 移动端中，地址栏和工具栏会占据一定的高度，如果使用了100vh
  • 比如页面的容器使用了100vh，而出现了地址栏的话，导致容器设置的100vh会超出了可视区域范围，就会出现滚动条了

如何解决：

  • 1、使用window.innerHeight替代100vh
    • 需要使用js来计算高度，手动计算视口高度
  • 2、使用dvh
    • 动态视口单位，这是个新的特性
    • dvh 表示 Dynamic Viewport Height，会随着浏览器工具栏出现/隐藏动态变化

useVh方法​

  • 由于移动端使用vh会有兼容问题，因为vh不包含地址栏和工具栏的高度，当使用100vh的时候，如果出现了地址栏和工具栏。会导致容器的内容被挤下去，导致出现滚动条
  • 通过window.innerHeight动态计算视口的高度
  • 设置css变量，把动态计算好的高度，赋值给这个css变量，让css文件可以直接使用

边框1px边框像素的问题​

在代码上写 border:1px,结果发现在有的手机中,1px会比实际效果粗

解决方案：

  • viewport+rem

  • border-image

    缺点：

    • 修改颜色麻烦, 需要替换图片

  • box-shadow模拟边框

    缺点：

    • 边框有阴影

  • transform: scale(0.5) + 伪元素 模拟的方式

底部安全区域横线适配​

  • 利用css变量
    • env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离
css
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

100vh在ios（safari）浏览器和ios的chrome浏览器问题​

100vh是指去掉地址栏和工具的高度

  • 在ios safari浏览器中，会出现滚动条

解决方案：

  • js解决：window.innerHeight替代100vh
  • css解决：-webkit-fill-available 来自动填满剩余空间

输入框键盘遮挡问题​

先缩小排查范围，先把引发出现的问题范围缩小，比如在弹出框里面的内容操作会影响导航栏被撑出屏幕，那么可以把里面的内容拿出来，看看是里面内容问题 还是输入框有问题，再进一步排查

  • 最后发现是input这个组件问题引起

  • input设置 adjust-position为false

    • adjust-position 表示 是否自动上推页面

h5内嵌app高度适配问题​

  • 当h5内嵌在app时，高度需要减去原生的app顶部状态栏和原生的导航栏高度
  • 通过JS Bridge 来调用app的方法，获取状态栏高度