打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

帮助:移动优化:修订间差异

来自陋室
删除的内容 添加的内容
XP-jia留言 | 贡献
更新格式
Maintenance script留言 | 贡献
校对修改:修复强调文本前后多余空格、不一致的空格等问题
第2行: 第2行:


== 📏 宽度 vs 高度 ==
== 📏 宽度 vs 高度 ==
网页布局通常涉及 ''' 宽度 ''' 和 ''' 高度 ''':
网页布局通常涉及 '''宽度''' 和 '''高度''':
* 当 ''' 高度 ''' 超出屏幕显示范围时,会出现 ''' 上下滚动条 ''',但这通常不影响阅读。
* 当 '''高度''' 超出屏幕显示范围时,会出现 '''上下滚动条''',但这通常不影响阅读。
* 当 ''' 宽度 ''' 超出屏幕显示范围时,会出现 ''' 左右滚动条 ''',这会导致阅读困难,因为用户需要不断左右滑动才能阅读完整内容。
* 当 '''宽度''' 超出屏幕显示范围时,会出现 '''左右滚动条''',这会导致阅读困难,因为用户需要不断左右滑动才能阅读完整内容。


由于现代网页主要采用 ''' 横向排版 ''',应尽量避免 ''' 页面元素超出屏幕宽度 ''',尤其是在移动设备上。
由于现代网页主要采用 '''横向排版''',应尽量避免 '''页面元素超出屏幕宽度''',尤其是在移动设备上。


== 📱 移动设备屏幕特性 ==
== 📱 移动设备屏幕特性 ==
移动设备屏幕宽度通常在 '''320px 至 414px''' 之间(不考虑像素密度)。虽然手机物理分辨率越来越高,但网页显示仍受限于设备可视区域:
移动设备屏幕宽度通常在 '''320px 至 414px'''之间(不考虑像素密度)。虽然手机物理分辨率越来越高,但网页显示仍受限于设备可视区域:
* ''' 桌面端 ''' 屏幕宽度一般不低于 '''1024px'''
*''' 桌面端 '''屏幕宽度一般不低于'''1024px'''*''' 移动端 '''理想内容宽度应控制在'''≤414px''',避免横向滚动
* ''' 移动端 ''' 理想内容宽度应控制在 '''≤414px''',避免横向滚动


== 🎯 常见屏幕分辨率 ==
== 🎯 常见屏幕分辨率 ==
第53行: 第52行:
</syntaxhighlight>
</syntaxhighlight>


🔹 ''' 效果 ''':桌面端保持原宽度,移动端变为可横向滚动,不撑破页面布局。
🔹 '''效果''':桌面端保持原宽度,移动端变为可横向滚动,不撑破页面布局。


=== 📐 自适应元素设计 ===
=== 📐 自适应元素设计 ===
第64行: 第63行:
</syntaxhighlight>
</syntaxhighlight>


🔹 ''' 效果 ''':
🔹 '''效果''':
* ''' 桌面端 ''':保持 600px 宽度
* '''桌面端''':保持 600px 宽度
* ''' 移动端 ''':自动调整为 100% 宽度
* '''移动端''':自动调整为 100% 宽度


=== 🎨 使用多列模板 ===
=== 🎨 使用多列模板 ===
第85行: 第84行:


=== ✏️ 编辑最佳实践 ===
=== ✏️ 编辑最佳实践 ===
* 编辑时使用 ''' 显示预览 ''' 功能检查效果
* 编辑时使用 '''显示预览''' 功能检查效果
* 在 ''' 编辑摘要 ''' 中简要描述修改内容
* 在 '''编辑摘要''' 中简要描述修改内容
* 使用 ''' 显示更改 ''' 对比版本差异
* 使用 '''显示更改''' 对比版本差异


=== 📱 移动端皮肤配置 ===
=== 📱 移动端皮肤配置 ===
第98行: 第97行:
=== 🧪 移动端效果测试 ===
=== 🧪 移动端效果测试 ===
在桌面浏览器中测试移动端显示:
在桌面浏览器中测试移动端显示:
# 右键点击页面,选择 ''' 审查元素 '''
# 右键点击页面,选择 '''审查元素'''
# 点击 ''' 设备模拟 ''' 图标(手机 / 平板)
# 点击 '''设备模拟''' 图标(手机/平板)
# 选择不同设备分辨率测试显示效果
# 选择不同设备分辨率测试显示效果


第144行: 第143行:
== 🔚 总结 ==
== 🔚 总结 ==
通过上述优化方法,可以显著改善 MediaWiki 页面在移动端的阅读体验:
通过上述优化方法,可以显著改善 MediaWiki 页面在移动端的阅读体验:
* 使用 ''' 响应式表格 ''' 和 ''' 自适应布局 '''
* 使用 '''响应式表格''' 和 '''自适应布局'''
* 合理配置 ''' 移动端皮肤 '''
* 合理配置 '''移动端皮肤'''
* 充分利用 ''' 预览和测试 ''' 工具
* 充分利用 '''预览和测试''' 工具
* 遵循 MediaWiki 编辑最佳实践
* 遵循 MediaWiki 编辑最佳实践