三星 Galaxy S4 响应式设计@media

Question

我一直在研究一种完全响应式的设计，该设计运行良好，并且在我可以使用的所有设备上都经过了适当的测试……直到我在三星 Galaxy S4 上的移动版 Chrome 浏览器中查看了该项目。 .. 似乎默认媒体报告为 1920x1080，这导致我的布局加载方式与在宽屏桌面上的加载方式相同。诚然，一切仍然可用，但它很小。要解决这个问题，您只需要确保在文档头部使用 viewport 标签，如下所示...（我之前没有这个，因为没有它一切都可以正常工作）

<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0">

并在您的 CSS 文件中使用常规媒体查询，如下所示...

@media screen and (max-device-width: 360px) { }

我可能无法进行 360 像素测量，但它似乎可以正常工作，现在 S4 屏幕上的所有内容都很大，同时进行了相应调整...任何人都可以添加此内容以使其更适合此屏幕尺寸吗？谢谢

Answer 1

我有一台 Galaxy S4，我觉得它所触及的设备宽度略高于 400 像素。尝试将您的媒体查询更改为：

@media screen and (max-width: 480px) { }

看看它在您的手机上看起来是否更好。另外，这是我通常使用的视口：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

希望对你有用！