### HTML方向
##### 调用系统功能
使用`<a>`能快速调用移动设备的`电话/短信/邮件`三大通讯功能，使用`<input>`能快速调用移动设备的的`图库/文件`。
这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被`移动端浏览器`忽略。
```
<!-- 拨打电话 -->
<a href="tel:10086">拨打电话给10086小姐姐</a>
<!-- 发送短信 -->
<a href="sms:10086">发送短信给10086小姐姐</a>
<!-- 发送邮件 -->
<a href="mailto:young.joway@aliyun.com">发送邮件给JowayYoung</a>
<!-- 选择照片或拍摄照片 -->
<input type="file" accept="image/*">
<!-- 选择视频或拍摄视频 -->
<input type="file" accept="video/*">
<!-- 多选文件 -->
<input type="file" multiple>
```
##### 忽略自动识别
有些`移动端浏览器`会自动将数字字母符号识别为`电话/邮箱`并将其渲染成上述**调用系统功能**里的`<a>`。虽然很方便却有可能违背需求。
```
<!-- 忽略自动识别电话 -->
<meta name="format-detection" content="telephone=no">
<!-- 忽略自动识别邮箱 -->
<meta name="format-detection" content="email=no">
<!-- 忽略自动识别电话和邮箱 -->
<meta name="format-detection" content="telephone=no, email=no">
```
##### 弹出数字键盘
使用`<input type="tel">`弹起数字键盘会带上`#`和`*`，适合输入电话。推荐使用`<input pattern="\d*">`弹起数字键盘，适合输入验证码等纯数字格式。
```
<!-- 纯数字带#和* -->
<input type="tel">
<!-- 纯数字 -->
<input pattern="\d*">
```
##### 唤醒原生应用
通过`location.href`与原生应用建立通讯渠道，这种页面与客户端的通讯方式称为**URL Scheme**，其基本格式为`scheme://[path][?query]`，笔者曾经发表过[《H5与App的通讯方式》](https://juejin.cn/post/6844904020201455624)讲述`URL Scheme`的使用。
* **scheme**：应用标识，表示应用在系统里的唯一标识
* **path**：应用行为，表示应用某个页面或功能
* **query**：应用参数，表示应用页面或应用功能所需的条件参数
`URL Scheme`一般由前端与客户端共同协商。唤醒原生应用的前提是必须在移动设备里安装了该应用，有些`移动端浏览器`即使安装了该应用也无法唤醒原生应用，因为它认为`URL Scheme`是一种潜在的危险行为而禁用它，像`Safari`和`微信浏览器`。还好`微信浏览器`可开启白名单让`URL Scheme`有效。
若在页面引用第三方原生应用的`URL Schema`，可通过抓包第三方原生应用获取其`URL`。
```
<!-- 打开微信 -->
<a href="weixin://">打开微信</a>
<!-- 打开支付宝 -->
<a href="alipays://">打开支付宝</a>
<!-- 打开支付宝的扫一扫 -->
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a>
<!-- 打开支付宝的蚂蚁森林 -->
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>
```
##### 禁止页面缩放
在智能手机的普及下，很多网站都具备`桌面端`和`移动端`两种浏览版本，因此无需双击缩放查看页面。禁止页面缩放可保障`移动端浏览器`能无遗漏地展现页面所有布局。
```
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
```
##### 禁止页面缓存
**Cache-Control**指定请求和响应遵循的缓存机制，不想使用浏览器缓存就禁止呗！
```
<meta http-equiv="Cache-Control" content="no-cache">
```
##### 禁止字母大写
有时在输入框里输入文本会默认开启首字母大写纠正，就是输入首字母小写会被自动纠正成大写，特么的烦。直接声明`autocapitalize=off`关闭首字母大写功能和`autocorrect=off`关闭纠正功能。
```
<input autocapitalize="off" autocorrect="off">
```
##### 针对Safari配置
贴一些`Safari`较零散且少用的配置。
```
<!-- 设置Safari全屏，在iOS7+无效 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 改变Safari状态栏样式，可选default/black/black-translucent，需在上述全屏模式下才有效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 添加页面启动占位图 -->
<link rel="apple-touch-startup-image" href="pig.jpg" media="(device-width: 375px)">
<!-- 保存网站到桌面时添加图标 -->
<link rel="apple-touch-icon" sizes="76x76" href="pig.jpg">
<!-- 保存网站到桌面时添加图标且清除默认光泽 -->
<link rel="apple-touch-icon-precomposed" href="pig.jpg">
```
##### 针对其他浏览器配置
贴一些其他浏览器较零散且少用的配置，主要是常用的`QQ浏览器`、`UC浏览器`和`360浏览器`。
```
<!-- 强制QQ浏览器竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- 强制QQ浏览器全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- 开启QQ浏览器应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- 强制UC浏览器竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- 强制UC浏览器全屏 -->
<meta name="full-screen" content="yes">
<!-- 开启UC浏览器应用模式 -->
<meta name="browsermode" content="application">
<!-- 开启360浏览器极速模式 -->
<meta name="renderer" content="webkit">
```
##### 让:active有效，让:hover无效
有些元素的`:active`可能会无效，而元素的`:hover`在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。给`<body>`注册一个空的`touchstart事件`可将两种状态反转。
```
<body ontouchstart></body>
```
### CSS方向
##### 自动适应布局
针对移动端，笔者通常会结合JS依据`屏幕宽度`与`设计图宽度`的比例动态声明`<html>`的`font-size`，以`rem`为长度单位声明所有节点的几何属性，这样就能做到大部分移动设备的页面兼容，兼容出入较大的地方再通过`媒体查询`做特别处理。
笔者通常将`rem布局比例`设置成`1rem=100px`，即在设计图上`100px`长度在CSS代码上使用`1rem`表示。
```
function AutoResponse(width = 750) {
const target = document.documentElement;
if (target.clientWidth >= 600) {
target.style.fontSize = "80px";
} else {
target.style.fontSize = target.clientWidth / width * 100 + "px";
}
}
AutoResponse();
window.addEventListener("resize", () => AutoResponse());
```
当然还可依据`屏幕宽度`与`设计图宽度`的比例使用`calc()`动态声明`<html>`的`font-size`，这样就能节省上述代码。不对，是完全代替上述代码。
```
html {
font-size: calc(100vw / 7.5);
}
```
若以`iPad Pro`分辨率`1024px`为移动端和桌面端的断点，还可结合`媒体查询`做断点处理。`1024px`以下使用`rem布局`，否则不使用`rem布局`。
```
@media screen and (max-width: 1024px) {
html {
font-size: calc(100vw / 7.5);
}
}
```
##### 自动适应背景
使用`rem布局`声明一个元素背景，多数情况会将`background-size`声明为`cover`。可能在设计图对应分辨率的移动设备下，背景会完美贴合显示，但换到其他分辨率的移动设备下就会出现左右空出`1px`到`npx`的空隙。
此时将`background-size`声明为`100% 100%`，跟随`width`和`height`的变化而变化。反正`width`和`height`都是量好的实际尺寸。
```
.elem {
width: 1rem;
height: 1rem;
background: url("pig.jpg") no-repeat center/100% 100%;
}
```
##### 监听屏幕旋转
你还在使用JS判断横屏竖屏调整样式吗？那就真的`Out`了。
```
/* 竖屏 */
@media all and (orientation: portrait) {
/* 自定义样式 */
}
/* 横屏 */
@media all and (orientation: landscape) {
/* 自定义样式 */
}
```
##### 支持弹性滚动
在苹果系统上非`<body>`元素的滚动操作可能会存在卡顿，但安卓系统不会出现该情况。通过声明`overflow-scrolling:touch`调用系统原生滚动事件优化`弹性滚动`，增加页面滚动的流畅度。
```
body {
-webkit-overflow-scrolling: touch;
}
.elem {
overflow: auto;
}
```
##### 禁止滚动传播
与`桌面端浏览器`不一样，`移动端浏览器`有一个奇怪行为。当页面包含多个滚动区域时，滚完一个区域后若还存在滚动动量则会将这些剩余动量传播到下一个滚动区域，造成该区域也滚动起来。这种行为称为**滚动传播**。
若不想产生这种奇怪行为可直接禁止。
```
.elem {
overscroll-behavior: contain;
}
```
##### 禁止屏幕抖动
对于一些突然出现滚动条的页面，可能会产生左右抖动的不良影响。在一个滚动容器里，打开弹窗就隐藏滚动条，关闭弹窗就显示滚动条，来回操作会让屏幕抖动起来。提前声明滚动容器的`padding-right`为滚动条宽度，就能有效消除这个不良影响。
每个`移动端浏览器`的滚动条宽度都有可能不一致，甚至不一定占位置，通过以下方式能间接计算出滚动条的宽度。`100vw`为视窗宽度，`100%`为滚动容器内容宽度，相减就是滚动条宽度，妥妥的动态计算。
```
body {
padding-right: calc(100vw - 100%);
}
```
##### 禁止长按操作
有时不想用户长按元素呼出菜单进行`点链接`、`打电话`、`发邮件`、`保存图片`或`扫描二维码`等操作，声明`touch-callout:none`禁止用户长按操作。
有时不想用户`复制粘贴`盗文案，声明`user-select:none`禁止用户长按操作和选择复制。
```
* {
/* pointer-events: none; */ /* 微信浏览器还需附加该属性才有效 */
user-select: none; /* 禁止长按选择文字 */
-webkit-touch-callout: none;
}
```
但声明`user-select:none`会让`<input>`和`<textarea>`无法输入文本，可对其声明`user-select:auto`排除在外。
```
input,
textarea {
user-select: auto;
}
```
##### 禁止字体调整
旋转屏幕可能会改变字体大小，声明`text-size-adjust:100%`让字体大小保持不变。
```
* {
text-size-adjust: 100%;
}
```
##### 禁止高亮显示
触摸元素会出现半透明灰色遮罩，不想要！
```
* {
-webkit-tap-highlight-color: transparent;
}
```
##### 禁止动画闪屏
在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个`3D环境`就能让动画稳定运行了。
```
.elem {
perspective: 1000;
backface-visibility: hidden;
transform-style: preserve-3d;
}
```
##### 美化表单外观
表单元素样式太丑希望自定义，`appearance:none`来帮你。
```
button,
input,
select,
textarea {
appearance: none;
/* 自定义样式 */
}
```
##### 美化滚动占位
滚动条样式太丑希望自定义，`::-webkit-scrollbar-*`来帮你。记住以下三个关键词就能随机应变了。
* [x] **::-webkit-scrollbar**：滚动条整体部分
* [x] **::-webkit-scrollbar-track**：滚动条轨道部分
* [x] **::-webkit-scrollbar-thumb**：滚动条滑块部分
```
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
background-image: linear-gradient(135deg, #09f, #3c9);
}
```
##### 美化输入占位
输入框占位文本太丑，`::-webkit-input-placeholder`来帮你。
```
input::-webkit-input-placeholder {
color: #66f;
}
```
##### 对齐输入占位
有强迫症的同学总会觉得输入框文本位置整体偏上，感觉未居中心里就痒痒的。`桌面端浏览器`里声明`line-height`等于`height`就能解决，但`移动端浏览器`里还是未能解决，需将`line-height`声明为`normal`才行。
```
input {
line-height: normal;
}
```
##### 对齐下拉选项
下拉框选项默认向左对齐，是时候改改向右对齐了。
```
select option {
direction: rtl;
}
```
##### 修复点击无效
在苹果系统上有些情况下非可点击元素监听`click事件`可能会无效，针对该情况只需对不触发`click事件`的元素声明`cursor:pointer`就能解决。
```
.elem {
cursor: pointer;
}
```
##### 识别文本换行
多数情况会使用JS换行文本，那就真的`Out`了。若接口返回字段包含`\n`或`<br>`，千万别替换掉，可声明`white-space:pre-line`交由浏览器做断行处理。
```
* {
white-space: pre-line;
}
```
##### 开启硬件加速
想动画更流畅吗，开启`GPU硬件加速`呗！
```
.elem {
transform: translate3d(0, 0, 0);
/* transform: translateZ(0); */
}
```
##### 描绘像素边框
万年话题，如何描绘`一像素边框`？
```
.elem {
position: relative;
width: 200px;
height: 80px;
&::after {
position: absolute;
left: 0;
top: 0;
border: 1px solid #f66;
width: 200%;
height: 200%;
content: "";
transform: scale(.5);
transform-origin: left top;
}
}
```
##### 控制溢出文本
万年话题，如何控制文本做`单行溢出`和`多行溢出`？
```
.elem {
width: 400px;
line-height: 30px;
font-size: 20px;
&.sl-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.ml-ellipsis {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
```
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)