JavaScript - How to adjust page size to any resolution

Asked By Bikash Samal on 16-Jul-11 07:13 AM
I designed a webpage using html and css with javascrpit.
Now I'm facing problem when run the page in differnet system due to resolution.

Is there any code to fix the page size according to any screen resolution???


Anybody please help me out.....


Thanks in Advance....

Web Star replied to Bikash Samal on 16-Jul-11 07:32 AM
you need to set the width and hieght by getting screen size of client machine.
To determine the screen size on the client machine, use the properties screen.width and screen.height supported by version 4 of both major browsers..
And put all widh and height of control and panel on the page set with percent value instead of fixed
Devil Scorpio replied to Bikash Samal on 16-Jul-11 08:01 AM
Hi Bikash,

Put the following javascript code between the <head> </head> tags of your site:

<script type="text/javascript">

function getcss(cssfile){

loadcss = document.createElement('link')

loadcss.setAttribute("rel", "stylesheet")

loadcss.setAttribute("type", "text/css")

loadcss.setAttribute("href", cssfile)

document.getElementsByTagName("head")[0].appendChild(loadcss)

}

if(screen.width <= '800')
// Defines the resolution range you're targeting (less than 800 pixels wide in this case)

{

getcss('800x600.css')
// Defines the .css file you want to load for this range (800x600.css)

}

else if(screen.width > '800' && screen.width < '1280')
// This time we're targeting all resolutions between 800 and 1280 pixels wide

{

getcss('1024x768.css')
//And we want to load the .css file named "1024x768.css"

}

else if(screen.width > '1024' && screen.width < '1600')
//Targeting screen resolutions between 1024 and 1600px wide

{

getcss('1280x1024.css')
//Load 1280x1024.css

}

else

{

getcss('1280x1024.css')
//This else statement has "if" condition. If none of the following criteria are met, load 1280x1024.css

}

</script>


use this to adjust table, image, font size to make full use of screen real estate at any resolution. Sometimes at 800x600 and smaller I'll lose an advertising banner in liu of maintaining the form and function of ur site.
dipa ahuja replied to Bikash Samal on 16-Jul-11 08:21 AM
Untitled document
Way 1 :
 
Visit this site, it provide the framework to manage the resolution css which matches to all systems.
 
<http://960.gs/>
 
Way 2:
 
Prompt the user About perfect Browser and screen resolution for your website in the page load:
 
 protected void Page_Load(object sender, EventArgs e)
 {
   if (Session["Resolution_Warn"] == null)
   {
   ClientScript.RegisterClientScriptBlock(this.GetType(), "", "<script> if(screen.width!=1024 && screen.height!=768){alert('Site can be  Best viewed on 1024x768 resolution');}</script>");
   Session["Resolution_Warn"] = 1;
   }
}
And at the bottom of the webpage you can write the message : Best Viewed in Mozilla FireFox
hope you get it..!
 
Jitendra Faye replied to Bikash Samal on 16-Jul-11 11:12 AM

One of the common mistakes is often use absolute sizes in pixels and em. Use more often percents: width: 90% and etc .

there may be multiple reasons for that

  • browser
  • browser version
  • components used or framework
  • css style compatibility

the optimum thing you can do is wrap your entire page or master template in a div and give size to that div. so that your site size may not differ in different resolutions.

Riley K replied to Bikash Samal on 16-Jul-11 11:45 PM

I would advise NOT trying to make it look the same across all browsers - instead, try to design so that users are given the best experience that their browser allows :)

here are some things to consider:

  • http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/ with http://www.modernizr.com/
  • http://matthewjamestaylor.com/blog/perfect-3-column.htm
  • http://www.alistapart.com/articles/css3multicolumn/

if you can afford it, I strongly recommend reading http://www.hardboiledwebdesign.com/ by Andy Clarke - it deals with how to target browser capabilities so that your viewers get the most out of your site regardless of their viewing platform. Ultimately the main point is that it's OK (good even) if your site looks different in different browsers

Radhika roy replied to Bikash Samal on 17-Jul-11 02:26 AM

When design form, you have to use width in Percentage instead using Fixed Width.


Don't Use  something like...

  <table style="width: 1000px">
        <tr>
            <td style="width: 1000px">
            </td>
             <td style="width: 1000px">
            </td>
        </tr>
    </table>

and you need to use something like...

 <table style="width: 100%">
        <tr>
            <td style="width: 50%">
            </td>
             <td style="width: 50%">
            </td>
        </tr>
    </table>

Hope this will help you.