一、移动端 H5 开发策略
1. 视口配置
移动端开发的基础是设置正确的视口（viewport）。推荐的 viewport 配置如下：
HTML复制
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
预览
width=device-width：视口宽度等于设备宽度。initial-scale=1.0：初始缩放比例为 1。user-scalable=no：禁用用户缩放。viewport-fit=cover：适配刘海屏。
2. 弹性布局
使用 rem 单位实现弹性布局，通过 JavaScript 动态设置根元素的字体大小：
JavaScript复制
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
window.addEventListener('resize', () => {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
});
在 CSS 中使用 rem 单位，例如：
css复制
.header {
height: 0.8rem;
font-size: 0.32rem;
}
这种方式可以实现整体布局的弹性缩放。
3. 媒体查询
通过 CSS 媒体查询针对不同屏幕尺寸定制样式：
css复制
@media screen and (max-width: 374px) {
.container {
font-size: 14px;
}
}
@media screen and (min-width: 375px) and (max-width: 413px) {
.container {
font-size: 16px;
}
}
@media screen and (min-width: 414px) {
.container {
font-size: 18px;
}
}
这种方式可以精确控制不同设备的样式。
4. 1px 边框问题
在高清屏幕下，1px 边框可能显示过粗。解决方案是使用伪元素和 transform 缩放：
css复制
.border-1px {
position: relative;
}
.border-1px::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #000;
transform: scaleY(0.5);
transform-origin: 0 0;
}
通过这种方式可以实现高清屏下的 1px 边框。
5. 安全区域适配
适配带有刘海的设备（如 iPhone X）：
css复制
.container {
padding-bottom: env(safe-area-inset-bottom);
}
这种方式可以确保页面内容不会被刘海遮挡。
6. 图片适配
针对不同分辨率设备的图片适配策略：
HTML复制
<img src="image@1x.jpg" srcset="image@2x.jpg 2x, image@3x.jpg 3x" alt="高清图片">
预览
通过 srcset 属性提供多倍图，确保图片在不同分辨率设备上清晰。
7. 横屏适配
处理横屏模式下的布局适配：
JavaScript复制
window.addEventListener('orientationchange', () => {
if (window.orientation === 180 || window.orientation === 0) {
console.log('竖屏模式');
} else {
console.log('横屏模式');
}
});
通过监听屏幕方向变化，动态调整布局。
8. 软键盘弹出处理
处理软键盘弹出时的页面适配问题：
css复制
html {
position: fixed;
width: 100%;
height: 100%;
}
通过固定页面防止软键盘弹出时页面滚动。
二、多端适配开发策略
1. 使用跨平台框架
跨平台框架可以显著减少多端开发的工作量，常见的框架包括：
- Taro：支持 Web、微信小程序、React Native 等。
- Uni-app：支持 Web、小程序、App 等。
- Flutter：支持 iOS、Android 和 Web。
2. 响应式设计
通过 CSS 媒体查询和弹性布局（Flexbox、Grid）实现响应式设计：
css复制
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
@media (min-width: 769px) {
body {
font-size: 18px;
}
}
这种方式可以适配不同屏幕尺寸的设备。
3. 动态字体和布局
使用视口单位（vw、vh、rem）实现动态布局：
css复制
width: 50vw; /* 占视口宽度的 50% */
font-size: 1rem; /* 相对根元素大小 */
这种方式可以避免使用固定像素，提高布局的灵活性。
4. 条件编译
在多端开发中，使用条件编译处理不同平台的差异：
JavaScript复制
// #ifdef MP-WEIXIN
console.log("这是微信小程序");
// #endif
这种方式可以减少重复代码。
5. 组件封装和复用
封装通用组件，减少平台间重复代码：
JavaScript复制
const Button = ({ onClick, children }) => {
return (
<button onClick={onClick}>
{children}
</button>
);
};
这种方式可以提高代码复用率。
6. 多端调试和测试
使用浏览器开发者工具、小程序开发者工具、VConsole 等工具进行多端调试。同时，可以使用自动化测试工具（如 Selenium、Appium）测试不同端的兼容性。
7. 样式兼容
使用工具（如 PostCSS）自动添加 CSS 前缀，确保样式兼容性。
