三星Galaxy S4响应式设计@media

Question

我一直致力于一个完全响应的设计，这个设计在我可以接触到的所有设备上运行良好且经过测试......直到我在三星Galaxy S4的移动版Chrome中查看该项目。 ..看起来默认媒体报告是1920x1080，这使得我的布局加载方式与我在宽屏桌面上的加载方式相同。当然，一切都仍然可用，但它是TINY。要解决此问题，您只需要确保在文档的头部使用视口标记，如下所示...（我之前没有这样做，因为没有它就一切正常）

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

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

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

我可能在我的360px测量中关闭，但它似乎正在工作，现在S4屏幕上的一切都很大，同时进行相应的调整...任何人都可以添加到这个以使其更精确的屏幕尺寸？感谢

Answer 1

我有一个Galaxy S4，我觉得它所达到的设备宽度略高于400px。尝试将媒体查询更改为：

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

看看你的手机看起来是否更好。此外，这是我通常使用的视口：

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

希望它适合你！