Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1241
  • Last Modified:

JavaScript to detect and adjust Screen Size

Hi,

I have the below function to adjust the screen size in Windows 7.  Is there a better way of doing this with %.  If yes, how do I do it?

Thank you!!!

function myWindow() {
             if (screen.width == 800) {
                 var wdth = 800;
                 document.body.style.zoom = screen.width / 940;
             }
             else if (screen.width == 1024) {
                 var wdth = 1024; 
                 document.body.style.zoom = screen.width / 1204;
             }
             else if (screen.width == 1152) {
                 var wdth = 1152;
                 document.body.style.zoom = screen.width / 1351;
             }
             else if (screen.width == 1280) {
                 var wdth = 1280;
                 document.body.style.zoom = screen.width / 1400;
             }

             else if (screen.width == 1440) {
                 var wdth = 1440;
                 document.body.style.zoom = screen.width / 1710;
             }
             if (screen.width == 1600) {
                 var wdth = 1600;
                 document.body.style.zoom = screen.width / 1600;
             }
         }

Open in new window

0
Rad1
Asked:
Rad1
  • 2
  • 2
1 Solution
 
RoonaanCommented:
If you are targeting newer browsers, than in this situation, maybe CSS3 Media Queries can help.

http://css-tricks.com/css-media-queries/

You could then set the CSS zoom style by using the right media selectors

<style type="text/css">
@media screen and (min-width: 800px) and (max-width: 1023px) {
   body { zoom: 0.851;}
}
@media screen and (min-width: 1024px) and (max-width: 1151px) {
   body { zoom: 1;}
}
</style>

Open in new window


As a sidenote, I am not sure why you really want to force users zoom ratio, but that could have a valid design choice.

Regards,

-r-
0
 
Rad1Author Commented:
Okay great!!!

On the other hand, how can I make all my ASP.NET page position:relative; ????

Thank you!
0
 
RoonaanCommented:
Don't use a media query, just use:

html, body {
   position: relative;
}

If you want to use it on all tags available, then use
* {
   position: relative;
}

However, in that situation you might want to go with a more generic CSS Resetter template, like Tripoli which is mentioned in this somewhat more elaborative article on smashing magazine:
http://coding.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/

Regards,

-r-
0
 
Rad1Author Commented:
Thank you for the great info!!!
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now