navbar兼容放大比例

jwtech-admin-page/src/assets/styles/sidebar.scss

@@ -261,3 +261,27 @@
     }
   }
 }
+
+// 放大110%
+@media screen and (-webkit-min-device-pixel-ratio: 1.1) {
+  .sidebar-container {
+    top: calc(56px * 0.9091) !important;
+    height: calc(100% - calc(56px * 0.9091)) !important;
+  }
+}
+
+// 放大125%
+@media screen and (-webkit-min-device-pixel-ratio: 1.25) {
+  .sidebar-container {
+    top: calc(56px * 0.8) !important;
+    height: calc(100% - calc(56px * 0.8)) !important;
+  }
+}
+
+// 放大150%
+@media screen and (-webkit-min-device-pixel-ratio: 1.50) {
+  .sidebar-container {
+    top: calc(56px * 0.66667) !important;
+    height: calc(100% - calc(56px * 0.66667)) !important;
+  }
+}

jwtech-admin-page/src/layout/components/Navbar.vue

@@ -380,6 +380,7 @@ export default {
     }
   }
 }
+
 .hid {
   width: 150px;
   text-overflow: ellipsis;
@@ -398,4 +399,31 @@ export default {
   -o-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
 }
+
+// 放大110%
+@media screen and (-webkit-min-device-pixel-ratio: 1.1) {
+  .navbar {
+    transform: scale(0.9091); /* 将内容缩小到80% */
+    transform-origin: top left; /* 设置缩放的原点为左上角 */
+    width: 110%; /* 由于缩放，可能需要调整宽度以避免内容被裁剪 */
+  }
+}
+
+// 放大125%
+@media screen and (-webkit-min-device-pixel-ratio: 1.25) {
+  .navbar {
+    transform: scale(0.8); /* 将内容缩小到80% */
+    transform-origin: top left; /* 设置缩放的原点为左上角 */
+    width: 125%; /* 由于缩放，可能需要调整宽度以避免内容被裁剪 */
+  }
+}
+
+// 放大150%
+@media screen and (-webkit-min-device-pixel-ratio: 1.50) {
+  .navbar {
+    transform: scale(0.66667); /* 将内容缩小到80% */
+    transform-origin: top left; /* 设置缩放的原点为左上角 */
+    width: 150%; /* 由于缩放，可能需要调整宽度以避免内容被裁剪 */
+  }
+}
 </style>