三星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) { }

我可能無法進行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" />

希望可以幫助你！