如何让RWD适用于移动设备？

Question

我正在建立一个SPA。我有      

在index.html中

，我有一些媒体查询，例如：

@media screen and (min-width: 640px){
  .sidebar {
    width: 20%;
    float: left;
  }
}

当我在Firefox中打开网站时，我会看到一系列设备尺寸，当我选择较小的尺寸时，RWD会显示出来。侧边栏向下滑动，图像更小等等。一切都很棒。问题是当我在手机（Android）上打开网站时，就好像我没有做过任何一样。谷歌也不承认RWD的变化。我错过了什么吗？

Answer 1

请记住，手机上的分辨率变得如此荒谬，以至于旧式媒体查询对于确定设备基本上没用。当然，我的5英寸手机屏幕上实际上没有2560像素，但它使用“设备像素比”将每个逻辑像素视为2,3,4或更多像素。

因此，我们可以针对该指标来确定设备。尝试将媒体查询更改为以下内容：

@media screen and (min-device-width: 640px){
  .sidebar {
    width: 20%;
    float: left;
  }
}

Answer 2

要定位移动设备和设备，基本上所有内容都正确使用此媒体查询：

@media handheld,screen and (min-width:600px){}

我个人也会使用max-width而不是min-width，这对缩小尺寸和代码分组更有意义，但这可能是我个人的偏好。

Answer 3

@media屏幕位确实有效 - 但我使用的主机并不允许它。我自从移动了我的网站，并且它的移动友好性。只是想我会留下这个，以防其他人遇到这个问题。托管以前是通过我的学校完成的，所以我没有很多信息可以分享。

转移到一个合适的主机（godaddy，虽然我实际上没有推荐它，因为他们没有任何服务器端脚本）修复了问题而没有做任何其他更改。