⭐️⭐️对齐下拉选项
通过设置direction: rtl，可以改变下拉框选项的对齐方式，使其从右向左排列。
select { direction: rtl; }
⭐️⭐️修复点击无效
在苹果系统上，有些元素无法触发click事件。通过声明cursor: pointer属性，可以解决这个问题。
.element { cursor: pointer; }
⭐️⭐️识别文本换行
通过设置white-space: pre-line，可以让浏览器自动处理文本的换行，保留原始的换行符。
.element { white-space: pre-line; }
⭐️⭐️开启硬件加速
使用transform: translate3d(0, 0, 0)属性可以开启GPU硬件加速，提高动画的流畅性和性能。
.element { transform: translate3d(0, 0, 0); }
⭐️⭐️控制溢出文本
使用CSS的text-overflow、white-space、-webkit-line-clamp和-webkit-box-orient属性，可以控制文本的单行和多行溢出，使其更加易读。
.element { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .element.multiline { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
⭐️⭐️⭐️⭐️⭐️iPhoneX 系列手机适配问题
现象
在 iPhoneX 系列手机上，头部或底部区域可能会出现刘海遮挡文字或点击区域的情况，或者出现黑底或白底的空白区域。
原因
iPhoneX 及以上版本手机采用了特殊的设计，包括状态栏、圆弧展示角、传感器槽、主屏幕指示器和屏幕边缘手势。为了适配这些特性，头部、底部及侧边栏都需要做特殊处理，使 content 尽可能地处于安全区域内。
解决方案
- 设置 viewport-fit meta 标签为 cover，使内容能够填充所有区域，并对 iPhone X 进行特殊适配。
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
- 利用 WebKit 的新 CSS 函数 constant() 和 env()，以及四个预定义的常量：safe-area-inset-left, safe-area-inset-right, safe-area-inset-top 和 safe-area-inset-bottom，来设置安全区域。
body { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); padding-left: constant(safe-area-inset-left); padding-left: env(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-right: env(safe-area-inset-right); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }
- 为底部固定的元素增加适应 iPhoneX 系列手机的底部小黑条和圆角的底部高度。
⭐️⭐️⭐️⭐️⭐️click 点击延迟与穿透问题
现象
在 iOS 设备上，单击事件可能会有 300ms 的延迟，因为 Safari 浏览器需要在单击 300ms 后判断用户是否进行了第二次点击以实现双击缩放操作。此外，点击穿透问题也常见，如点击蒙层，蒙层消失后可能会触发蒙层下层元素的点击事件。
解决方案
- 禁止缩放：通过设置 meta 标签的
user-scalable=no来禁止用户缩放。 - 使用 touch 事件替代 click 事件：这可以消除延迟，因为 touch 事件没有 300ms 延迟。
function tap(obj, callback) { var startTime = 0; var flag = false; obj.addEventListener('touchstart', function(e) { startTime = Date.now(); }); obj.addEventListener('touchmove', function(e) { flag = true; }); obj.addEventListener('touchend', function(e) { if (!flag && (Date.now() - startTime) < 150) { callback && callback(); } flag = false; startTime = 0; }); }
- 使用 FastClick 库：FastClick 库可以解决 click 延时和穿透问题。
<script type='application/javascript' src='/path/to/fastclick.js'></script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); }
- 使用 CSS 的 pointer-events 属性：通过设置 pointer-events: none，可以让鼠标点击事件失效，从而解决点击穿透问题。
.element { pointer-events: none; }
⭐️⭐️⭐️⭐️⭐️1px 问题
现象
在 H5 页面中，可能需要设置边框宽度为 1px，但在 Retina 屏幕上，1px 可能会看起来比实际要粗。
原因
这是因为移动设备的物理像素密度与 CSS 像素的比例（设备像素比）导致的。
解决方案
- 利用伪元素和 scale 来实现 0.5px 的效果。
.border-1px { position: relative; } .border-1px:after { content: ""; position: absolute; left: 0; top: 0; width: 200%; height: 200%; border: 1px solid #000; transform: scale(0.5); transform-origin: left top; box-sizing: border-box; }
⭐️⭐️⭐️⭐️⭐️sticky 的兼容性问题
现象
在某些 Android 设备的原生浏览器中，使用 position: sticky 实现的元素不能正常吸顶。
原因
这是因为这些浏览器不支持 position: sticky。
解决方案
- 使用 react-sticky 组件：通过计算
<Sticky>组件相对于<StickyContai ner>组件的位置进行工作。
npm install react-sticky <StickyContainer> <Sticky>{({ style }) => <h1 style={style}>Sticky element</h1>}</Sticky> </StickyContainer>
- 使用 JS：通过自定义滚动事件的监听，根据 top 的改变来实现吸顶层 fixed 和 absolute 的转换。
<div id="stickyElement">吸顶bar</div> <div id="content">这是主要内容</div> <script> window.addEventListener('scroll', function() { var stickyElement = document.getElementById('stickyElement'); var stickyElementRect = stickyElement.getBoundingClientRect(); if (stickyElementRect.top <= 0) { // 当元素到达顶部，将其定位方式改为固定 stickyElement.style.position = 'fixed'; stickyElement.style.top = '0'; } else { // 当元素离开顶部，将其定位方式改回绝对 stickyElement.style.position = 'absolute'; stickyElement.style.top = 'initial'; } }); </script> `` ` 3. 在 Vue 项目中，可以直接使用 vue-sticky 组件。 ```js npm install vue-sticky --save directives: { 'sticky': VueSticky, } <ELEMENT v-sticky="{ zIndex: NUMBER, stickyTop: NUMBER, disabled: [true|false]}"> <div> <!-- sticky wrapper, IMPORTANT --> CONTENT </div> </ELEMENT>
⭐️⭐️⭐️⭐️⭐️软键盘将页面顶起来、收起未回落问题
现象
在 Android 设备上，点击 input 框弹出键盘时，可能会将页面顶起来，导致页面样式错乱。失去焦点时，键盘收起，键盘区域空白，未回落。
原因
键盘不能回落问题出现在 iOS 12+ 和 wechat 6.7.4+ 中，而在微信 H5 开发中是比较常见的 Bug。
兼容原理，1.判断版本类型 2.更改滚动的可视区域
解决方案
通过监听页面高度变化，强制恢复成弹出前的高度。
const originalHeight = document.documentElement.clientHeight || document.body.clientHeight; window.onresize = function() { const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; if (resizeHeight < originalHeight) { document.documentElement.style.height = originalHeight + 'px'; document.body.style.height = originalHeight + 'px'; } }
⭐️⭐️⭐️⭐️⭐️使用 line-height 实现文字垂直居中，发现文字偏上
实际这个Bug一直存在，没有好的解决方案，详情见Android浏览器下line-height垂直居中为什么会偏离？
解决方案
采用 flex 布局，align-items: center 来替代，兼容性更高。
.elem { display: flex; justify-content: center; align-items: center; }
