移动端

说说移动端的适配

设置meta的viewport
- 由于移动端会自动缩放页面，所以我们需要加入meta标签，使到页面不准缩放
布局使用rem、vw/vh 适配以及 flex弹性布局
1px边框像素的问题

rem的缺点:

必须通过js来动态控制根元素 font-size的大小,可能会导致css样式和js代码耦合性

vw的缺点：

vw虽然好用，因为相对于视口，所以失去了最大宽度/高度的限制
宽屏上看到完美，竖屏上就不忍直视了布局会出问题。这时需要你额外为元素添加最大宽度/高度来限制

rem响应式布局原理

rem 是相对于根元素 html 的 font-size 来做计算。通常在页面初始化时加载时通过对 document.documentElement.style.fontSize 设置来实现。

分辨率为1920px*1080px（1920px就是纵向，1080px就是横向了）

js
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            //1080是自己当前电脑的屏幕分辨率像素，便于开发
            var size = 10 * (clientWidth / 1080)
            if(size<12){
                size = 12
            }
            docEl.style.fontSize = size + 'px';

            console.log(clientWidth)
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

H5是什么？

H5 技术是一系列移动端 web 前端技术的集合

H5 技术本身是用于移动端的 web 网页。由于 App 本身有个 “ webview ” 的容器，在容器里可以运行 Web 前端相关代码，由此 H5 和原生 App 结合又衍生出来了 Hybrid App 技术。

H5和原生app的区别

原生app

原生App 优点

⊙ 比移动Web App运行快 ⊙ 一些商店与卖场会帮助用户寻找原生App ⊙ 官方卖场的应用审核流程会保证让用户得到高质量以及安全的App ⊙ 官方会发布很多开发工具或者人工支持来帮助你的开发

原生App 缺点

⊙ 开发成本高，尤其是当需要多种移动设备来测试时 ⊙ 因为是不同的开发语言，所以开发，维护成本也高 ⊙ 因为用户使用的App版本不同，所以你维护起来很困难 ⊙ 官方卖场审核流程复杂且慢，会严重影响你的发布进程

H5

H5 App 优点

⊙ 开发成本低

⊙ 从移动设备上的浏览器访问 ⊙ 不需要安装额外的软件 ⊙ 软件更新只需要服务器就够了

H5 App 缺点 ⊙ 无法使用很多移动硬件设备的独特功能 ⊙ 要同时支持多种移动设备的浏览器让开发维护的成本也不低 ⊙ 如果用户使用更多的新型浏览器，那问题就更不好处理了 ⊙ 对于用户来说，这种App很难被用户发现

移动端注意问题

参考：https://blog.51cto.com/u_9886022/1900575

1、autocomplete自动补全问题

输入框里的autocomplete自动完成功能，在电脑浏览器可能会出现，但是在手机真机上是不会出现的！

3、实现上拉加载：

一般做法是：页码pageNum叠加，列表数据与之前数据进行合并

上拉加载一般是页面滚动到底部时触发，也可以选择在滚动到一定位置的时候触发。

以滚动到一定位置为例。实现原理是分别获得当前滚动条的scrollTop值、当前可视范围的高度值clientHeight以及文档的总高度scrollHeight。当scrollHeight - (scrollTop+clientHeight)小于一定值时，开始加载数据并添加到页面上。

滚动高度 - （滚动条顶部高度 + 可视高度）小于一定值时，开始加载数据

4、实现下拉刷新

1.监听原生touchstart事件，记录其初始位置的值；

2.监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值在Y轴上的差值，作为滑动的距离, 并借助CSS3的translateY属性使元素跟随手势向下滑动对应的差值；同时根据滑动的距离显示不同的文本信息, 例如"下拉刷新"->"释放立即更新";

3.监听原生touchend事件，如果滑动的距离小于设定的最小移动距离就取消加载, 否则进行加载操作; 同时将translateY重设为0，元素回到初始位置。

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

100vh 在safari和chrome浏览器中，100vh是指去掉地址栏和工具的高度，所以会出现滚动条。解决办法：

1、使用window.innerHeight替代100vh

2、动态设置页面高度

js
  const convertStyle = () => {
        document.body.style.setProperty('height', `${window.innerHeight}px`);
    }

    window.addEventListener("resize", convertStyle);
    window.addEventListener("DOMContentLoaded", convertStyle);

3、判断是否是苹果浏览器，然后去减掉工具栏高度

/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)

js
if(/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)){
            localStorage.setItem('isSafari',1)
        }else{
            localStorage.setItem('isSafari',0)
        }

4、使用vh-check库

https://github.com/Hiswe/vh-check

6、String.replaceAll()兼容问题

低版本浏览器、以及安卓浏览器不支持
解决：使用replace()正则来替代

7、底部安全区域横线适配【iphoneX以上型号】

底部tabbar横线适配

在钉钉打开h5，底部tabbar没有问题，在钉钉可能自动适配了，在微信浏览器等其他浏览器需要自己去适配

通过css去设置:

viewport-fit-descriptor env() 和 constant() iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

js
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

第一步：设置网页在可视窗口的布局方式新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：

H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover

js
<meta name="viewport" content="width=device-width, viewport-fit=cover">

js如何获取底部安全区域是多少？

利用css变量

env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：

safe-area-inset-left：安全区域距离左边边界的距离
safe-area-inset-right：安全区域距离右边边界的距离
safe-area-inset-top：安全区域距离顶部边界的距离
safe-area-inset-bottom ：安全距离底部边界的距离

constant：兼容 IOS<11.2

env: 兼容 IOS>11.2

js
:root {
   // iOS < 11.2
    --sat: constant(safe-area-inset-top);
    --sar: constant(safe-area-inset-right);
    --sab: constant(safe-area-inset-bottom);
    --sal: constant(safe-area-inset-left);
   // iOS >= 11.2 
    --sat: env(safe-area-inset-top); 
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
}

在JavaScript中，通过以下方法，读取到css自定义变量

注意：返回的是带有px单位的

js
getComputedStyle(document.documentElement).getPropertyValue("--sat")

统一处理底部tabbar安全区域

less
// 统一处理tabbar安全区域
.taro-tabbar__tabbar-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  margin-bottom: 0px;
}

8、1px像素问题

UI给你设计稿的时候标注这个边框是 1px,认真的前端直接在代码上写 border:1px,结果发现在有的手机中,1px会比实际效果粗.

为什么会有1px的问题

1px不是一定会出现的,比如pc基本不会出现，移动端有的手机也可能不会出现

像素：指在由一个数字序列表示的图像中的一个最小单元，单位是 px，不可再次分割了。设备像素比（DPR）: 设备像素比 = 设备像素 / CSS像素。

window.devicePixelRatio=物理像素 /CSS像素

解决方案

viewport+rem
border-image

缺点：
- 修改颜色麻烦, 需要替换图片
box-shadow模拟边框

缺点：
- 边框有阴影
transform: scale(0.5) + 伪元素模拟的方式

9、window.btoa 某些手机不兼容

window.btoa生成二进制有些手机不兼容，可使用Base64库来解决

10、移动端浏览器高度问题

避免使用100vh
- 移动浏览器(Chrome和Safari)有一个“帮助”功能，地址栏有时可见，有时隐藏，改变了视口的可见大小。这些浏览器没有将100vh的高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为隐藏地址栏的浏览器高度
- 当不展示地址栏时，浏览器的100vh为屏幕可视区的高度，当展示地址栏时，顶部地址栏占了高度
- 100vh=当前视口可见高度，工具栏、地址栏的高度是不包含在100vh里面的
可使用window.innerHeight

说说移动端的适配​

rem的缺点:​

vw的缺点：​

rem响应式布局原理​

H5是什么？​

H5和原生app的区别​

原生app​

H5​

移动端注意问题​

1、autocomplete自动补全问题​

3、实现上拉加载：​

4、实现下拉刷新​

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

6、String.replaceAll()兼容问题​

7、底部安全区域横线适配 【iphoneX以上型号】​

统一处理底部tabbar安全区域​

8、1px像素问题​

为什么会有1px的问题​

解决方案​

9、window.btoa 某些手机不兼容​

10、移动端浏览器高度问题​