如何使用Javascript自动检测屏幕分辨率并更改浏览器缩放？
我在考虑更像这样的事情：
我有以下代码：
#warpwidth: 3300%和maskwidth: 100%;然后，每个.item都有width: 3.030303%- 隐藏了溢出，否则它无法正常工作。
我的观点是：我已经为至少1280px宽屏幕做了这个。
我想要的是，如果有人能够在＆lt; 1280px屏幕上查看我可以使用的代码，那么我可以使用这样的代码 - 我可以做类似的事情：
.item img { width: 80%; }然后，结果与“浏览器缩小”相同。
答案 0 :(得分：1)
如果您的意思是更改由CTRL +/-触发的本机浏览器缩放，那么这是不可能的。您可以调整CSS属性/应用样式表，但不能影响本机浏览器控件。实际上，这里只有CSS选项，具体取决于您的目标受众（以及他们的浏览器选择），使用媒体查询，例如here和here。如果这些不合适，那么您可以使用JavaScript执行各种操作来检测屏幕宽度/高度并进行相应调整。
答案 1 :(得分：1)
答案 2 :(得分：0)
RE：自动检测屏幕分辨率并使用Javascript更改浏览器缩放？
这个问题是完全可能的，并且在我们的网站上有效：
www.noteswithwings.com
JS会检测屏幕宽度并缩小或缩小以适应屏幕上的内容。
此外，如果用户调整窗口大小，则触发缩放。 这实际上有助于将内容放在平板电脑大小的屏幕和屏幕上，与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＆amp;使用php类检测bsr_ver。
- #old_browser是包含信息的div，如果您有旧的Web浏览器。 - #background是屏幕的100x100％的固定图像。
正如您所看到的，我们还移动了一些不在包含div范围内的项目。 Colmask是大多数页面内容的包含div（对于位于标题下方的我们，这就是我们手动移动某些项目的原因）
希望代码段可以帮助其他人实现这一目标。
答案 3 :(得分：0)
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>