大家好，我是讯享网，很高兴认识大家。

大家好，我是若川。我持续组织了近一年的源码共读活动，感兴趣的可以 点此扫码加我微信 lxchuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北|河南籍前端群，可加我微信进群。公众号回复【相亲】关键词可以获取男生、女生的菜单~

❝

在腾讯做的是H5开发相关的项目，也就是做了很久的切图仔了，分享些H5相关的踩坑经验

❞

响应式布局

在 H5 中，我们通常会使用 REM 和 VW 这两种单位来实现页面的响应式布局。这两种单位可以让页面元素的大小随着根元素（对于 REM）或视口宽度（对于 VW）的大小变化而变化，从而适应不同尺寸的屏幕。

⭐️⭐️rem布局

引入手淘的flexible方案进行REM布局

<script src="https://cdnjs.cloudflare.com/ajax/libs/flexible.js/0.3.2/flexible.min.js"></script>

讯享网

配合使用 postcss-pxtorem 插件来自动将 px 单位转换为 REM 单位

讯享网module.exports = {   plugins: {     'postcss-pxtorem': {       rootValue: 37.5,  // 该值应与 flexible.js 中设置的 remUnit 值相同       propList: ['*'],       minPixelValue: 2  // 设置最小的转换尺寸，如果设置为 1 则会转换所有大小的像素值     }   } }

注意：以上 rootValue 的设置值是基于设计稿的尺寸。例如，如果你的设计稿是 750px，那么你设置 rootValue: 75。如果你的设计稿是 375px，那么你设置 rootValue: 37.5。这样设置后，设计稿上的 1px 就对应于 1/100rem，方便转换。

⭐️⭐️vw布局

npm install postcss-px-to-viewport --save-dev

讯享网module.exports = {   plugins: {     'postcss-px-to-viewport': {       unitToConvert: 'px',  // 要转化的单位       viewportWidth: 750,  // UI设计稿的宽度       unitPrecision: 5,  // 转换后的精度，即小数点位数       propList: ['*'],  // 指定转换的css属性的单位，*表示全部css属性的单位都进行转换       viewportUnit: 'vw',  // 指定需要转换成的视窗单位，默认vw       fontViewportUnit: 'vw',  // 指定字体需要转换成的视窗单位，默认vw       selectorBlackList: [],  // 指定不转换为视窗单位的类名，       minPixelValue: 1,  // 默认值1，小于或等于1px则不进行转换       mediaQuery: false,  // 是否在媒体查询的css代码中也进行转换，默认false       replace: true,  // 是否直接更换属性值，而不添加备用属性       exclude: [],  // 忽略某些文件夹下的文件或特定文件，例如 'node_modules'，使用正则表达式       include: undefined,  // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件（使用正则表达式）       landscape: false,  // 是否处理横屏情况     },   }, };

在你配置完成后，你可以像平时一样在 CSS 中使用 px 单位，然后 postcss-px-to-viewport 会在构建时自动将 px 单位转换为 vw 单位。

⭐️⭐️系统功能：

调用电话

<a href="tel:">Call me</a>

调用短信

讯享网<a href="sms:">Send me a SMS</a>

调用邮件

<a href="mailto:">Email me</a>

调用图库和文件功能

讯享网<input type="file" accept="image/*">

弹出数字键盘：

适合输入电话号码

<input type="tel">

适合输入纯数字格式

讯享网<input type="number" pattern="\d*">

⭐️⭐️忽略自动识别

禁止移动端浏览器自动识别电话和邮箱

<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no">

⭐️⭐️唤醒原生应用：

URL Scheme 示例

讯享网<a href="twitter://user?screen_name=OpenAI">Open Twitter</a>

⭐️⭐️禁止页面缩放和缓存：

禁止页面缩放和缓存

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="expires" content="0">

⭐️⭐️禁止字母大写：

禁止字母大写功能和自动纠正功能

讯享网<input type="text" autocapitalize="off" autocorrect="off">

针对特定浏览器的配置：

Safari私有属性示例

<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black">

⭐️⭐️监听屏幕旋转

通过使用CSS媒体查询中的orientation选择器，您可以监听屏幕的旋转事件，并根据屏幕方向调整样式，以便页面始终保持**布局。

讯享网@media (orientation: portrait) {   /* 在竖屏模式下的样式 */ } @media (orientation: landscape) {   /* 在横屏模式下的样式 */ }

⭐️⭐️禁止滚动传播

使用overscroll-behavior: contain属性可以阻止滚动传播的问题。当内容滚动到顶部或底部时，滚动事件不会继续传递给父容器。

.container {   overscroll-behavior: contain; }

⭐️⭐️禁止屏幕抖动

通过提前声明滚动容器的padding-right为滚动条宽度，可以防止滚动条的出现导致屏幕抖动。

讯享网.container {   padding-right: calc(100vw - 100%); }

⭐️⭐️禁止长按操作

使用user-select: none和-webkit-touch-callout: none属性可以禁止用户对元素进行长按操作，防止出现意外的行为。

.element {   user-select: none;   -webkit-touch-callout: none; }

⭐️⭐️禁止字体调整

通过设置text-size-adjust: 100%属性，可以阻止用户在旋转屏幕时浏览器自动调整字体大小。

讯享网body {   text-size-adjust: 100%; }

⭐️⭐️禁止高亮显示

使用-webkit-tap-highlight-color: transparent属性可以禁止触摸元素时的高亮显示效果，使界面更加平滑和一致。

.element {   -webkit-tap-highlight-color: transparent; }

⭐️⭐️禁止动画闪屏

通过使用perspective、backface-visibility和transform-style属性，可以解决在移动设备上动画闪屏的问题，提供更流畅的动画效果。

讯享网.element {   perspective: 1000px;   backface-visibility: hidden;   transform-style: preserve-3d; }

⭐️⭐️自定义表单外观

使用appearance: none属性可以自定义表单元素的样式，使其更符合您的设计需求。

input[type="text"], input[type="email"], textarea {   appearance: none; }

⭐️⭐️自定义滚动滚动条

通过使用::-webkit-scrollbar-*伪元素，可以自定义滚动条的样式，使其更加美观。

讯享网.scrollable::-webkit-scrollbar {   width: 8px; } .scrollable::-webkit-scrollbar-thumb {   background-color: #ccc; } .scrollable::-webkit-scrollbar-track {   background-color: #f1f1f1; }

⭐️⭐️自定义输入占位文本样式

使用::-webkit-input-placeholder伪元素，可以自定义输入框的占位文本样式，使其更加吸引人。

input::placeholder {   color: #999; }

⭐️⭐️调整输入框文本

通过设置line-height: normal，可以调整输入框的文本位置，使其垂直居中显示。

讯享网input {   line-height: normal; }

⭐️⭐️对齐下拉选项

通过设置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 尽可能地处于安全区域内。

解决方案

1. 设置 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">

1. 利用 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); }

1. 为底部固定的元素增加适应 iPhoneX 系列手机的底部小黑条和圆角的底部高度。

⭐️⭐️⭐️⭐️⭐️click 点击延迟与穿透问题

现象

在 iOS 设备上，单击事件可能会有 300ms 的延迟，因为 Safari 浏览器需要在单击 300ms 后判断用户是否进行了第二次点击以实现双击缩放操作。此外，点击穿透问题也常见，如点击蒙层，蒙层消失后可能会触发蒙层下层元素的点击事件。

解决方案

1. 禁止缩放：通过设置 meta 标签的 user-scalable=no来禁止用户缩放。
2. 使用 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;     }); }

1. 使用 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); }

1. 使用 CSS 的 pointer-events 属性：通过设置 pointer-events: none，可以让鼠标点击事件失效，从而解决点击穿透问题。

讯享网.element {     pointer-events: none; }

⭐️⭐️⭐️⭐️⭐️1px 问题

现象

在 H5 页面中，可能需要设置边框宽度为 1px，但在 Retina 屏幕上，1px 可能会看起来比实际要粗。

原因

这是因为移动设备的物理像素密度与 CSS 像素的比例（设备像素比）导致的。

解决方案

1. 利用伪元素和 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。

解决方案

1. 使用 react-sticky 组件：通过计算 <Sticky> 组件相对于<StickyContai ner>组件的位置进行工作。

讯享网npm install react-sticky <StickyContainer>   <Sticky>{({ style }) => <h1 style={style}>Sticky element</h1>}</Sticky> </StickyContainer>

1. 使用 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>

`

1. 在 Vue 项目中，可以直接使用 vue-sticky 组件。

讯享网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; }

⭐️⭐️border-radius 画出的圆在移动端有毛边

解决方案

给元素添加 overflow: hidden 属性。

.elem {   overflow: hidden; }

⭐️⭐️安卓上去掉语音输入按钮

讯享网input::-webkit-input-speech-button {   display: none; }

⭐️⭐️Vue 单页应用在 iOS 上微信分享失效，图片，标题和描述均未正常显示，安卓上分享正常

原因

我们一般在 APP.vue 的 mounted 生命周期中初始化微信 SDK，此时页面的地址 hash 是#/，而首页的 hash 是#/home，导致初始化微信 SDK 时传入的分享 url 和用户实际触发分享操作时页面的 url 不一致，致使在 iOS 上分享失败。

解决方案

初始化微信分享 SDK 时传入的地址，和实际触发分享时页面的地址保持一致。

⭐️⭐️iOS safari 被点击元素会出现半透明灰色遮罩

解决方案

给 html 或者 body 加入以下 css 代码。

body {   -webkit-tap-highlight-color: rgba(0,0,0,0);   -webkit-user-modify: read-write-plaintext-only; }

⭐️⭐️iOS 禁止保存或拷贝图像

解决方案

长按图片保存场景下，禁止 IOS 默认识别图像行为。

讯享网img {   -webkit-touch-callout: none; }

⭐️⭐️⭐️iOS 端微信 H5 页面上下滑动时卡顿

解决方案

给滚动元素加上-webkit-overflow-scrolling属性。

body {   -webkit-overflow-scrolling：touch; }

⭐️⭐️iOS 默认输入框内阴影重置

解决方案

阻止 iOS 默认的美化页面的策略-webkit-appearance：none;

讯享网input {   border: 0;   -webkit-appearance：none; }

⭐️⭐️⭐️对非可点击元素(div，span 等)监听 click 事件，部分 ios 版本不会触发事件

解决方案

1. 添加 css 属性 cursor: pointer;
2. 换成 button 元素。

cursor: pointer; <button></button>

⭐️⭐️⭐️手机底部刘海存在背景，和页面背景色不一致

解决方案

通过指定 body 的背景色来解决。

讯享网body {   background-color: #fff;   // or 暗色模式   // background-color: #000; }

⭐️⭐️对于带有 hash 的 H5 链接，部分手机厂商的 webview 打开 H5 页面会加载两次

解决方案

这是部分 webview 对于特殊 url 有独特的解析和加载逻辑，去掉 hash 即可

https://www.example.com/a/b#/

⭐️⭐️body存在默认背景色

解决方案

body 标签在大部分浏览器中的默认背景色是白色，但在极少数浏览器中的背景颜色是淡绿色或者其他颜色。通过指定 body 背景色为#fff，来兼容更多设备。

讯享网body {   background-color: #fff; }

⭐️⭐️旋转屏幕的时候，字体大小调整的问题

css body {   -webkit-text-size-adjust: 100%; }

⭐️⭐️IOS解析日期问题

在某些情况下，苹果系统上解析 YYYY-MM-DD HH:mm:ss 格式的日期会报错 Invalid Date，而安卓系统则没有这个问题。解决这个问题的一种方法是将日期字符串中的 - 替换为 /。

讯享网const dateString = "2023-07-16 00:00:00"; const fixedDateString = dateString.replace(/-/g, "/"); const date = new Date(fixedDateString);

⭐️⭐️⭐️⭐️⭐️滚动穿透

现象

滚动穿透（scrolling through）是指在一个固定区域内滚动时，滚动事件透过该区域继续传递到其下方的元素，导致同时滚动两个区域的现象。滚动穿透可能会对用户体验产生负面影响，因为用户可能意外地滚动到不相关的内容。

解决方案

❝

这个问题一直很无解，只能hack去兼容

❞

overflow: hidden

1.先锁住body

.modal-open {   &,   body {     overflow: hidden;     height: 100%;   } }

2.还原body滚动区域

讯享网// 获取滚动区域的容器元素 const container = document.querySelector('.container'); // 获取滚动区域的内容元素 const content = document.querySelector('.content'); // 记录滚动位置 let scrollTop = 0; // 禁止滚动穿透 function disableScroll() {   // 记录当前滚动位置   scrollTop = window.pageYOffset || document.documentElement.scrollTop;      // 设置滚动区域容器的样式，将其高度设置为固定值，并设置滚动条样式   container.style.height = '100%';   container.style.overflow = 'hidden';      // 阻止窗口滚动   document.body.classList.add('no-scroll');   document.body.style.top = `-${scrollTop}px`; } // 启用滚动穿透 function enableScroll() {   // 恢复滚动区域容器的样式   container.style.height = '';   container.style.overflow = '';   // 允许窗口滚动   document.body.classList.remove('no-scroll');   document.body.style.top = '';   // 恢复滚动位置   window.scrollTo(0, scrollTop); } // 示例使用，当某个事件触发时禁止滚动穿透 function disableScrollEvent() {   disableScroll(); } // 示例使用，当某个事件触发时启用滚动穿透 function enableScrollEvent() {   enableScroll(); }

ant-mobile组件库解决方式

思想思路：

• 针对触摸滑动事件 touchmove，通过监听滑动方向和滚动元素的状态，决定是否阻止默认的滑动行为，从而防止滚动穿透。
• 在需要锁定滚动的情况下，给 document 添加 touchstart 和 touchmove 事件的监听器，通过捕获触摸滑动事件，并根据情况阻止默认行为，从而避免滚动穿透。
• 在解锁滚动时，从 document 移除对触摸事件的监听器，恢复默认的滑动行为。

// 移植自vant：https://github.com/youzan/vant/blob/HEAD/src/composables/use-lock-scroll.ts export function useLockScroll( rootRef: RefObject<HTMLElement>, shouldLock: boolean | 'strict' ) { const touch = useTouch() const onTouchMove = (event: TouchEvent) => { touch.move(event) const direction = touch.deltaY.current > 0 ? '10' : '01' const el = getScrollParent( event.target as Element, rootRef.current ) as HTMLElement if (!el) return // This has perf cost but we have to compatible with iOS 12 if (shouldLock === 'strict') { const scrollableParent = getScrollableElement(event.target as HTMLElement) if ( scrollableParent === document.body || scrollableParent === document.documentElement ) { event.preventDefault() return } } const { scrollHeight, offsetHeight, scrollTop } = el let status = '11' if (scrollTop === 0) { status = offsetHeight >= scrollHeight ? '00' : '01' } else if (scrollTop + offsetHeight >= scrollHeight) { status = '10' } if ( status !== '11' && touch.isVertical() && !(parseInt(status, 2) & parseInt(direction, 2)) ) { if (event.cancelable) { event.preventDefault() } } } const lock = () => { document.addEventListener('touchstart', touch.start) document.addEventListener( 'touchmove', onTouchMove, supportsPassive ? { passive: false } : false ) if (!totalLockCount) { document.body.classList.add(BODY_LOCK_CLASS) } totalLockCount++ } const unlock = () => { if (totalLockCount) { document.removeEventListener('touchstart', touch.start) document.removeEventListener('touchmove', onTouchMove) totalLockCount-- if (!totalLockCount) { document.body.classList.remove(BODY_LOCK_CLASS) } } } useEffect(() => { if (shouldLock) { lock() return () => { unlock() } } }, [shouldLock]) }