Question

我刚刚使用在线移动模拟器和网站测试了我的网站似乎工作完美无缺。我唯一想做的事情只是减少一切的大小。

我有一个允许我在CSS中执行此操作的插件：

.mobile {change any css I want}

例如：

#container {width:800px}  <-- normal css

我能做到：

.mobile #container {width:340px} <-- specific css for all mobile devices

这很棒，但你可以看到这将是多么乏味。我的css 文件长度为2000行。

所以我想知道是否有一种快捷方法改变一切。有没有办法缩小网站，说30％的网站它的原始尺寸？也许是一个jquery shrinkSite插件？我在看尽可能以最少的步骤完成这项工作，这符合我的兴趣在移动设备中为零（因为我没有）。

Answer 1

如果您尝试将所有内容缩小，可以在this question的答案中使用元标记。

<meta name="viewport" content="user-scalable = yes">

这样，移动用户就会看到网站的整个宽度，并可能需要放大才能导航。

Answer 2

你可以在没有做大量工作的情况下接近这个：

<meta name="viewport" content="width=640"/>

默认缩放在大型Android设备上无法正常工作（需要用户手动放大）。但它确实统一了整个网站。上面的代码适用于640像素宽的网站。

如果您需要更多的移动支持，那么您将开始进入响应式设计，这需要更多的努力，无论是自适应内容（布局更改但大多数内容无法扩展）还是流体网格（布局布局）保持不变，所有内容都有所统一。）

自适应内容是以不同方式设计网站以支持移动设备，而流体网格则试图强制传统桌面网站在移动设备上扩展（这不是浏览器的设计工作方式）。

自适应内容是行业标准，但在设计和构建页面之前需要进行大量规划。 Fluid Grid对于非平凡的网站实施起来非常困难，我不推荐它（之前已经使用过它）。

Answer 3

你试过@media查询吗？

例如，如果你有正常的代码：

#container {
    width: 800px;
}

您可以按如下方式使用它们：

#container {
    width: 800px;
}

@media screen and (max-width: 480px) and (min-width: 320px) {
    #container {
         width: 800px;
    }
}

我使用了一个范围来定位特定设备，但您只需指定最大值，@ media查询中的代码将应用于该分辨率以下的所有设备。您可能有另一个问题，因为视网膜显示出来，您可能想要使用浏览器代理。但首先尝试深入研究@media查询技术，你肯定会在mozilla dev blog

上找到更多资料