公司项目做之前没有沟通好,按照1920*1080设计图做的页面,缩放比是100%,项目做完之后说要适配缩放比,并且工控屏(分辨率1024*768),需要做小屏适应。
开发中一般pc端都是不用怎么考虑去适配屏幕的,因为现在的屏幕分辨率都是1960*1080,所以正常的前端页面都是可以适配的。
项目技术栈:vue2+elementUI
一 . 需求
分辨率:
pc:1920*1080
工位机:1024*768
二 . 解决方案
1.使用scale-box 组件
主要针对大屏可视化,适用于个别大屏适配,不能全局适配,但是侧边会留白居中
2.使用JS 设置 zoom 属性调整缩放比例 (调试可用)
可以全局设置 但是会出现缩放比例失调 部分ui布局也会改变
使用属性zoom,会导致一些问题比如使用了element的一些组件,下拉选项,下拉会出现偏移的现象
3.使用postcss-px2rem以及postcss-px-to-viewport
通过px转rem以及vw的方案 虽然能全局使用 这些插件对行内样式不起效果 总的来说,不太适合已经成型的项目,还是会导致样式丢失
三 . 方案选择
考虑已经成型的项目,无法逐一进行适配,所以针对那些px转rem以及vw的方案不能使用,代码调整处过多,故只能对页面进行一个强行缩放,去保证小屏下的布局样式不会乱同时功能也正常。
以上三种都试过了,由于针对我的项目情况,我选的是第二种进行设置 zoom 属性调整缩放比例,最为稳妥。其他的我不在逐一述说,接下来主说我选的合适方案。
四 . 方案处理
1.在src同级目录下utils文件中创建monitorZoom.js 内容如下
export const monitorZoom = () => {
let ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase();
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
} else if (~ua.indexOf("msie")) {
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
} else if (
window.outerWidth !== undefined &&
window.innerWidth !== undefined
) {
ratio = window.outerWidth / window.innerWidth;
}
if (ratio) {
ratio = Math.round(ratio * 100);
}
return ratio;
};
2.在入口文件main.js中
import { monitorZoom } from "@/utils/monitorZoom.js";
const m = monitorZoom();
if (window.screen.width * window.devicePixelRatio >= 3840) {
document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时
} else {
document.body.style.zoom = 100 / Number(m);
}
3.通过路由前置守卫 控制某一个路由页面合适的缩放
import { monitorZoom } from "@/utils/monitorZoom.js";
const m = monitorZoom();
router.beforeEach((to, from, next) => {
console.log("即将跳转到的路由 ------------------------ > " + to.name);
/* 调整缩放比例 start */
//针对工控屏调整的缩放比
if (to.name === 'home' && window.screen.width <= 1024) {
document.body.style.zoom = 60 / Number(m);//60是对着屏幕具体调的,因屏而异
}else {
document.body.style.zoom = 100 / Number(m);
}
/* 调整缩放比例 end */
工控端界面的话合适比例为document.body.style.zoom = 60 / Number(m);
同时需要解决刷新缩放丢失问题,刷新的时候重新计算缩放比