Auto-detect a screen resolution and change browser zoom with Javascript?

Question

How do I auto-detect a screen resolution and change browser zoom with Javascript?

---

I was thinking of something more like this:

I've got the following code:

#warp with width: 3300% and a mask with width: 100%; and then, each .item has width: 3.030303% — with overflow hidden, otherwise it couldn't work as I want.

My point is: I've done this for at least 1280px wide screens.

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:

.item img { width: 80%; } and then, the result would be the same as "browser zoom out".

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>

Demo

Answer 2

RE: Auto-detect a screen resolution and change browser zoom with Javascript?

The question is perfectly possible and is in effect at our website here:

www.noteswithwings.com

JS detects the screen width and zooms out or in a little to fit the content on to the screen.

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..

 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.

-- #old_browser is a div containing information if you have an old web browser. -- #background is a fixed image 100x100% of the screen.

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)

Hope the code snippet can help someone else achieve this.

Answer 3

Auto-detect a screen resolution

See this SO question

change browser zoom with javascript

This is not possible. See this SO question.

Answer 4

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 here and here. If these are not suitable then you can do various things with JavaScript to detect screen width/height and adjust accordingly.