Learn how to a build a cloud-first strategyRegister Now

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

code to make web page adapt to users resolution

Is there any kind of code that I could use to make sure my web pages adapt to the users resoulution?
0
andreafp
Asked:
andreafp
  • 3
1 Solution
 
danataylorCommented:
screen.width and screen.height objects give you the screen resolution

screen.availWidth and screen.availHeight  take any tool bars and tell you what is available

you could then resize the document accordingly

<script type="text/javascript">
window.resizeTo(screen.availWidth * 0.8,screen.availHeight  * 0.8)
</script>

0
 
stefanaichholzerCommented:
andreafp,

I had a similir issue with a flash page, I wrote this code right here, it should give you a basic idea.

=

<script>

            var ann;
            var aln;
            var high = screen.width;
               var wide = screen.height;

            if(high == 800 && wide == 600) { ann = 780; aln = 410; }
            else if(high == 1024 && wide == 768) { ann = 1004; aln = 580; }
            else if(high == 1152 && wide == 864) { ann = 1132; aln = 680; }
            else if(high == 1280 && wide == 800) { ann = 1004; aln = 610; }
            else if(high > 1152 && wide > 864) { ann = 1132; aln = 710; }
            else { alert("Hemos detectado una configuración diferente en su monitor. Podría ser que la película se vea distorsionada.\n\nEsta página se ve mejor con una resolución de 1024 x 768.\n\nGracias."); }

            document.write("<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0\" width=\""+ann+"\" height=\""+aln+"\" id=\"v2\" align=\"middle\">");
            document.write("<param name=\"allowScriptAccess\" value=\"sameDomain\">");
            document.write("<param name=\"movie\" value=\"v2_b.swf\">");
            document.write("<param name=\"quality\" value=\"high\">");
            document.write("<param name=\"bgcolor\" value=\"#000000\">");
            document.write("<param name=\"menu\" value=\"false\">");
            document.write("<embed src=\"v2_b.swf\" quality=\"high\" bgcolor=\"#cccccc\" width=\""+ann+"\" height=\""+aln+"\" name=\"v2\" align=\"middle\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\">");

</scipt>

Let me know how it goes...

;)
0
 
stefanaichholzerCommented:
andreafp,

In other words:

<script>
            var ann;
            var aln;
            var high = screen.width;
               var wide = screen.height;

            if(high == 800 && wide == 600) { ann = 780; aln = 410; }
            else if(high == 1024 && wide == 768) { ann = 1004; aln = 580; }
            else if(high == 1152 && wide == 864) { ann = 1132; aln = 680; }
            else if(high == 1280 && wide == 800) { ann = 1004; aln = 610; }
            else if(high > 1152 && wide > 864) { ann = 1132; aln = 710; }
            else { alert("Hemos detectado una configuración diferente en su monitor. Podría ser que la película se vea distorsionada.\n\nEsta página se ve mejor con una resolución de 1024 x 768.\n\nGracias."); }

            document.write("<table width=\""+ann+"\" height=\""+aln+"\">");
 
</script>
0
 
stefanaichholzerCommented:
Thanx, I'm glad I could help...

;)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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