问题?
- 客户分辨率低， 界面元素挤在一起怎么办？
- 客户分高分辨率电脑跳了缩放调150% 跟我的电脑显示的不一样怎么办？
- 客户没在F11全屏模式下打开界面出现纵向滚动条怎么办？
- 客户缩放了浏览器百分比界面就编写了怎么办?
借鉴了别人的方案，我来精简下方案：
- 固定界面的设计尺寸
- 根据浏览器分辨率等比(最大缩放)transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 0;
height: 0;
background: olivedrab;
}
#view {
height: 100vh;
width: 100vw;
overflow: hidden;
}
.container {
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .5s;
width: 1920px;
height: 1080px;
display: flex;
background: red;
transform-origin: left top;
}
</style>
</head>
<body>
<div id="view">
<div class="container" id="container">
<div style="flex:1">
<div style="width: 500px;height:500px;background: yellow;"></div>
</div>
<div style="flex:1;background:blue">2</div>
</div>
</div>
</body>
</html>
<script>
let run = () => {
let { offsetWidth, offsetHeight } = document.getElementById("view");
let [scaleX, scaleY] = [offsetWidth / 1920, offsetHeight / 1080]
let scale = Math.min(scaleX, scaleY);
if (scaleX > scaleY) {
document.getElementById("container").style.margin=`0 ${(offsetWidth-1920*scale)/2}px`
//设置margin
}
else {
//设置margin
document.getElementById("container").style.margin=`${(offsetHeight-1080*scale)/2}px 0 `
}
// 在计算margin
document.getElementById("container").style.transform = `scale(${scale})`
requestAnimationFrame(run)
}
requestAnimationFrame(run)
</script>
预览效果
