我需要在我的网站上创建两个按钮，用于改变浏览器缩放级别（+）（-）。由于图像大小和布局问题，我要求浏览器缩放而不是CSS缩放。
这是否可能呢？我听到了不同的说法。
更改浏览器缩放级别
152
- Jourkey
6
11浏览器缩放应该由用户控制，而不是网站控制。如果网站可以更改浏览器缩放级别，那么这将破坏浏览器具有的最基本的可访问性功能。任何允许网站更改浏览器缩放的方法我都认为是一个严重的漏洞，因为对该功能的任何使用都将被视为滥用。 - user57368
45@unknown (谷歌)，胡说八道。你完全错了。这些控件对于在JavaScript中创建能够与Flash相媲美的丰富Web应用程序非常有价值，其次浏览器可以限制缩放控件仅在用户交互时可用，而不给予完全控制。 - Jourkey
145我真的厌倦了整个“你永远不应该做 XYZ”的说法。在完美的世界或者当你正在编写一个全新的网站时，这样做都是好的。但是如果这个网站已经存在十年了，客户不想为一个新设计付费，你的老板希望你让网站在平板电脑上正常工作，那种“你真的不应该这样做”的态度可能会被彻底抛弃。如果你知道如何做某件事，请说出来。如果你不知道，请不要发表评论。在论坛上宣扬学究式的无聊言论是没有帮助的，而且实际上很粗鲁。 - Nathan Crause
7虽然这是一篇旧文章，但“你永远不应该”和“浏览器不应该允许”之间存在差异。正是因为Web开发人员在推动极限，浏览器开发人员必须设定限制，以保护用户的利益。否则，我们仍将处于自定义彩色滚动条和加载时抖动窗口的Web世界。 - Olivvv
2老旧但热门，谢谢@NathanCrause！我已经到了需要发布辅助功能的地步，因为一些用户视力不佳，无法更改浏览器缩放比例使我的生活变得困难。CSS缩放与jquery ui不兼容。 - DdD
请参见 https://dev59.com/SWEi5IYBdhLWcg3wpdjJ。 - Michael M
10个回答
76
在IE和Chrome中可能有效，但在Firefox中无效：
<script>
function toggleZoomScreen() {
document.body.style.zoom = "80%";
}
</script>
<img src="example.jpg" alt="example" onclick="toggleZoomScreen()">
- Corne Lukken
4
16Jourkey 明确要求使用非 CSS 缩放。 - kmkaplan
4这只是在body标签上内联更改CSS缩放值，这正好与问题所要求的相反。 - zrooda
1不要忘记，这个缩放状态可能需要被持久保存并在会话变量中进行管理，并在每次页面加载时重新播放。 - Michael Blankenship
1根据MDN的说法，这是非标准的且不建议在生产中使用的。来源：https://developer.mozilla.org/en-US/docs/Web/CSS/zoom - Vijay Chavda
56
我认为大多数浏览器都无法做到这一点，至少不能在没有额外插件的情况下。并且无论如何，我会尽量避免依赖浏览器的缩放，因为实现方式各不相同（有些浏览器只缩放字体，而其他浏览器也会缩放图像等）。除非您不太关心用户体验。
如果您需要更可靠的缩放功能，则考虑使用JavaScript和CSS缩放页面字体和图像，或者可能在服务器端进行缩放。通过这种方式可以解决图像和布局缩放问题。当然，这需要更多的工作。
- Eemeli Kantola
2
嗨，减小应用程序渲染缩放级别怎么样？ - Arj 1411
不确定您的评论是什么意思？如今，CSS缩放（根据其他答案https://dev59.com/hHNA5IYBdhLWcg3wL62x#13840578）可能适用于大多数情况，除了Firefox。 - Eemeli Kantola
31
尝试看看这是否适用于您。 这适用于FF，IE8 +和Chrome。否则部分适用于非Firefox浏览器。虽然这会给您带来缩放效果，但它实际上并未修改浏览器级别的缩放值。
var currFFZoom = 1;
var currIEZoom = 100;
$('#plusBtn').on('click',function(){
if ($.browser.mozilla){
var step = 0.02;
currFFZoom += step;
$('body').css('MozTransform','scale(' + currFFZoom + ')');
} else {
var step = 2;
currIEZoom += step;
$('body').css('zoom', ' ' + currIEZoom + '%');
}
});
$('#minusBtn').on('click',function(){
if ($.browser.mozilla){
var step = 0.02;
currFFZoom -= step;
$('body').css('MozTransform','scale(' + currFFZoom + ')');
} else {
var step = 2;
currIEZoom -= step;
$('body').css('zoom', ' ' + currIEZoom + '%');
}
});
- Vijey
5
2你必须拥有jQuery 1.8.3或jQuery迁移插件（以使用$.browser）。 - jave.web
1为了保持一致性，在MozTransform情况下，设置原点： - Joel Teply
1现在你只需要在所有浏览器中设置
transform: scale(..) 就可以了。即使在当前版本的 Firefox 中，MozTransform 也不存在。 - Hielke Walinga你可能想要设置
transform-origin: 50% 0;。 - Jasper de VriesOP明确要求不使用CSS缩放。 - gre_gor
14
你可以使用CSS3缩放功能，但我还没有用jQuery测试过。现在尝试并告诉你。
更新：已经测试过了，可以工作，但很有趣。
- obzenner
5
是的，完全不需要。有跨浏览器的想法吗？更新：不需要了，刚刚检查了上面的帖子！干杯 - obzenner
似乎在Chrome和Safari中可以工作，但在Firefox中不行。 - Ansjovis86
iPad OS Safari出现故障 - leroyjenkinss24
2截至2021年1月，可以在Chrome中使用。可以在此处检查其他兼容性：https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
显然不推荐，但适用于快速hack。 - Kartik Chugh
OP明确要求不使用CSS缩放。 - gre_gor
3
我找不到改变浏览器实际缩放级别的方法，但是你可以使用CSS transform: scale()来接近解决。以下是基于JavaScript和jQuery的解决方案：
<!-- Trigger -->
<ul id="zoom_triggers">
<li><a id="zoom_in">zoom in</a></li>
<li><a id="zoom_out">zoom out</a></li>
<li><a id="zoom_reset">reset zoom</a></li>
</ul>
<script>
jQuery(document).ready(function($)
{
// Set initial zoom level
var zoom_level=100;
// Click events
$('#zoom_in').click(function() { zoom_page(10, $(this)) });
$('#zoom_out').click(function() { zoom_page(-10, $(this)) });
$('#zoom_reset').click(function() { zoom_page(0, $(this)) });
// Zoom function
function zoom_page(step, trigger)
{
// Zoom just to steps in or out
if(zoom_level>=120 && step>0 || zoom_level<=80 && step<0) return;
// Set / reset zoom
if(step==0) zoom_level=100;
else zoom_level=zoom_level+step;
// Set page zoom via CSS
$('body').css({
transform: 'scale('+(zoom_level/100)+')', // set zoom
transformOrigin: '50% 0' // set transform scale base
});
// Adjust page to zoom width
if(zoom_level>100) $('body').css({ width: (zoom_level*1.2)+'%' });
else $('body').css({ width: '100%' });
// Activate / deaktivate trigger (use CSS to make them look different)
if(zoom_level>=120 || zoom_level<=80) trigger.addClass('disabled');
else trigger.parents('ul').find('.disabled').removeClass('disabled');
if(zoom_level!=100) $('#zoom_reset').removeClass('disabled');
else $('#zoom_reset').addClass('disabled');
}
});
</script>
- Bogdanio
2
正如被接受的答案所提到的，您可以逐个扩大DOM元素中的fontSize CSS属性，以下代码供参考。
<script>
var factor = 1.2;
var all = document.getElementsByTagName("*");
for (var i=0, max=all.length; i < max; i++) {
var style = window.getComputedStyle(all[i]);
var fontSize = style.getPropertyValue('font-size');
if(fontSize){
all[i].style.fontSize=(parseFloat(fontSize)*factor)+"px";
}
if(all[i].nodeName === "IMG"){
var width=style.getPropertyValue('width');
var height=style.getPropertyValue('height');
all[i].style.height = (parseFloat(height)*factor)+"px";
all[i].style.width = (parseFloat(width)*factor)+"px";
}
}
</script>
- SalutonMondo
-2
我用以下代码进行了修复。
HTML：
HTML：
<div class="mt-5"
[ngStyle]="getStyles()">
TS：
getStyles() {
const screenWidth = screen.width;
const windowWidth = window.innerWidth;
if (windowWidth != screenWidth) {
const percentDifference = Math.ceil((screenWidth / windowWidth) * 100);
if (percentDifference > 100) {
this.bannerBackgroundImageSize = '20%, 74%';
} else if (percentDifference === 100) {
this.bannerBackgroundImageSize = '20%, 72%';
} else if (percentDifference >= 90 && percentDifference <= 99) {
this.bannerBackgroundImageSize = '25%, 70%';
} else if (percentDifference >= 80 && percentDifference <= 89) {
this.bannerBackgroundImageSize = '28%, 68%';
} else if (percentDifference >= 75 && percentDifference <= 79) {
this.bannerBackgroundImageSize = '29%, 67%';
} else if (percentDifference >= 67 && percentDifference <= 74) {
this.bannerBackgroundImageSize = '30%, 65%';
} else if (percentDifference >= 50 && percentDifference <= 66) {
this.bannerBackgroundImageSize = '30%, 61%';
} else if (percentDifference < 50) {
this.bannerBackgroundImageSize = '30%, 58%';
}
} else {
this.bannerBackgroundImageSize = '20%, 72%';
}
const myStyles = {
'background-size': this.bannerBackgroundImageSize,
};
return myStyles;
}
我希望这个程序可以在所有缩放级别下正常工作，并且可以适用于所有样式。
有用的链接：
https://css-tricks.com/can-javascript-detect-the-browsers-zoom-level/
- Basavaraj SK
1
这只是更改背景而不是页面。 - gre_gor
-2
你可以指定 CSS 缩小或放大的部分，或整个 document.body.style.zoom。
您可以设置最大和最小缩放级别。也就是说，按钮 (+) 或 (-) 上更多的点击不会进一步缩放或缩小。
现在让按钮（+）和（-）起作用。
您可以设置最大和最小缩放级别。也就是说，按钮 (+) 或 (-) 上更多的点击不会进一步缩放或缩小。
var zoomingTarget = document.querySelector('.zooming-target')
var zoomInTool = document.getElementById('zoom-in');
var zoomOutTool = document.getElementById('zoom-out');
let zoomIndex = 0;
function zooming () {
if (zoomIndex > 2) {
zoomIndex = 2
} else if (zoomIndex < -2) {
zoomIndex = -2
}
zoomingTarget.style.zoom = "calc(100% + " + zoomIndex*10 + "%)";
}
现在让按钮（+）和（-）起作用。
zoomInTool.addEventListener('click', () => {
zoomIndex++;
if(zoomIndex == 0) {
console.log('zoom level is 100%')
}
zooming();
})
zoomOutTool.addEventListener('click', () => {
zoomIndex--
if(zoomIndex == 0) {
console.log('zoom level is 100%')
}
zooming();
})
由于style.zoom在Firefox上无法使用，请考虑使用style.transform = scale(x,y)。
- thao
1
OP明确要求不使用CSS缩放。 - gre_gor
-2
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var currFFZoom = 1;
var currIEZoom = 100;
function plus(){
//alert('sad');
var step = 0.02;
currFFZoom += step;
$('body').css('MozTransform','scale(' + currFFZoom + ')');
var stepie = 2;
currIEZoom += stepie;
$('body').css('zoom', ' ' + currIEZoom + '%');
};
function minus(){
//alert('sad');
var step = 0.02;
currFFZoom -= step;
$('body').css('MozTransform','scale(' + currFFZoom + ')');
var stepie = 2;
currIEZoom -= stepie;
$('body').css('zoom', ' ' + currIEZoom + '%');
};
</script>
</head>
<body>
<!--zoom controls-->
<a id="minusBtn" onclick="minus()">------</a>
<a id="plusBtn" onclick="plus()">++++++</a>
</body>
</html>在Firefox中不会改变缩放，只会改变比例！
- amini gazar
1
4再次强调，这是CSS缩放，而这不是问题所期望的。 - John Weisz
-2
您可以使用Window.devicePixelRatio和Window.matchMedia()
const onChange = e => {
const pr = window.devicePixelRatio;
const media = `(resolution: ${pr}dppx)`;
const mql = matchMedia(media);
const prString = (pr * 100).toFixed(0);
const textContent = `${prString}% (${pr.toFixed(2)})`;
console.log(textContent);
document.getElementById('out').append(
Object.assign(document.createElement('li'), {textContent})
)
mql.addEventListener('change', onChange, {once: true});
};
document.getElementById('checkZoom').addEventListener('click', e => onChange());
onChange();<button id="checkZoom">get Zoom</button>
<ul id="out"></ul>- Exodus 4D
1
问题是如何改变它，而不是检测它。 - gre_gor
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接