使用 JavaScript 模仿浏览器缩放
imitate browser zoom with JavaScript
如何使用JavaScript缩小整个文档?
我的目标是模仿内置的浏览器缩放并将整个文档缩放到 90%。
我试过使用
document.body.zoom
这仅适用于explorer
并且页面变得混乱(许多元素都在移动(。
有没有办法做到这一点?
你去吧:
用:
document.body.style.zoom=1.0;this.blur();
1.0 表示 100%
150% 将是 1.51000% 将是 10.0
this.blur(( 表示 curser(也许您选择了输入字段(会失去每个选定项的焦点。
或:
您可以使用 css3 元素缩放(来源(
Firefox 不允许使用浏览器进行缩放,因为您无法通过 javascript 或 sth 访问用户属性。
因此,您可以使用一些允许缩放(CSS3:缩放,如上所述(或增加文本大小的CSS样式!例如,您可以使用包含不同的CSS文件来做到这一点。但是这里你有一个"跳跃"的问题,因为样式化的css元素(浮点等(必须"交互"不同的属性。
我上面发布的缩放在Chrome和IE8 +中运行良好(如上所述不支持FF(
--附加信息:
以下是有关如何使用缩放选项精确缩放的示例。可在此处找到示例应用程序
缩放选项通常像浏览器一样处理缩放!
但这仍然是所有的东西,Firefox 不支持,或者 Safari 和 Opera?在铬和IE中它可以工作!
另一种解决方案是:将主要大小放在"em"中,然后通过设置100%,110%(整个css(等大小来解决。所以你可能有不同的CSS文件,"只是"需要替换%属性!
然而,我认为可能没有其他解决方案! :(
使用CSS transform的解决方案:scale((和JavaScript/jQuery:
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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 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>
尝试使用 transform: scale()
.Mozilla Docs
.className {
transform: scale(0.9)
}
您可以使用Javascript更改比例量。
let scaleAmount = 1 - 0.1
document.body.style.transform = `scale(${scaleAmount})`
scale()
减小或增加元素的宽度和高度。如果您希望宽度保持原始大小,而所有内部元素都会缩放,则算法如下所示:
let scaleAmount = 1 - 0.1
document.body.style.transform = `scale(${scaleAmount})`
document.body.style.width = `${100 * (1 / scaleAmount)}%`
document.body.style['transform-origin'] = `0 0`
如果你使用像 React 这样的 UI 框架,你可以将状态中存在的 scaleAmount 传递给内联 CSS。
<header className="App-header" style ={{
transform: `scale(${scaleState})`,
transformOrigin: '0 0',
width: `${100 * (1 / scaleState)}%`
}}>
反应中的示例
我用jquery做了这个,适用于Firefox,Safari,Chrome和IE9+:
window.onload = function() {
var currFFZoom = 1;
var currIEZoom = 100;
$('#In').on('click', function() {
if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6) { //Firefox
var step = 0.02;
currFFZoom += step;
$('body').css('MozTransform', 'scale(' + currFFZoom + ')');
} else {
var step = 2;
currIEZoom += step;
$('body').css('zoom', ' ' + currIEZoom + '%');
}
});
$('#Out').on('click', function() {
if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6) { //Firefox
var step = 0.02;
currFFZoom -= step;
$('body').css('MozTransform', 'scale(' + currFFZoom + ')');
} else {
var step = 2;
currIEZoom -= step;
$('body').css('zoom', ' ' + currIEZoom + '%');
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="Out" value="Zoom Out"/>
<input type="button" id="In" value="Zoom In"/>
您可以执行以下操作:
document.body.style.zoom = "120%"
在样式中为顶级元素 (HTML( 设置 zoom 属性。现在有趣的部分是如何计算它。这就是我所做的。您可以将此代码放在 window.onresize 函数中,以使整个页面自动缩放。
window.onresize = function(){
let zoom = Number((window.innerWidth / window.screen.width).toFixed(3));
document.firstElementChild.style.zoom = zoom;
}
这将计算当前窗口宽度与实际设备宽度的比率。
然后将该值设置为顶级 html 元素缩放属性。可以使用document.firstElementChild
访问顶级 html 元素
将主包装器div 的高度设置为 100%,以防止缩放时出现空白。
- 未注释img´除非调整浏览器大小、缩放或打开开发工具,否则不会显示
- 如何在缩放时获取移动浏览器窗口的宽度
- 当只给定宽度或高度时,是否所有浏览器都按比例缩放图像
- Canvas(fabricjs)阻止网络浏览器在手机上缩放和移动
- 有没有办法防止浏览器缓存滚动位置和缩放级别等值
- 如何为您的网站/视口设置最小宽度,并在宽度低于该宽度时进行浏览器缩放
- 如何根据浏览器缩放自动调整数据表
- 在 Safari 浏览器 (iOS 7) 上,在捏合缩放下调整事件大小,仅在横向缩放中
- 使用 JavaScript 模仿浏览器缩放
- 在页面更改时重置浏览器缩放级别
- 防止跨浏览器缩放
- 通过视口或 javascript 设置浏览器缩放
- 当他们'它们都是跨浏览器缩放的
- 无法修复浏览器缩放时滑块移动距离
- Javascript:如何使用第三方获得浏览器缩放级别
- 当用户浏览器缩放时,如何处理覆盖
- 禁用浏览器缩放
- 基于浏览器缩放更改css
- 触发键盘按下以重置浏览器缩放
- 当我的网站打开时,强制浏览器缩放级别