CSS媒体屏幕和移动问题

Question

在我的网站上，我使用标准的 css 来应用所有内容，除了

@media (max-width: 480px) {

如果我的屏幕/浏览器等于或低于 480，它会使用该媒体下的任何内容。

但我的问题是它无法在我的 iPhone (iPhone 5S) 上运行。 我发现 @media (max-screen-width: 480px) { 可以工作，但我的浏览器宽度 480 不适用于它。

我搜索了不同的网站，但我看到的全部是他们的整个 css 文件，他们只使用 max-width，并且在访问他们的页面时，它在我的手机上运行良好。

问题:我怎样才能轻松做到同时适用于浏览器和屏幕/移动设备？

Answer 1

只需将此添加到您的 head 标签中

<meta name="viewport" content="width=device-width">

和CSS:

@media screen and (max-width: 480px) {
   // code goes here
}