Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
eaa88054 1 parent 5dbaccc5

feat(字体适配): 为getAdaptiveFontSize添加iPadOnly参数以支持仅iPad设备适配 

添加iPadOnly参数来控制字体大小适配逻辑，当设置为true时仅对iPad/平板设备进行适配
在map.vue中使用该参数优化iPad设备上的字体显示
Inline Side-by-side
Showing 2 changed files with 27 additions and 18 deletions
......@@ -118,26 +118,35 @@ const getDeviceInfo = () => {
/**
* @description 根据设备类型获取适配的字体大小
* @param {number} baseFontSize 基础字体大小（rem）
* @param {boolean} iPadOnly 是否仅在iPad设备上适配，默认false
* @returns {string} 适配后的字体大小
*/
const getAdaptiveFontSize = (baseFontSize = 0.8) => {
const getAdaptiveFontSize = (baseFontSize = 0.8, iPadOnly = false) => {
const deviceInfo = getDeviceInfo();
// 字体大小倍数配置
let fontSizeMultiplier = 1;
if (deviceInfo.isWeChat && deviceInfo.isLargeScreen) {
// 微信小程序大屏环境
fontSizeMultiplier = 1.8;
} else if (deviceInfo.isiPad || deviceInfo.isTablet) {
// iPad或平板设备
fontSizeMultiplier = 1.5;
} else if (deviceInfo.isLargeScreen) {
// 大屏设备（桌面）
fontSizeMultiplier = 1.6;
} else if (deviceInfo.screenWidth >= 481 && deviceInfo.screenWidth <= 768) {
// 中等屏幕设备
fontSizeMultiplier = 1.2;
if (iPadOnly) {
// 仅iPad设备适配模式
if (deviceInfo.isiPad || deviceInfo.isTablet) {
fontSizeMultiplier = 1.5;
}
} else {
// 全设备适配模式（原逻辑）
if (deviceInfo.isWeChat && deviceInfo.isLargeScreen) {
// 微信小程序大屏环境
fontSizeMultiplier = 1.8;
} else if (deviceInfo.isiPad || deviceInfo.isTablet) {
// iPad或平板设备
fontSizeMultiplier = 1.5;
} else if (deviceInfo.isLargeScreen) {
// 大屏设备（桌面）
fontSizeMultiplier = 1.6;
} else if (deviceInfo.screenWidth >= 481 && deviceInfo.screenWidth <= 768) {
// 中等屏幕设备
fontSizeMultiplier = 1.2;
}
}
const adaptedSize = baseFontSize * fontSizeMultiplier;
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-18 10:31:06
* @LastEditTime: 2025-09-21 19:03:12
* @FilePath: /map-demo/src/views/checkin/map.vue
* @Description: 公众地图主体页面
-->
......@@ -208,7 +208,7 @@ export default {
"border-color": "#DD7850",
"border-radius": ".25rem",
"background-color": "#FFF",
"font-size": getAdaptiveFontSize(0.8),
"font-size": getAdaptiveFontSize(0.8, true), // 仅iPad设备适配
"color": "#DD7850",
"writing-mode": "vertical-rl",
"text-orientation": "mixed",
......@@ -227,7 +227,7 @@ export default {
"border-color": "#fcfbfa",
"border-radius": ".25rem",
"background-color": "#DD7850",
"font-size": getAdaptiveFontSize(0.8),
"font-size": getAdaptiveFontSize(0.8, true), // 仅iPad设备适配
"color": "white",
"writing-mode": "vertical-rl",
"text-orientation": "mixed",
......@@ -246,7 +246,7 @@ export default {
"border-color": "#DD7850",
"border-radius": ".25rem",
"background-color": "#FFF",
"font-size": getAdaptiveFontSize(0.8),
"font-size": getAdaptiveFontSize(0.8, true), // 仅iPad设备适配
"color": "#DD7850",
"writing-mode": "horizontal",
"text-orientation": "mixed",
......@@ -265,7 +265,7 @@ export default {
"border-color": "#fcfbfa",
"border-radius": ".25rem",
"background-color": "#DD7850",
"font-size": getAdaptiveFontSize(0.8),
"font-size": getAdaptiveFontSize(0.8, true), // 仅iPad设备适配
"color": "white",
"writing-mode": "horizontal",
"text-orientation": "mixed",
......