hookehuyr

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

添加iPadOnly参数来控制字体大小适配逻辑,当设置为true时仅对iPad/平板设备进行适配
在map.vue中使用该参数优化iPad设备上的字体显示
......@@ -118,14 +118,22 @@ 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 (iPadOnly) {
// 仅iPad设备适配模式
if (deviceInfo.isiPad || deviceInfo.isTablet) {
fontSizeMultiplier = 1.5;
}
} else {
// 全设备适配模式(原逻辑)
if (deviceInfo.isWeChat && deviceInfo.isLargeScreen) {
// 微信小程序大屏环境
fontSizeMultiplier = 1.8;
......@@ -139,6 +147,7 @@ const getAdaptiveFontSize = (baseFontSize = 0.8) => {
// 中等屏幕设备
fontSizeMultiplier = 1.2;
}
}
const adaptedSize = baseFontSize * fontSizeMultiplier;
return `${adaptedSize}rem`;
......
<!--
* @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",
......