如何使用 Javascript 在浏览器上获取“Ctrl +”行为？答案

【问题标题】：How to obtain 'Ctrl +' behavior on a browser using Javascript?如何使用 Javascript 在浏览器上获取“Ctrl +”行为？
【发布时间】：2012-01-15 07:57:06
【问题描述】：

我在我的 47 英寸液晶电视（分辨率 1920 * 1080、16:9）上打开了 Stack Overflow 网站，发现文本和网站就在很多空白的中间。文本不可读，因为 Stack Overflow 与许多其他网站一样，针对标准 1200/1024 视口进行了优化。

为了使网站可读，我按了“ctrl”和“+”键，让内容占据了更多的屏幕宽度。我确信这不是“放大”，因为浏览器实际上在做的是扩大内容大小（即减少每个字符的像素数）。

在检测到视口的分辨率/大小参数后，是否可以使用 Javascript 作为预渲染练习来实现这种“ctrl +”行为？

更新：我尝试了@media-queries，它可以缩放字体大小和其他一些东西，但它无助于缩放图像和其他内容（例如填充等）一种平衡的方式。最重要的是，它不满足将给定 div 的大小限制为“610 像素但仍占据可用屏幕宽度的 75%”的条件。

如果我们在基于 Gecko/Webkit 的浏览器上按 ctrl +，这就像一个分辨率变化。抱歉不能接受下面的回答。

【问题讨论】：

标签： javascript browser viewport resolution-independence

【解决方案1】：

大部分是的。 IE6,7 有zoom，IE8 有-ms-zoom

其他人都有 2D 变换和scale()，所以你被覆盖了。见zoom css/javascript

我还没有看到有人将这种效果应用于整个文档，所以事情可能有问题。享受吧！

【讨论】：

这是一个很酷的提示@paul。让我看看结果，并尽快回复。
我尝试使用 scale()，但最后我使用另一种算法解决了这个问题。这是以固定分辨率方式解析的演示页面：bubbles.bubbleideas.com/letters/… 意思是无论用户执行多少 Ctrl+/Ctrl- 操作，纸张都会像静止的 w.r.t 设备像素/屏幕一样解析。抱歉这么晚才更新。

【解决方案2】：

我确信使用 javascript 是可能的，就像大多数事情看起来一样，但我认为这正是 CSS Media Queries 专门设计用来解决的问题。

查看Responsive Web Design over at A List Apart上的文章

【讨论】：

Assigning max-width min-width range (@media-queries) 确实有帮助，但它似乎并没有给出 'ctrl +' 在浏览器上的确切效果。例如，以下网站有一个响应式网页设计：foundation.zurb.com，但它并不能完全扩大到填满整个电视屏幕并同时可读。我必须使用“ctrl +”来放大文本和图像大小。我相信响应式设计更侧重于处理横向和纵向模式之间的内容布局。
嗯，当屏幕宽度很大时，那个网站的固定宽度布局约为 980px。这个“ctrl +”效果是你想应用到你自己的网站还是浏览器插件？
是的。我正在考虑制作一个完全根据百分比声明设计的网站，只有“最小宽度”以确保在缩小/调整浏览器大小时保持布局完整性。是否有任何已知/已完成的方法（使用 javascript）来确保浏览器被放大到 % 宽度最终给出固定像素数的元素尺寸的分辨率？
不，我不知道该怎么做...但是我想您可以使用媒体查询，在更高的分辨率上，将字体大小从 11/12px 增加到 18px 或更高。