blocks|key|520113|text|可以在页面加载时设置zoom属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|520114|document.body.style.zoom+=+1.0|code-block|syntax|javascript|520115|但是，zoom是不是所有浏览器的标准属性。，我建议使用transform。|520116|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|520117|http://jsfiddle.net/5RzJ8/|520118|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#feat=css-zoom|1^0|A|4|0|0|3|4|R|9|8|D|0|0|0|0|Q|1|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|M|3|N|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|Q|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|P]]]]

You can set <code>zoom</code> property on page load

<pre><code>document.body.style.zoom = 1.0
</code></pre>

But, <code>zoom</code> is <a href="http://caniuse.com/#feat=css-zoom" rel="noreferrer">not a standard property for all browsers</a>, I recommend using <code>transform</code> instead.

<pre><code>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
</code></pre>

<a href="http://jsfiddle.net/5RzJ8/" rel="noreferrer">http://jsfiddle.net/5RzJ8/</a>

blocks|key|2692520|text|我认为，这是非常有帮助的回答如何在所有现代浏览器中检测页面缩放级别。然后答案回答IE的问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2692521|document.body.style.zoom+=+screen.logicalXDPI+/+screen.deviceXDPI;|code-block|syntax|javascript|2692522|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/5078596/947687|1|http://jsfiddle.net/dizel3d/1hzowb10/^0|E|J|0|10|2|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

I think, this is very helpful answer <a href="https://stackoverflow.com/a/5078596/947687">how to detect page zoom level in all modern browsers</a>. Then <a href="http://jsfiddle.net/dizel3d/1hzowb10/" rel="noreferrer">the answer</a> to your question for IE:

<pre><code>document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;
</code></pre>

blocks|key|520151|text|您可以使用以下内容重置代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|520152|$("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">'+);
});|code-block|syntax|javascript|520153|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can reset the code with this:

<pre class="lang-js prettyprint-override"><code>$("input, textarea").focusout(function(){
 $('meta[name=viewport]').remove();
 $('head').append('&lt;meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0"&gt;');

 $('meta[name=viewport]').remove();
 $('head').append('&lt;meta name="viewport" content="width=device-width, initial-scale=yes"&gt;' );
});
</code></pre>

blocks|key|2692581|text|我发现唯一有效的方法是用"vw“和"vh”(相对于viewport的%25)而不是"px“来设计我的HTML/CSS。您可以在任何地方使用它来放置"px“(字体大小、宽度、高度、填充、边距等)。非常有用的网页设计为只显示全屏(没有卷轴)或“Kiosk风格”。"vw“和"vh”不受浏览器缩放的影响。请参阅：units.asp|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2692582|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/cssref/css_units.asp^0|47|9|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

The only way I found that works natively is in designing my HTML/CSS with the units "vw" and "vh" (% relative to the viewport) instead of "px". You can use it everywhere you used to put "px" (font-size, width, height, padding, margin, etc...). Very useful for a page designed to be display full screen only (no scroll) or "Kiosk-style". "vw" and "vh" are not affected by browser zoom.
See: <a href="https://www.w3schools.com/cssref/css_units.asp" rel="nofollow noreferrer">https://www.w3schools.com/cssref/css_units.asp</a>

blocks|key|520202|text|它在铬66中工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|520203|document.body.style.zoom+=+(window.innerWidth+/+window.outerWidth)|code-block|syntax|javascript|520204|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

It is working in chrome 66 :

<pre><code>document.body.style.zoom = (window.innerWidth / window.outerWidth)
</code></pre>

blocks|key|925348|text|对于移动浏览器，林登的回答对我来说在Chrome上效果最好。然而，在移动FF上，它需要一些额外的调整，我来到了在两种浏览器中都能工作的版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|925349|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
}|code-block|syntax|javascript|925350|此外，还原的页面视图标记必须具有显式的最大比例尺，才能在重置后在Firefox上缩放，所以我最初将其设置为：|925351|<meta+name="viewport"+content="width=device-width,+maximum-scale=10">|925352|在移动Chrome+76.0和移动Firefox+68.1上进行了测试。|925353|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

For mobile browsers, @Linden's answer worked the best for me on Chrome. However on mobile FF it needed some additional tweaks, I came to version that works in both browsers:

<pre><code>let restore = $('meta[name=viewport]')[0];
if (restore) {
 restore = restore.outerHTML;
}
$('meta[name=viewport]').remove();
$('head').append('&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;');
if (restore) {
 setTimeout(() =&gt; {
 $('meta[name=viewport]').remove();
 $('head').append(restore);
 }, 100); // On Firefox it needs a delay &gt; 0 to work
}
</code></pre>

Also, the restored page viewport tag must have explicit maximum-scale to allow zooming on Firefox after resetting, so I set it initially to this:

<pre><code>&lt;meta name="viewport" content="width=device-width, maximum-scale=10"&gt;
</code></pre>

Tested on mobile Chrome 76.0 and mobile Firefox 68.1.

blocks|key|2692674|text|我会尝试这两种解决方案，但以下似乎是埃查特中的一个bug，导致了光标偏离。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2692675|document.body.style.zoom+=+1.25;+//+work+but+not+to+be+expected.|code-block|syntax|javascript|2692676|我想知道是否有任何解决方案可供浏览器直接修改缩放比率，就像ctrl%2B%2B/-的效果一样。|style|CODE|2692677|entityMap|0|LINK|mutability|MUTABLE|url|https://echarts.apache.org/zh/index.html|1|https://github.com/apache/incubator-echarts/issues/12645^0|I|3|0|W|4|1|0|0|T|4|Y|1|10|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]|$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|14|8|@$A|15|B|16|K|L]|$A|17|B|18|K|L]|$A|19|B|1A|K|L]]|9|@]|C|$]]|$1|M|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

I'd try both solutions but the following is seems to be a bug in <a href="https://echarts.apache.org/zh/index.html" rel="nofollow noreferrer">echarts</a> which leads to <a href="https://github.com/apache/incubator-echarts/issues/12645" rel="nofollow noreferrer">cursor deviated</a>.
<pre class="lang-js prettyprint-override"><code>document.body.style.zoom = 1.25; // work but not to be expected.
</code></pre>
I wonder if there any solution for the browser to directly modify the zoom ratio just like what <code>ctrl</code>+<code>+</code>/<code>-</code> effect.

I created a little game in Canvas, but I have a problem. Some users who have the default zoom set to something other than 100% can't see the entire game page.

I have tried using this CSS:

<pre class="lang-css prettyprint-override"><code>zoom: 100%;
</code></pre>

This HTML

<pre class="lang-html prettyprint-override"><code>&lt;meta name="viewport" content="initial-scale=1.0 , minimum-scale=1.0 , maximum-scale=1.0" /&gt;
</code></pre>

And this JS:

<pre class="lang-js prettyprint-override"><code>style="zoom: 75%"
</code></pre>

Any ideas how to programatically set the page zoom?

Force page zoom at 100% with JS

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我在画布上做了一个小游戏，但我有个问题。一些将默认缩放设置为100%以外的其他用户无法看到整个游戏页面。我尝试使用这个CSS：zoom: 100%;这个HTML<meta name="viewport" content="initial-scale=1.0 , minimum-scale=1.0 , maximum-s...

问使用JS强制页面缩放100%
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JS强制页面缩放100%EN