如何让 RWD 为移动设备工作？答案

【问题标题】：How can I get RWD to work for mobile?如何让 RWD 为移动设备工作？
【发布时间】：2017-04-18 03:32:09
【问题描述】：

我正在构建一个 SPA。我有

在 index.html 中，我有一些媒体查询，例如：

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

当我在 Firefox 中打开网站时，会显示一系列设备尺寸，当我选择较小的尺寸时，会显示 RWD。侧边栏向下滑动，图像更小，等等。一切都很好。问题是当我在手机 (android) 上打开网站时，就好像我什么都没做一样。 Google 也不识别 RWD 更改。我错过了什么吗？

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

要针对移动设备和设备以及基本上所有内容都正确使用此媒体查询：

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

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

【讨论】：

【解决方案3】：

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

移动到合适的主机（天哪，虽然我实际上并不推荐它，因为他们没有任何服务器端脚本）解决了这个问题，而没有进行任何其他更改。

【讨论】：