缩小站点（自动在 html 代码中）答案

【问题标题】：Zoomin out of site (automatically in the html code)缩小站点（自动在 html 代码中）
【发布时间】：2013-07-26 10:06:56
【问题描述】：

我有一个网页（html + css 文件）。当它以其原生缩放显示时，它看起来并不好。我需要缩小（两次单击 ctrl+-）让它看起来不错。

因此，我希望这种缩小的格式成为网站的原生缩放，也就是说，看到我网站的人会默认以这种方式看到它（在 Firefox、Chrome 和 Internet Explorer 上）。

问题：有没有办法做到这一点？最简单的方法是什么？（我的 html/css 编码不太好。我使用免费模板来构建自己的网站。）

【问题讨论】：

好吧，我不想公开 :)
它的堆栈溢出，而不是证券交易所:-)
@Dilworth，抱歉无法抗拒
@AnaMaria，没关系，反正我没听懂这个笑话 :)

标签： html css zooming scaling

【解决方案1】：

这是因为你的 CSS 没有根据分辨率改变

所以使用媒体查询

http://mediaqueri.es/

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

【讨论】：

我看不出媒体查询有什么帮助。媒体查询只是一个条件，它可以回答真值或假值。但是，根据答案，我需要降低缩放系数。但我的问题是我不知道如何减少缩放。

【解决方案2】：

使用媒体查询为不同的屏幕分辨率编写不同的样式。

此外，对字体大小宽度、填充、边距等使用 em 和百分比。这样当您缩放页面时，它会根据分辨率相对于父级进行更改。

【讨论】：

迪托。在这里看不到媒体查询的帮助。我错过了什么吗？

【解决方案3】：

您可以使用@media query

@media (min-width: 700px) { ... }
@media (min-width: 700px) and (orientation: landscape) { ... }
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
@media (min-width: 700px), handheld and (orientation: landscape) { ... }

Further more

您也可以使用window.resizeTo(iWidth, iHeight) 方法来调整浏览器窗口的大小。

【讨论】：

谢谢。 window.resize 是否也控制图片的缩放？
哦，顺便说一句，我当然不想改变浏览器窗口，只改变我网站的内容。
关于媒体查询，我不需要有条件地改变缩放。我只需要一个变焦。我只是不知道该怎么做。
如果是这样，使用@media 查询。
我不明白这里的媒体查询是如何工作的：即使我的网站发现了浏览器的参数，我也需要更改缩放。但是怎么做呢？

【解决方案4】：

这是一个可以在 CSS 中使用的技巧，但请记住，这会从中心缩小 HTML 并弄乱您网站的整体对齐方式。不过我敢肯定，如果你玩一下，你可能会发现这对你有利。

CSS

html {
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    overflow-x:scroll;
    overflow-y:scroll;
}

WORKING FIDDLE

【讨论】：