提问人：Mien Thao 提问时间：11/4/2023 更新时间：11/4/2023 访问量：27
如何修复在移动设备上查看时图片和文本的移动？
How can I fix my pictures and texts shifting when viewed on mobile?
问：
这是我的第一个网站，我在移动设备上的内容对齐方面遇到了问题。在桌面上，它看起来很正常，但在移动设备上，内容会向右移动。
这是该网站的链接： https://koffeemuggers.neocities.org/
我已经在我的代码中，但问题仍然存在。我阅读了其他关于此的论坛帖子，但没有帮助。<meta name="viewport" content="width=device-width, initial-scale=1.0">
感谢您的帮助！
答：
1赞
Kevin Dudley
11/4/2023
#1
我建议在您的 CSS 中尝试 flexbox 以帮助布局，我已经使用它一段时间了，我认为它对解决您的问题很有用。
1赞
shaksphere
11/4/2023
#2
我建议设置 Chrome Inspect Dev 工具，这样您就可以在插入物理设备的情况下进行调试，这非常有用，因为您可以检查元素，使用 CSS，例如像 Kevin 在之前的答案中建议的那样添加 flex box，如果需要，您甚至可以在控制台中删除一些 javascript 进行测试， 链接到这里：
最好在实际的移动设备上进行测试，而不仅仅是在桌面上使用开发工具进行检查和切换设备，桌面上的开发工具并不理想，并且并不总是反映你在移动设备上看到的内容，有时你可能需要针对移动设备定位特定的东西。
您可以保留其他一些快速笔记：
- 源代码中没有 div 标签
- p 标签左右有 100 px 的边距 - 导致其移动
- 500x500 像素对于移动设备来说可能太大了，可以考虑为移动设备设置样式差异或使其更小一些（对于移动设备来说更垂直）
- center 标记用于图像，HTML5 不支持 center：https://www.w3schools.com/tags/tag_center.ASP
评论