适配

前端代码适配层面

• 使用 Viewport 适配：在网页头部引入代码，其中width=device-width表示将 viewport 的宽度设置为设备的宽度，initial-scale=1.0表示初始缩放比例为 1.0，不进行缩放，user-scalable=no表示用户不可以通过手动缩放页面，这样可以避免屏幕缩放对页面布局的影响。
• 使用媒体查询：通过媒体查询针对不同屏幕尺寸或页面缩放程度来确定不同的样式。例如，根据便携电脑缩放 150% 时的网页可见宽度作为依据，设置不同的 CSS 样式，如@media all and (-webkit - min - device - pixel - ratio: 1.41) and (-webkit - max - device - pixel - ratio: 1.6), (min - resolution: 1.41dppx) and (max - resolution: 1.6dppx) {body {font - size: 10px;}}，来调整网页元素的大小和布局。
• JavaScript 代码适配：可以在网页尾部的前加入以下 JavaScript 代码，根据屏幕像素比自动设置网页的 zoom 缩放比例。

<script>
const t = window.devicePixelRatio;
let zoom = 1;
if (t!== 1) {
zoom = (1 / t) * zoom;
}
document.body.style.zoom = zoom;
</script>