feat(样式): 添加iPad设备的内容自适应样式

为iPad及类似平板设备添加内容自适应样式，包括字体大小、行高和内边距的适配

 <!--
 <!--
  * @Date: 2024-09-15 22:08:49
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-19 18:31:34
+ * @LastEditTime: 2025-09-21 01:42:38
  * @FilePath: /map-demo/src/views/checkin/info.vue
  * @FilePath: /map-demo/src/views/checkin/info.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -96,7 +96,7 @@ import AMapLoader from '@amap/amap-jsapi-loader'
 
 
 import { mapAPI, mapAudioAPI } from '@/api/map.js'
 import { mapAPI, mapAudioAPI } from '@/api/map.js'
 import { isCheckedAPI, checkinAPI } from '@/api/checkin.js'
 import { isCheckedAPI, checkinAPI } from '@/api/checkin.js'
-import { getAdaptiveFontSize, getAdaptivePadding } from '@/utils/tools.js'
+import { getAdaptiveFontSize, getAdaptivePadding, getDeviceInfo } from '@/utils/tools.js'
 
 
 const store = mainStore();
 const store = mainStore();
 const { audio_status, audio_entity, audio_list_status, audio_list_entity } = storeToRefs(store);
 const { audio_status, audio_entity, audio_list_status, audio_list_entity } = storeToRefs(store);
@@ -115,6 +115,29 @@ const adaptiveButtonWidth = computed(() => getAdaptiveFontSize(3)); // 基础宽
 const adaptiveButtonHeight = computed(() => getAdaptiveFontSize(1.5)); // 基础高度1.5rem
 const adaptiveButtonHeight = computed(() => getAdaptiveFontSize(1.5)); // 基础高度1.5rem
 const adaptiveButtonPadding = computed(() => getAdaptivePadding(0.5)); // 基础内边距0.5rem
 const adaptiveButtonPadding = computed(() => getAdaptivePadding(0.5)); // 基础内边距0.5rem
 
 
+// 动态文章内容适配计算属性 - 仅适配iPad类似设备
+const adaptiveContentFontSize = computed(() => {
+  const deviceInfo = getDeviceInfo();
+  if (deviceInfo.isiPad || deviceInfo.isTablet) {
+    return getAdaptiveFontSize(0.9); // iPad设备适配字体大小
+  }
+  return '0.9rem'; // 普通屏幕保持原始大小
+});
+const adaptiveContentLineHeight = computed(() => {
+  const deviceInfo = getDeviceInfo();
+  if (deviceInfo.isiPad || deviceInfo.isTablet) {
+    return '1.8'; // iPad设备行高更大
+  }
+  return '1.75'; // 普通屏幕默认行高
+});
+const adaptiveContentPadding = computed(() => {
+  const deviceInfo = getDeviceInfo();
+  if (deviceInfo.isiPad || deviceInfo.isTablet) {
+    return getAdaptivePadding('1rem'); // iPad设备适配内边距
+  }
+  return '1rem'; // 普通屏幕保持原始内边距
+});
+
 const themeVars = ref({
 const themeVars = ref({
   swipeIndicatorInactiveBackground: '#fff',
   swipeIndicatorInactiveBackground: '#fff',
   swipeIndicatorMargin: '1.5rem',
   swipeIndicatorMargin: '1.5rem',
@@ -688,14 +711,35 @@ const checkIn = async () => { // 打卡
     }
     }
     .info-content {
     .info-content {
       color: #47525F;
       color: #47525F;
-      padding: 1rem;
-      line-height: 1.75;
+      padding: v-bind(adaptiveContentPadding);
+      line-height: v-bind(adaptiveContentLineHeight);
+      font-size: v-bind(adaptiveContentFontSize);
+
+      // 仅对iPad类似设备的HTML元素进行适配
       p {
       p {
-        line-height: 1.75;
-        // padding: 0 0.85rem;
+        line-height: v-bind(adaptiveContentLineHeight);
         text-align: justify;
         text-align: justify;
+        // margin-bottom: v-bind(adaptiveContentPadding);
+        font-size: v-bind(adaptiveContentFontSize);
         img {
         img {
           width: 100%;
           width: 100%;
+          height: auto;
+          max-width: 100%;
+        }
+      }
+
+      h1, h2, h3, h4, h5, h6 {
+        margin: v-bind(adaptiveContentPadding) 0;
+        font-size: calc(v-bind(adaptiveContentFontSize) * 1.2);
+      }
+
+      ul, ol {
+        margin: v-bind(adaptiveContentPadding) 0;
+        padding-left: calc(v-bind(adaptiveContentPadding) * 2);
+
+        li {
+          margin-bottom: calc(v-bind(adaptiveContentPadding) * 0.5);
+          font-size: v-bind(adaptiveContentFontSize);
         }
         }
       }
       }
     }
     }