自动检测屏幕分辨率并使用Javascript更改浏览器缩放？

Question

如何使用Javascript自动检测屏幕分辨率并更改浏览器缩放？

---

我想的更多的东西是这样的：

我有下面的代码：

#warp与width: 3300%与width: 100%一个mask;然后，每个.item有width: 3.030303% - 溢出隐藏，否则它不能正常工作。

我的观点是：我已经完成了至少1280px宽屏幕。

我要的是，如果有人可以编写代码，我可以用toswitch一次< 1280px屏幕上观看的CSS文件 - 他们，我可以这样做：

.item img { width: 80%; }然后，结果会与“浏览器缩小”相同。

Answer 1

如果您的意思是更改由CTRL +/-触发的原生浏览器缩放，则这是不可能的。您可以调整CSS属性/应用样式表，但不能影响本机浏览器控件。实际上，这里只有CSS选项，取决于您的目标受众（以及他们的浏览器选项），通过使用媒体查询，以及几个示例here和here。如果这些不合适，那么你可以用JavaScript来做各种事情来检测屏幕宽度/高度并相应地进行调整。

Answer 2

自动检测屏幕分辨率

见this SO question

改变浏览器缩放与JavaScript

这是不可能的。请参阅this SO question.

Answer 3

RE：自动检测屏幕分辨率并使用Javascript更改浏览器缩放？

的问题是完全可能的，实际上是在我们的网站在这里：

www.noteswithwings.com

JS检测屏幕的宽度缩小或稍微适应到内容屏幕。

此外，如果用户调整窗口大小，则会触发缩放。 这实际上到平板电脑大小的屏幕和屏幕小如iphone有助于配合内容，而不增加额外的样式或者具有检测OS /浏览器..

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 ）;使用php类检测bsr & bsr_ver。

- #old_browser是一个包含信息，如果你有一个旧的网页浏览器。 - #background是固定图像100x100％的屏幕。

正如您所见，我们还移动了一些不在包含div范围内的项目。 Colmask是包含大部分页面内容的div（对于我们位于标题下面的这就是为什么我们手动移动一些项目）

希望代码片段可以帮助其他人实现此目的。

Answer 4

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> 

Demo