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

Question

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

---

我考虑的是这样做：

我有以下代码：

#warp 的 width: 3300% 和 mask 的 width: 100%；然后，每个 .item 都有 width: 3.030303% —— 带有溢出隐藏，否则无法按照我的意愿工作。

我的意思是：我至少为1280像素宽的屏幕做了这个。

我想要的是，如果有人能够编写代码，在<1280像素的屏幕上查看时切换CSS文件——然后，我可以做一些像这样的事情：

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

- Big Crunchy

---

请查看此链接：https://dev59.com/TUzSa4cB1Zd3GeqPpsxA - Haim Evgi

为什么你要这样做呢？:) 用户习惯了在浏览器中每个网站都是相同的比例，他们可能不希望你的内容大小不一样。 - Nick Craver

如果您发布此帖子后，该网站链接在3年内发生了更改，则此答案将变得无用。我希望答案包含解决此问题所需的所有代码。 - George Stocker

Answer 1

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>

演示

- Amit

---

请不要重复回答。如果问题是重复的，请在其中一个问题中发布您的答案（并且当您获得足够的声望时，标记或投票关闭另一个问题）。如果问题不是重复的，则请根据具体问题定制您的答案。此外：请不要仅发布链接答案。在此处包含链接的相关部分，以便如果链接失效，您的答案不会变得无用。 - George Stocker

只提供链接的答案是不被赞同的，因为如果链接失效，它们就变得无用了，并且会迫使人们多次点击。你能在这里总结一下文章吗？记得引用并给出来源。 - Ben

/希望这个答案可以/ - Amit

这已经不是第一次了，在注释中明确说明了指令和警告，但一个几乎没有声望的新用户却被投票打败了。即使回答被编辑过。一个回答只有-1分的新用户无法投票标记自己的问题已得到解答 - 如果他有一个的话。 我认为我们真的不必如此严厉... - Jason J. Nathan

Answer 2

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

- robjmills

Answer 3

自动检测屏幕分辨率。

请参见此SO问题。

使用JavaScript更改浏览器缩放比例是不可能的。请参见此SO问题。

- Pekka

Answer 4

关于使用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");
                        }
                        }
}

-- 使用php类检测bsr和bsr_ver，然后检查窗口大小(windowWidth,1,bsr,bsr_ver)。

-- #old_browser是一个div，包含有关旧网络浏览器的信息。 -- #background是一个固定的图像，占据屏幕的100x100%。

正如您所看到的，我们还移动了一些不在包含div范围内的项目。 Colmask是大多数页面内容的包含div（对于我们来说，它位于标题下面，这就是为什么我们手动移动一些项目的原因）

希望这段代码片段能帮助其他人实现这一点。

- Avi Lugassy