Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
map-demo
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-09-21 01:43:11 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
1e04239cb6f3479bf7d51688e752678f10c5f50f
1e04239c
1 parent
e396f8ad
feat(样式): 添加iPad设备的内容自适应样式
为iPad及类似平板设备添加内容自适应样式,包括字体大小、行高和内边距的适配
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
50 additions
and
6 deletions
src/views/checkin/info.vue
src/views/checkin/info.vue
View file @
1e04239
<!--
* @Date: 2024-09-15 22:08:49
* @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
* @Description: 文件描述
-->
...
...
@@ -96,7 +96,7 @@ import AMapLoader from '@amap/amap-jsapi-loader'
import { mapAPI, mapAudioAPI } from '@/api/map.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 { 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 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({
swipeIndicatorInactiveBackground: '#fff',
swipeIndicatorMargin: '1.5rem',
...
...
@@ -688,14 +711,35 @@ const checkIn = async () => { // 打卡
}
.info-content {
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 {
line-height: 1.75;
// padding: 0 0.85rem;
line-height: v-bind(adaptiveContentLineHeight);
text-align: justify;
// margin-bottom: v-bind(adaptiveContentPadding);
font-size: v-bind(adaptiveContentFontSize);
img {
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);
}
}
}
...
...
Please
register
or
login
to post a comment