移动 CSS：减小所有内容的大小答案

【问题标题】：mobile css: reduce size of everything移动 CSS：减小所有内容的大小
【发布时间】：2012-12-09 21:12:06
【问题描述】：

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

我有一个插件可以让我在 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 插件？我在看根据我的兴趣，以尽可能少的步骤做到这一点在移动设备中为零（因为我没有）。

【问题讨论】：

标签： css mobile

【解决方案1】：

您可以在不做大量工作的情况下最接近此目标的是：

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

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

如果您需要比这更强大的移动支持，您可以开始使用响应式设计，这需要更多的努力，自适应内容（布局发生变化但大部分内容无法缩放）或流体网格（布局保持不变，所有内容的比例都有些统一）。

自适应内容旨在以不同方式设计网站以支持移动设备，而 Fluid Grid 试图强制传统桌面网站在移动设备上扩展（浏览器的设计初衷并非如此）。

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

【讨论】：

【解决方案2】：

如果您想让一切更小，您可以使用元标记，如this question 的答案。

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

这样，移动用户将看到整个网站的宽度，并且可能需要放大才能浏览。

【讨论】：

【解决方案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 上找到更多材料

【讨论】：