自动检测屏幕分辨率并使用 Javascript 更改浏览器缩放比例？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3185705/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto-detect a screen resolution and change browser zoom with Javascript?
提问by Big Crunchy
How do I auto-detect a screen resolution and change browser zoom with Javascript?
如何使用 Javascript 自动检测屏幕分辨率并更改浏览器缩放比例？
I was thinking of something more like this:
我在想更像这样的事情：
I've got the following code:
我有以下代码：
#warpwithwidth: 3300%and amaskwithwidth: 100%; and then, each.itemhaswidth: 3.030303%— with overflow hidden, otherwise it couldn't work as I want.
#warp用width: 3300%和一个mask用width: 100%; 然后，每个.item都有width: 3.030303%- 隐藏溢出，否则它无法按我想要的方式工作。
My point is: I've done this for at least 1280px wide screens.
我的观点是：我已经为至少 1280 像素的宽屏幕完成了这项工作。
What I want is if someone can write code that I could use toswitch the CSS file once viewed on a <1280px screen — them, I could do something like:
我想要的是，如果有人可以编写代码，一旦在 <1280px 屏幕上查看，我就可以用它来切换 CSS 文件——他们，我可以这样做：
.item img { width: 80%; }and then, the result would be the same as "browser zoom out".
.item img { width: 80%; }然后，结果将与“浏览器缩小”相同。
回答by robjmills
If you mean change the native browser zoom triggered by CTRL +/- then this isn't possible. You can adjust CSS properties/apply stylesheets but you cannot affect native browser controls. There are in fact CSS only options here depending on your target audience (and their browser choice) through the use of media queries, a couple of examples hereand here. If these are not suitable then you can do various things with JavaScript to detect screen width/height and adjust accordingly.
如果您的意思是更改由 CTRL +/- 触发的本机浏览器缩放，那么这是不可能的。您可以调整 CSS 属性/应用样式表，但不能影响本机浏览器控件。事实上，这里只有 CSS 选项，具体取决于您的目标受众（以及他们的浏览器选择），通过使用媒体查询，这里和这里有几个例子。如果这些不合适，那么您可以使用 JavaScript 做各种事情来检测屏幕宽度/高度并相应地进行调整。
回答by Pekka
Auto-detect a screen resolution
自动检测屏幕分辨率
See this SO question
看到这个问题
change browser zoom with javascript
使用 javascript 更改浏览器缩放
This is not possible. See this SO question.
这不可能。看到这个问题。
回答by Avi Lugassy
RE: Auto-detect a screen resolution and change browser zoom with Javascript?
RE：自动检测屏幕分辨率并使用 Javascript 更改浏览器缩放比例？
The question is perfectly possible and is in effect at our website here:
这个问题是完全可能的，并且在我们的网站上有效：
www.noteswithwings.com
www.noteswithwings.com
JS detects the screen width and zooms out or in a little to fit the content on to the screen.
JS 检测屏幕宽度并缩小或缩小一点以使内容适合屏幕。
Further, if the user resizes the window the zoom is triggered. This actually helps fit content on to tablet sized screens and screens as small as the iphone without adding extra stylesheets or having to detect an OS/ Browser..
此外，如果用户调整窗口大小，则会触发缩放。这实际上有助于将内容适应平板电脑大小的屏幕和与 iphone 一样小的屏幕，而无需添加额外的样式表或必须检测操作系统/浏览器。
var oldZoom = $(window).width();
var windowWidth = $(window).width();
check_window_size(windowWidth,1,bsr,bsr_ver);
$(window).resize(function() {
var windowWidthnow = $(window).width();
check_window_size(windowWidthnow,2,bsr,bsr_ver);
});
function check_window_size(size,init_var,bsr,bsr_ver)
{
/* Develop for resizing page to avoid grey border!
Page layout 1265px wide.
On page resize shift layout to keep central, zoom BG-img to fill screen
Zoom content down for smaller screens by 5% to keep content flow!
*/
//change this var for screen width to work with, in this case our site is built at 1265
var wdth = 1265;
//Change this variable for minimum screen;
var smallest_width=1120;
var varZoom= $(window).width()/wdth;
var s_size = $(window).width();
var scale_smaller;
var center = (s_size-wdth)/2;
var its_ie=false;
if(size<=smallest_width)
{
$("#old_browser").css("width","50%").css({"height":"40px","left": center+"px"});
if(!check_for_object(false,"moved_pages"))
{
if(center<-110)//margin width!
{
if(!its_ie)
$("#scroller").css("zoom",0.95);
$("#footer").css("zoom",0.9).css("left",120+"px");
$(".colmask").css("left",-110+"px");
if(check_for_object(false,"move_menu_loggedin"))
$("#move_menu_loggedin").css("right","110px");
if(check_for_object(false,"login_div"))
$("#login_div").css("left","-80px");
return;
}
$("#move_menu_loggedin").css("left","-"+center+"px");
$("#scroll").css("zoom","normal");
$(".colmask").css("left",center+"px");
}
else
{
/*Only pages that you do not want to move the colmask for!*/
$("#scroller").css("zoom",0.90);//.css("left","-50px");;
$("#footer").css("zoom","normal");
}
}
else
{
if(size>wdth)
$("#background").css("zoom",varZoom);
$("#scroller").css("zoom","normal");
$("#footer").css({"zoom":"normal","left":0});
if(!check_for_object(false,"moved_pages"))
{
$(".colmask").css("left",center+"px");
$(".colmask").css("zoom","normal");
var movelog = -center;
if(check_for_object(false,"move_menu_loggedin"))
$("#move_menu_loggedin").css("right",movelog +"px");
if(check_for_object(false,"login_div"))
$("#login_div").css("left","80px");
}
else
{
$(".colmask").css("zoom","normal");
}
}
}
-- check_window_size(windowWidth,1,bsr,bsr_ver); bsr & bsr_ver are detected using a php class.
-- check_window_size(windowWidth,1,bsr,bsr_ver); 使用 php 类检测 bsr 和 bsr_ver。
-- #old_browser is a div containing information if you have an old web browser. -- #background is a fixed image 100x100% of the screen.
-- #old_browser 是一个包含信息的 div，如果你有一个旧的网络浏览器。-- #background 是屏幕的 100x100% 固定图像。
As you can see we also move a few items which were not in the containing div scope. Colmask is the containing div for most of the pages content (For us that sits underneath the header which is why we move some items manually)
如您所见，我们还移动了一些不在包含 div 范围内的项目。Colmask 是大多数页面内容的包含 div（对于我们来说，它位于标题下方，这就是我们手动移动某些项目的原因）
Hope the code snippet can help someone else achieve this.
希望代码片段可以帮助其他人实现这一目标。
回答by Amit
This will help to detect browser zoom tested on all browser
<script>
window.utility = function(utility){
utility.screen = {
rtime : new Date(1, 1, 2000, 12,00,00),
timeout : false,
delta : 200
};
utility.getBrowser = function(){
var $b = $.browser;
$.extend(utility.screen,$.browser);
utility.screen.isZoomed = false;
var screen = utility.screen;
screen.zoomf = screen.zoom = 1;
screen.width = window.screen.width;
screen.height = window.screen.height;
if($b.mozilla){ //FOR MOZILLA
screen.isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;
} else {
if($b.chrome){ //FOR CHROME
screen.zoom = (window.outerWidth - 8) / window.innerWidth;
screen.isZoomed = (screen.zoom < .98 || screen.zoom > 1.02)
} else if($b.msie){//FOR IE7,IE8,IE9
var _screen = document.frames.screen;
screen.zoom = ((((_screen.deviceXDPI / _screen.systemXDPI) * 100 + 0.9).toFixed())/100);
screen.isZoomed = (screen.zoom < .98 || screen.zoom > 1.02);
if(screen.isZoomed) screen.zoomf = screen.zoom;
screen.width = window.screen.width*screen.zoomf;
screen.height = window.screen.height*screen.zoomf;
}
}
return utility.screen;
};
window.onresize = function(e){
utility.screen.rtime = new Date();
if (utility.screen.timeout === false) {
utility.screen.timeout = true;
setTimeout(window.resizeend, utility.screen.delta);
}
};
window.resizeend = function() {
if (new Date() - utility.screen.rtime < utility.screen.delta) {
setTimeout(window.resizeend, utility.screen.delta);
} else {
utility.screen.timeout = false;
utility.screen = utility.getBrowser();
if(window.onresizeend) window.onresizeend (utility.screen);
if(utility.onResize) utility.onResize(utility.screen);
}
};
window.onresizeend = function(screen){
if(screen.isZoomed)
$('body').text('zoom is not 100%');
else{
$('body').text('zoom is 100% & browser resolution is'+[screen.width+'X'+screen.height]);
}
};
$(document).ready(function(){
window.onresize();
});
return utility;
}({});
</script>
