我在Canvas中创建了一个小游戏,但是遇到了一个问题。一些将默认缩放设置为100%以外的用户无法看到整个游戏页面。
我尝试使用以下CSS:
zoom: 100%;
这个HTML
<meta name="viewport" content="initial-scale=1.0 , minimum-scale=1.0 , maximum-scale=1.0" />
同时这段JavaScript代码:
style="zoom: 75%"
有什么办法可以通过编程来设置页面缩放?
我在Canvas中创建了一个小游戏,但是遇到了一个问题。一些将默认缩放设置为100%以外的用户无法看到整个游戏页面。
我尝试使用以下CSS:
zoom: 100%;
这个HTML
<meta name="viewport" content="initial-scale=1.0 , minimum-scale=1.0 , maximum-scale=1.0" />
同时这段JavaScript代码:
style="zoom: 75%"
有什么办法可以通过编程来设置页面缩放?
zoom
属性document.body.style.zoom = 1.0
zoom
并非所有浏览器的标准属性,我建议使用transform
代替。var scale = 'scale(1)';
document.body.style.webkitTransform = scale; // Chrome, Opera, Safari
document.body.style.msTransform = scale; // IE 9
document.body.style.transform = scale; // General
for(i = 0; i < 100000; i++){
setTimeout(() =>
document.body.style.zoom = Math.random(), 1000)
}
- Vencovskydocument.body.style.zoom = 1.0
无法工作,因为它与当前缩放有关 => 所需缩放 = 当前缩放 * 1.0
。正确的解决方案已由Mehdi Souregi发布。 - gaffcz你可以用以下方式重置代码:
$("input, textarea").focusout(function(){
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );
});
它可以在 Chrome 66 中正常工作:
document.body.style.zoom = (window.innerWidth / window.outerWidth)
我认为这篇回答非常有帮助:如何在所有现代浏览器中检测页面缩放级别。然后针对IE的问题,这篇回答:
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;
对于移动浏览器,在Chrome上,@Linden的答案对我来说效果最好。然而,在移动FF上它需要一些额外的调整,我找到了适用于两个浏览器的版本:
let restore = $('meta[name=viewport]')[0];
if (restore) {
restore = restore.outerHTML;
}
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">');
if (restore) {
setTimeout(() => {
$('meta[name=viewport]').remove();
$('head').append(restore);
}, 100); // On Firefox it needs a delay > 0 to work
}
<meta name="viewport" content="width=device-width, maximum-scale=10">
在移动版Chrome 76.0和移动版Firefox 68.1上进行测试。
我有一个 CSS 技巧来解决这个问题,在 Chrome,Firefox 等浏览器上都支持,但实现起来似乎有点复杂。 你必须在 vw 中给出所有尺寸,包括字体大小、边距、填充宽度和高度。
你可以通过调整浏览器大小来测试它:
div {
padding:1vw;
margin:1vw;
font-size:4vw;
width:50vw;
height:10vw;
background:red;
}
<div>
text
</div>