自動檢測屏幕分辨率並使用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