移动端浏览器适配经过漫长的迭代，经历了以下的技术方案。

设置viewport进行缩放

在html页面中，使用meta标签来设置viewport，以控制网页在不同设备上的缩放行为。

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

在上述代码中，width=device-width表示将viewport 的宽度设置为设备的宽度，以实现响应式布局。initial-scale=1.0表示初始缩放比例为 1.0，即不进行缩放。

你可以根据需要调整initial-scale的值来控制网页的初始缩放比例。例如，将其设置为initial-scale=1.2将使网页在加载时放大 20%。

请注意，不同的设备和浏览器可能对 viewport 设置有不同的支持和默认行为。

viewport的各个属性介绍如下：

媒体查询

通过使用媒体查询，根据设备的屏幕尺寸、分辨率等媒体特性来调整布局和样式。比如bootstrap，或者jqueryUI，，这种方式维护成本高。

Rem 布局适配

rem是css3新引入的单位，是相对于html元素字体单位的一个相对单位，从本质上来说，它属于一个字体单位，用字体单位来布局，并不是太合适。lib-flexible+postcss-pxtorem，在相当长一段时间里，这两个插件搭配都是解决移动端布局的神器，lib-flexible是阿里手淘系开源的一个库，用于设置font-size，同时处理一些窗口缩放的问题。在pc端会有兼容性的问题，对移动端比较友好。

Vw 布局适配

vw和vh是viewport单位，它们是基于视窗（viewport）宽度和高度的相对单位。vw表示相对于视窗宽度的百分比，而vh表示相对于视窗高度的百分比。常用技术方案：postcss-px-to-viewport  需要考虑浏览器兼容性。

px + calc + clamp 布局适配

根据 CSS 的新特性：css变量、calc()函数、clamp()、@container函数实现

:root {
    --design-width: 750; // 设计宽度
    --viewport-width: 100vw; // vw宽度
    --min-viewport-width: 320px; // 最小宽度
    --max-viewport-width: 1440px; // 最大宽度
    --current-viewport-width: clamp( var(--min-viewport-width), var(--viewport-width), var(--max-viewport-width) ); // 当前宽度
    --width-ratio: calc(var(--current-viewport-width) / var(--design-width)); // 当前宽度/设计宽度
}
body {
    font-size: calc( 20 *  --width-ratio); 
}

推荐rem + vw 布局适配

• 固定vieport，元素布局上使用rem单位
• html元素的font-size使用vw + px fallback的形式 列如：京东
• 当页面超过一定宽度时，根据media query设置font-size为px，优先级高于vw。
• 限制页面宽度为1080px

移动端浏览器的高清问题

css中的1px并不等于设备的1px

移动端浏览器中，window对象有devicePixelRadio属性简称dpr，官方定为为：设备物理像素和独立像素px的比例。

DPR = 1，此时 1 物理像素 等于 1 独立像素。

DPR = 2，此时 1 物理像素等于 0.5 独立像素。 此时的 border-width: 1px，实际展示是2px。

DPR = 3，此时 1 物理像素等于 0.33 独立像素。此时的 border-width: 1px，实际展示是3px。

解决方案：

1、渐变实现 background-image: linear-gradient(to top, ,,,)

2、使用缩放实现 transform: scaleY(0.333)

3、使用图片实现 base64

4、使用 SVG 实现

5、嵌入 background url

6、border-image 低端机下支持度不好

以上都需要通过 CSS 的媒体查询来实现。

不同 DPR 下图片的高清解决方案

1、图片dpr高清适配目前常用的方案是使用媒体查询方式，替换url路径。

/* 针对高 DPR 屏幕的样式 */
@media (device-pixel-ratio: 2) {
}

2、或者使用js获取当前dpr，替换图片src。