4

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

George Stocker
  • 57,289
  • 29
  • 176
  • 237
Big Crunchy
  • 41
  • 1
  • 1
  • 2
  • 1
    see this : http://stackoverflow.com/questions/2517830/possible-to-auto-zoom-out-if-users-resolution-x – Haim Evgi Jul 06 '10 at 11:20
  • 1
    Why are you doing this? :) The user is used to every other site being the same scale in their browser, they probably *wouldn't* want your content sized differently. – Nick Craver Jul 06 '10 at 11:20
  • If that site link has changed in the 3 years since you posted this, then this answer becomes useless. I hope the answer contains all the code needed to solve this issue. – George Stocker May 18 '13 at 12:10

4 Answers4

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

Amit
  • 1,841
  • 1
  • 19
  • 36
  • Please don't duplicate your answers. If the questions are duplicates, post your answer in one of them (and when you get enough reputation, flag or vote to close the other). If the questions are not duplicates, then please tailor your answer to the specific question asked. Also: Please don't post link only answers. Include the relevant part of the link here so that if the link dies, your answer does not become useless. – George Stocker May 18 '13 at 12:07
  • Link only answers are frowned upon as they become useless if the link dies and it forces people to click through multiple times. Could you summarise the article here? Be sure to quote and give credit. – Ben May 18 '13 at 12:07
  • /***hope this answer is ok***/ – Amit May 20 '13 at 19:07
  • This is yet another time that instructions and warnings are clearly stated in the comments, but a new user with hardly any rep gets his answer down-voted. Even after answer is edited. A new user with a single -1 on his answer can't vote to mark his own question answered - should he have one. We really don't have to be so harsh, I think... – Jason J. Nathan Jul 13 '13 at 15:05
1

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.

robjmills
  • 18,438
  • 15
  • 77
  • 121
1

Auto-detect a screen resolution

See this SO question

change browser zoom with javascript

This is not possible. See this SO question.

Community
  • 1
  • 1
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
0

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.

Avi Lugassy
  • 1