移动设备适配

2023年07月07日约526字预计需要2分钟

屏幕显示适配

获取屏幕的逻辑分辨率

1 2	`const clientWidth = document.documentElement.clientWidth; const clientHeight = document.documentElement.clientHeight;`

可以使用在线网站获取：https://cn.screenresolution.org/

进而使用媒体查询细度适配：

1	`@media screen and (max-width: 1344px){}`

参考：

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

下表总结了 Bootstrap （bs5）网格系统如何在不同设备上工作的：

	超小设备 <576px	平板 ≥576px	桌面显器 ≥768px	大桌面显器 ≥992px	特大桌面显器 ≥1200px	超大桌面显器 ≥1400px
容器最大宽度	None (auto)	540px	720px	960px	1140px	1320px
类前缀	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
列数量和	12
间隙宽度	1.5rem	左右各0.75rem
可嵌套	Yes
列排序	Yes

ios-100vh包含地址栏

动态计算100vh的值，或者说动态计算1vh高度。或者使用100%替代100vh

界面自适应rem

动态计算根节点font-size大小；postcss-px2rem插件

媒体查询

ios-300ms延时-点击输入框页面放大

双击缩放禁用，touchend事件

事件的触发顺序是touchstart -> touchend -> click

1	`<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">`

CSS的touch-action属性用于设置触摸屏用户如何操纵元素的区域，它允许移除特定元素或整个文档的触发延迟，而无需禁用缩放

1
2
3

html{
    touch-action:manipulation
}

FastClick库原理

// 业务代码
var $test = document.getElementById('test')
$test.addEventListener('click', function () {
    console.log('1 click')
})

// FastClick简单实现
var targetElement = null
document.body.addEventListener('touchstart', function () {
    // 记录点击的元素
    targetElement = event.target
})
document.body.addEventListener('touchend', function (event) {
    // 阻止默认事件（屏蔽之后的click事件）
    event.preventDefault()
    var touch = event.changedTouches[0]
    // 合成click事件，并添加可跟踪属性forwardedTouchEvent
    var clickEvent = document.createEvent('MouseEvents')
    clickEvent.initMouseEvent('click', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null)
    clickEvent.forwardedTouchEvent = true // 自定义的
    targetElement.dispatchEvent(clickEvent)
})