陋室

Help:移动优化：修订间差异

以互动方式浏览历史
←上一编辑下一编辑→

Maintenance script​（留言 | 贡献）

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