帮助:移动优化:修订间差异
来自陋室
更多操作
删除的内容 添加的内容
更新格式 |
Maintenance script(留言 | 贡献) 校对修改:修复强调文本前后多余空格、不一致的空格等问题 |
||
| 第2行: | 第2行: | ||
== 📏 宽度 vs 高度 == |
== 📏 宽度 vs 高度 == |
||
网页布局通常涉及 ''' |
网页布局通常涉及 '''宽度''' 和 '''高度''': |
||
* 当 ''' |
* 当 '''高度''' 超出屏幕显示范围时,会出现 '''上下滚动条''',但这通常不影响阅读。 |
||
* 当 ''' |
* 当 '''宽度''' 超出屏幕显示范围时,会出现 '''左右滚动条''',这会导致阅读困难,因为用户需要不断左右滑动才能阅读完整内容。 |
||
由于现代网页主要采用 ''' |
由于现代网页主要采用 '''横向排版''',应尽量避免 '''页面元素超出屏幕宽度''',尤其是在移动设备上。 |
||
== 📱 移动设备屏幕特性 == |
== 📱 移动设备屏幕特性 == |
||
移动设备屏幕宽度通常在 '''320px 至 414px''' |
移动设备屏幕宽度通常在 '''320px 至 414px'''之间(不考虑像素密度)。虽然手机物理分辨率越来越高,但网页显示仍受限于设备可视区域: |
||
* |
*''' 桌面端 '''屏幕宽度一般不低于'''1024px'''*''' 移动端 '''理想内容宽度应控制在'''≤414px''',避免横向滚动 |
||
* ''' 移动端 ''' 理想内容宽度应控制在 '''≤414px''',避免横向滚动 |
|||
== 🎯 常见屏幕分辨率 == |
== 🎯 常见屏幕分辨率 == |
||
| 第53行: | 第52行: | ||
</syntaxhighlight> |
</syntaxhighlight> |
||
🔹 ''' |
🔹 '''效果''':桌面端保持原宽度,移动端变为可横向滚动,不撑破页面布局。 |
||
=== 📐 自适应元素设计 === |
=== 📐 自适应元素设计 === |
||
| 第64行: | 第63行: | ||
</syntaxhighlight> |
</syntaxhighlight> |
||
🔹 ''' |
🔹 '''效果''': |
||
* ''' |
* '''桌面端''':保持 600px 宽度 |
||
* ''' |
* '''移动端''':自动调整为 100% 宽度 |
||
=== 🎨 使用多列模板 === |
=== 🎨 使用多列模板 === |
||
| 第85行: | 第84行: | ||
=== ✏️ 编辑最佳实践 === |
=== ✏️ 编辑最佳实践 === |
||
* 编辑时使用 ''' |
* 编辑时使用 '''显示预览''' 功能检查效果 |
||
* 在 ''' |
* 在 '''编辑摘要''' 中简要描述修改内容 |
||
* 使用 ''' |
* 使用 '''显示更改''' 对比版本差异 |
||
=== 📱 移动端皮肤配置 === |
=== 📱 移动端皮肤配置 === |
||
| 第98行: | 第97行: | ||
=== 🧪 移动端效果测试 === |
=== 🧪 移动端效果测试 === |
||
在桌面浏览器中测试移动端显示: |
在桌面浏览器中测试移动端显示: |
||
# 右键点击页面,选择 ''' |
# 右键点击页面,选择 '''审查元素''' |
||
# 点击 ''' |
# 点击 '''设备模拟''' 图标(手机/平板) |
||
# 选择不同设备分辨率测试显示效果 |
# 选择不同设备分辨率测试显示效果 |
||
| 第144行: | 第143行: | ||
== 🔚 总结 == |
== 🔚 总结 == |
||
通过上述优化方法,可以显著改善 MediaWiki 页面在移动端的阅读体验: |
通过上述优化方法,可以显著改善 MediaWiki 页面在移动端的阅读体验: |
||
* 使用 ''' |
* 使用 '''响应式表格''' 和 '''自适应布局''' |
||
* 合理配置 ''' |
* 合理配置 '''移动端皮肤''' |
||
* 充分利用 ''' |
* 充分利用 '''预览和测试''' 工具 |
||
* 遵循 MediaWiki 编辑最佳实践 |
* 遵循 MediaWiki 编辑最佳实践 |
||