3

我认为现在每个浏览器都有用户控制的全页缩放。开发人员是否可以通过 html、css 或 javascript 访问它？

我想提供一个 iframe，甚至是一个普通的框架，并将其设置为 50% 缩放。（理想情况下，相对于包含文档的当前缩放。）

这完全可行吗？我不介意它是否是 HTML 5 解决方案，只要它具有现有的功能实现即可。即使它是在夜间构建中。

如果它至少可以与 WebKit 和 Gecko 一起使用，我会非常高兴，如果 Trident 也可以使用，我会很高兴。

4

4 回答 4

3

对我有用的 HTML5 和 CSS3 代码是：IE 6 到 8 的缩放，以及其他现代浏览器的转换比例。

#iframe{
    zoom: 0.75;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0; }

支持 Firefox 3.5 及更高版本、Safari 3.1、Chrome 4.0、Opera 10.5。

寻找这样的 JS 或 JQuery 解决方案，它适用于旧版本的跨浏览器，具有基于 xy 轴和偏移量的自定义构建函数。

我相信路径是使用 xy 轴函数，但找不到任何预制的缩小代码将其作为种子。

于 2011-01-06T02:21:39.783 回答
2

我能想到的最接近的事情是Zoom在 CSS3 中：

div.zoom { zoom: 200%; }

<div class="zoom">
  <p>Hello World</p>
</div>

仅通过将其添加到 ifarme 标签中是行不通的：

<iframe id="myFrame" class="zoom" /> <!-- doesn't work -->

您必须将其应用于 iframe DOM 本身的内容标签，无论是 BODY 还是 wrapper-div。

除此之外，我不知道有一种方法可以找到很好的跨浏览器支持。

于 2009-08-21T00:10:03.593 回答
2

以下适用于 Safari 4.0.2 和最新的 WebKit 每晚。但是，它不适用于 Google Chrome（Windows 和 Mac）。

至于 Firefox 3.5 和 IE 8.0，没关系。此外，最新的 Camino 每晚没有交易。

<style type="text/css" media="screen">
  iframe {
    width  : 500px;
    height : 250px;
  }
</style>

<script type="text/javascript" charset="utf-8">
  function setZoom(element, zoom) {
    element.style.zoom = (zoom || 50) + '%'
  }
</script>

<p>Hello World</p>

<iframe 
  src    = 'http://google.com' 
  onload = "setZoom(this.contentDocument.body)"
  />
于 2009-08-21T00:39:05.550 回答
1

这也可以在 FF 中完成，如下所示：

iframe {
 -moz-transform: scale(0.5, 0.5); /* 50% */
}

效果很好！

检查：https ://developer.mozilla.org/en/CSS/-moz-transform

于 2010-09-18T14:50:02.227 回答