2

我刚刚使用在线移动模拟器测试了我的网站，该网站似乎运行良好。我唯一想做的就是缩小所有东西的大小。

我有一个插件允许我在 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 插件？我希望以尽可能少的步骤来做到这一点，因为我对移动设备的兴​​趣为零（因为我没有）。

4

3 回答 3

2

无需做大量工作即可达到此目的的最接近方法是：

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

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

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

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

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

于 2012-12-09T23:36:52.697 回答
2

如果你想让所有东西都变小，你可以使用元标记，就像这个问题的答案一样。

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

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

于 2012-12-09T22:01:32.217 回答
0

你试过@media 查询吗？

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

#container {
    width: 800px;
}

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

#container {
    width: 800px;
}

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

我使用了一个范围来定位特定设备，但您可以指定最大值，@media 查询中的代码将适用于低于该分辨率的所有设备。您可能还有其他顾虑，因为视网膜显示出来了，您可能想使用浏览器代理。但首先尝试深入研究@media 查询技术，您肯定会在mozilla 开发博客上找到更多材料

于 2012-12-09T21:57:37.043 回答