【问题标题】:How can I implement a zoom function like the browser's CTRL +如何实现像浏览器的 CTRL + 这样的缩放功能
【发布时间】:2017-05-31 15:41:17
【问题描述】:

我想要一个放大按钮(增加字体大小是主要目标,但也需要图像和表格等)

【问题讨论】:

  • 您是否要在自己的网站上实现这一目标?还是您正在访问的?
  • 在其他问题上见my answer,它可能对你也有用
  • 为什么需要这样做?您的用户肯定可以只使用他们的浏览器吗?
  • 您的用户浏览器已经具有缩放功能,正如您所确定的。无需重新发明。
  • 这是标记为 IE6 是因为您真的需要 IE6 解决方案吗?

标签: javascript css internet-explorer-6


【解决方案1】:

zoom css3 property 正是这样做的,最新的 webkit 浏览器(chrome、safari)支持它。

编辑:显然即使 IE6 在某种程度上也支持它,请检查下面的 cmets

在你的 body 或容器上设置 zoom css 属性应该可以解决问题。可以像使用 jQuery 的 $('body').css('zoom', '200%'); 一样简单。

查看http://jsfiddle.net/Ks6Yn/1/ 示例

【讨论】:

  • 我认为IE6不支持css3
  • @user521180:如果您明确需要 IE6 支持,恐怕您在此功能上不走运,除非您可以调整一些相对字体大小,否则会更难,而且可能无法按预期工作.
  • 奇怪的是,在这种情况下,IE 确实支持缩放......这是他们多年前的黑客行为之一。但它的行为很奇怪......缩放包括表单控件边框在内的所有内容......
  • @scunliffe:缩放不应该是这样工作的吗,放大所有组件,包括表单控件及其边框?缩放 缩放 imo :)
  • 哇,这真是个奇迹。它会尝试让它工作并回复你谢谢
【解决方案2】:

如果可用空间较小,以下代码会将页面缩放到 1024px = 100%。如果有足够的空间,页面将按原样显示。

https://jsfiddle.net/xgqw5bjo/3/

请注意,setting style via jQuery 的版本不能作为 jQuery 自己处理前缀,但在这个解决方案中我需要控制它们中的每一个。

~function () {
  var $window = $(window), $body = $("body");
  var ie = document.documentMode;
  
  function updateSizes() {
    var width = $window.width(), scale = Math.min(width / 1024, 1);

    var style = $body[0].style;
    
    style.msZoom = ie === 8 || ie === 9 ? scale : 1;
    style.zoom = ie === 10 || ie === 11 ? 1 : scale;
    style.mozTransform = "scale(" + scale + ")";
    style.oTransform = "scale(" + scale + ")";
    style.transform = "scale(" + scale + ")";
  }

  $window.resize(updateSizes);
  updateSizes();
}();
html {
  width: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  transform-origin: top left;
}

@supports (transform: scale(1)) {
  body {
    -ms-zoom: 1 !important;
    zoom: 1 !important;
  }
}

div {
  width: 1024px;
  height: 128px;
  background: url(//i.stack.imgur.com/eMSCb.png) repeat-x;
  background: repeating-linear-gradient(to right, blue, red 256px);
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>

理论上它应该以下列方式工作:

  • IE 5.5 - 7 缩放
  • IE 8 - 9 -ms-zoom
  • IE 10 - 11 transform & ie
  • Edge 12+ transform & @supports

  • Opera 11.5 - 12.0 -o-transform

  • Opera 12.1 转换

  • Firefox 3.5 - 15 -moz-transform

  • Firefox 16+ 转换
  • Firefox 22+ transform(有@supports,但没有zoom)

  • Safari 4 - 8 缩放

  • Safari 9+ transform & @supports(同时出现)

  • Chrome 4 - 27 缩放

  • Chrome 28 - 35 zoom(有@supports,但还没有transform)
  • Chrome 36+ transform & @supports

如果我添加-webkit-transform,它将在 Safari 3.1 - 3.2 中开始工作,但会阻止很多其他版本。

实际上,现代浏览器的结果是使用transform 并忽略zoom。所有现代的活动浏览器(Edge、Firefox、Safari、Chrome)都已经具有 transform 和 @supports 并符合标准,因此将来代码不会被破坏。

测试了以下代码:

  • IE 11
  • 边缘 15
  • Opera 12.18
  • 火狐50
  • Safari 5(赢)
  • Safari 10 (Mac)
  • 铬 54、58

浏览器支持详情:


Translation of my answer on ruSO.

【讨论】:

  • 赞成。不是因为我使用它,而是因为这是一个可靠的答案。完整的解释、代码示例、链接和浏览器支持信息。不错!
【解决方案3】:

一个可行的概念是使用 JavaScript/jQuery 在点击时加载覆盖 CSS 样式,例如。一种增加所有内容大小以覆盖基本样式的样式。

【讨论】:

    【解决方案4】:

    方法 1

    您需要设置一个变量来存储您的缩放量。

    当您应用放大或缩小时,相应地更改此变量并更改页面上每个元素的大小、显示为块的元素的宽度和高度以及字体大小。

    方法 2

    有不同的样式表,在缩放值改变的那一刻加载需要的样式表。

    方法 3

    仅将与缩放级别相关的类更改为元素,并为每个缩放类设置一个 CSS 规则。

    无论如何,我认为你正在尝试做的事情是错误的。

    【讨论】:

      猜你喜欢
      • 2021-12-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-07-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多