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 15 additions and 6 deletions
...@@ -118,14 +118,22 @@ const getDeviceInfo = () => { ...@@ -118,14 +118,22 @@ const getDeviceInfo = () => {
118 /** 118 /**
119 * @description 根据设备类型获取适配的字体大小 119 * @description 根据设备类型获取适配的字体大小
120 * @param {number} baseFontSize 基础字体大小（rem） 120 * @param {number} baseFontSize 基础字体大小（rem）
121 + * @param {boolean} iPadOnly 是否仅在iPad设备上适配，默认false
121 * @returns {string} 适配后的字体大小 122 * @returns {string} 适配后的字体大小
122 */ 123 */
123 -const getAdaptiveFontSize = (baseFontSize = 0.8) => { 124 +const getAdaptiveFontSize = (baseFontSize = 0.8, iPadOnly = false) => {
124 const deviceInfo = getDeviceInfo(); 125 const deviceInfo = getDeviceInfo();
125 126
126 // 字体大小倍数配置 127 // 字体大小倍数配置
127 let fontSizeMultiplier = 1; 128 let fontSizeMultiplier = 1;
128 129
130 + if (iPadOnly) {
131 + // 仅iPad设备适配模式
132 + if (deviceInfo.isiPad || deviceInfo.isTablet) {
133 + fontSizeMultiplier = 1.5;
134 + }
135 + } else {
136 + // 全设备适配模式（原逻辑）
129 if (deviceInfo.isWeChat && deviceInfo.isLargeScreen) { 137 if (deviceInfo.isWeChat && deviceInfo.isLargeScreen) {
130 // 微信小程序大屏环境 138 // 微信小程序大屏环境
131 fontSizeMultiplier = 1.8; 139 fontSizeMultiplier = 1.8;
...@@ -139,6 +147,7 @@ const getAdaptiveFontSize = (baseFontSize = 0.8) => { ...@@ -139,6 +147,7 @@ const getAdaptiveFontSize = (baseFontSize = 0.8) => {
139 // 中等屏幕设备 147 // 中等屏幕设备
140 fontSizeMultiplier = 1.2; 148 fontSizeMultiplier = 1.2;
141 } 149 }
150 + }
142 151
143 const adaptedSize = baseFontSize * fontSizeMultiplier; 152 const adaptedSize = baseFontSize * fontSizeMultiplier;
144 return `${adaptedSize}rem`; 153 return `${adaptedSize}rem`;
......
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-18 10:31:06 4 + * @LastEditTime: 2025-09-21 19:03:12
5 * @FilePath: /map-demo/src/views/checkin/map.vue 5 * @FilePath: /map-demo/src/views/checkin/map.vue
6 * @Description: 公众地图主体页面 6 * @Description: 公众地图主体页面
7 --> 7 -->
...@@ -208,7 +208,7 @@ export default { ...@@ -208,7 +208,7 @@ export default {
208 "border-color": "#DD7850", 208 "border-color": "#DD7850",
209 "border-radius": ".25rem", 209 "border-radius": ".25rem",
210 "background-color": "#FFF", 210 "background-color": "#FFF",
211 - "font-size": getAdaptiveFontSize(0.8), 211 + "font-size": getAdaptiveFontSize(0.8, true), // 仅iPad设备适配
212 "color": "#DD7850", 212 "color": "#DD7850",
213 "writing-mode": "vertical-rl", 213 "writing-mode": "vertical-rl",
214 "text-orientation": "mixed", 214 "text-orientation": "mixed",
...@@ -227,7 +227,7 @@ export default { ...@@ -227,7 +227,7 @@ export default {
227 "border-color": "#fcfbfa", 227 "border-color": "#fcfbfa",
228 "border-radius": ".25rem", 228 "border-radius": ".25rem",
229 "background-color": "#DD7850", 229 "background-color": "#DD7850",
230 - "font-size": getAdaptiveFontSize(0.8), 230 + "font-size": getAdaptiveFontSize(0.8, true), // 仅iPad设备适配
231 "color": "white", 231 "color": "white",
232 "writing-mode": "vertical-rl", 232 "writing-mode": "vertical-rl",
233 "text-orientation": "mixed", 233 "text-orientation": "mixed",
...@@ -246,7 +246,7 @@ export default { ...@@ -246,7 +246,7 @@ export default {
246 "border-color": "#DD7850", 246 "border-color": "#DD7850",
247 "border-radius": ".25rem", 247 "border-radius": ".25rem",
248 "background-color": "#FFF", 248 "background-color": "#FFF",
249 - "font-size": getAdaptiveFontSize(0.8), 249 + "font-size": getAdaptiveFontSize(0.8, true), // 仅iPad设备适配
250 "color": "#DD7850", 250 "color": "#DD7850",
251 "writing-mode": "horizontal", 251 "writing-mode": "horizontal",
252 "text-orientation": "mixed", 252 "text-orientation": "mixed",
...@@ -265,7 +265,7 @@ export default { ...@@ -265,7 +265,7 @@ export default {
265 "border-color": "#fcfbfa", 265 "border-color": "#fcfbfa",
266 "border-radius": ".25rem", 266 "border-radius": ".25rem",
267 "background-color": "#DD7850", 267 "background-color": "#DD7850",
268 - "font-size": getAdaptiveFontSize(0.8), 268 + "font-size": getAdaptiveFontSize(0.8, true), // 仅iPad设备适配
269 "color": "white", 269 "color": "white",
270 "writing-mode": "horizontal", 270 "writing-mode": "horizontal",
271 "text-orientation": "mixed", 271 "text-orientation": "mixed",
......