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

以互动方式浏览历史

←上一编辑

删除的内容添加的内容

可视化wikitext

行内

@@ 第2行： / 第2行： @@
 == 📏 宽度 vs 高度 ==
-网页布局通常涉及 '''宽度''' 和 '''高度'''：
+网页布局通常涉及 '''宽度'' 和 '''高度''：
-* 当 '''高度''' 超出屏幕显示范围时，会出现 '''上下滚动条'''，但这通常不影响阅读。
+* 当 '''高度'' 超出屏幕显示范围时，会出现 '''上下滚动条''，但这通常不影响阅读。
-* 当 '''宽度''' 超出屏幕显示范围时，会出现 '''左右滚动条'''，这会导致阅读困难，因为用户需要不断左右滑动才能阅读完整内容。
+* 当 '''宽度'' 超出屏幕显示范围时，会出现 '''左右滚动条''，这会导致阅读困难，因为用户需要不断左右滑动才能阅读完整内容。
-由于现代网页主要采用 '''横向排版'''，应尽量避免 '''页面元素超出屏幕宽度'''，尤其是在移动设备上。
+由于现代网页主要采用 '''横向排版''，应尽量避免 '''页面元素超出屏幕宽度''，尤其是在移动设备上。
 == 📱 移动设备屏幕特性 ==
 移动设备屏幕宽度通常在 '''320px 至 414px'''之间（不考虑像素密度）。虽然手机物理分辨率越来越高，但网页显示仍受限于设备可视区域：
-*''' 桌面端 '''屏幕宽度一般不低于'''1024px'''*''' 移动端 '''理想内容宽度应控制在'''≤414px'''，避免横向滚动
+*'' 桌面端 '''屏幕宽度一般不低于''1024px'''*'' 移动端 '''理想内容宽度应控制在''≤414px'''，避免横向滚动
 == 🎯 常见屏幕分辨率 ==
@@ 第52行： / 第52行： @@
 </syntaxhighlight>
-🔹 '''效果'''：桌面端保持原宽度，移动端变为可横向滚动，不撑破页面布局。
+🔹 '''效果''：桌面端保持原宽度，移动端变为可横向滚动，不撑破页面布局。
 === 📐 自适应元素设计 ===
@@ 第63行： / 第63行： @@
 </syntaxhighlight>
-🔹 '''效果'''：
+🔹 '''效果''：
-* '''桌面端'''：保持 600px 宽度
+* '''桌面端''：保持 600px 宽度
-* '''移动端'''：自动调整为 100% 宽度
+* '''移动端''：自动调整为 100% 宽度
 === 🎨 使用多列模板 ===
@@ 第84行： / 第84行： @@
 === ✏️ 编辑最佳实践 ===
-* 编辑时使用 '''显示预览''' 功能检查效果
+* 编辑时使用 '''显示预览'' 功能检查效果
-* 在 '''编辑摘要''' 中简要描述修改内容
+* 在 '''编辑摘要'' 中简要描述修改内容
-* 使用 '''显示更改''' 对比版本差异
+* 使用 '''显示更改'' 对比版本差异
 === 📱 移动端皮肤配置 ===
@@ 第97行： / 第97行： @@
 === 🧪 移动端效果测试 ===
 在桌面浏览器中测试移动端显示：
-# 右键点击页面，选择 '''审查元素'''
+# 右键点击页面，选择 '''审查元素''
-# 点击 '''设备模拟''' 图标（手机/平板）
+# 点击 '''设备模拟'' 图标（手机/平板）
 # 选择不同设备分辨率测试显示效果
@@ 第105行： / 第105行： @@
 === 页面宽度全局调整 ===
 通过修改 MediaWiki 皮肤 CSS 调整整体宽度：
-<syntaxhighlight lang="css">
+<syntaxhighlight lang="css">/* 在 MediaWiki:Common.css 中添加 */#globalWrapper {
-/* 在 MediaWiki:Common.css 中添加 */
-#globalWrapper {
   max-width: 1200px;
   margin: 0 auto;
@@ 第123行： / 第121行： @@
 [[File: 示例.jpg|frameless|600px|class=responsive-img|alt = 替代文本]]
 </syntaxhighlight>
+== 测试与验证 ==
+* 在桌面浏览器开发者工具中启用设备模拟，分别测试 320px、375px 和 414px 宽度，确保关键内容不会横向溢出。
+* 参考 [[MediaWiki:Common.css]] 中的全局响应式样式，如果需自定义可在 [[MediaWiki:Common.js]] 或 [[MediaWiki:Common.css]] 添加局部规则。
+* 完成修改后，利用 [[Help:快速指南]] 中的预览与显示更改功能验证在移动/桌面视图的实际表现。
 == ❗ 常见问题与解决 ==
@@ 第143行： / 第147行： @@
 == 🔚 总结 ==
 通过上述优化方法，可以显著改善 MediaWiki 页面在移动端的阅读体验：
-* 使用 '''响应式表格''' 和 '''自适应布局'''
+* 使用 '''响应式表格'' 和 '''自适应布局''
-* 合理配置 '''移动端皮肤'''
+* 合理配置 '''移动端皮肤''
-* 充分利用 '''预览和测试''' 工具
+* 充分利用 '''预览和测试'' 工具
 * 遵循 MediaWiki 编辑最佳实践