有的电脑就是玩儿,哎非要默认125%或者150%的放大,还特喵的是推荐! ![在这里插入图片描述](https://img-blog.csdnimg.cn/25b09cd7ca5b4ba1b626541ea9735485.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5pmPXw==,size_20,color_FFFFFF,t_70,g_se,x_16)
css
/* 屏幕分辨率放大为 150 */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 120dpi) {
.app-main {
transform: scale(0.665, 0.665); /* 缩放数值需要根据效果调试 */
transform-origin: left top;
}
}
/* 屏幕分辨率放大为 125 */
@media (-webkit-min-device-pixel-ratio: 1.25) {
.app-main {
transform: scale(0.799, 0.799);
transform-origin: left top;
}
}
有时候一个页面要缩放一个不需要缩放,这时候就在需要缩放的页面里用js代码实现。
js
// 以.app-main 为例
if (window.devicePixelRatio == 1.5) {
document.getElementsByClassName("app-main")[0].style.transform = "scale(0.665, 0.665)"
document.getElementsByClassName("app-main")[0].style["transform-origin"] = "left top"
}
if (window.devicePixelRatio == 1.25) {
document.getElementsByClassName("app-main")[0].style.transform = "scale(0.799, 0.799)"
document.getElementsByClassName("app-main")[0].style["transform-origin"] = "left top"
}
|