resize the webpages according to user screen resulation.

Question

0.00/5 (No votes)

See more:

hi,

my problem is that i made a website which is best view in the screen resolution 1368*768. this website look's very good in this resolution but when someone view it in another PC having different resolution, then all web pages alter and horizontal scroll coming for all pages. this is due to that i have used div rather then table and all div's overlaping with each other.

i want to add css file's according to the screen resolution. so that this problem is resolved. and the look and feel of website become alike whether it is viewed in 1024*768 or 1368*766 or any other resolution. That is user screen resolution independent.

I think it could be done with Javascript or JQuery. but i don't know how to this.

Please help me!

Thanks

Balwant

Posted 3-Apr-11 17:48pm

Balwant.mnd

Add a Solution

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Eduard Keilholz · Answer 1 · 2011-04-03T20:36:00

Solution 1

You can take care of this using CSS. Css contains functionality to 'size' objects in serveral ways, one of them is percentage :

CSS

#container { background: #0000FF; }

.fullWidth { width: 100%; }

and in your HTML file, you include the CSS file and write for example the following object :

HTML

<div id="container" class="fillWith">
  Wow, this container uses 100% of my browser's available width!
</div>

See this[^] example for more information!

Have fun,

Eduard

Posted 3-Apr-11 20:36pm

Eduard Keilholz

Comments

Balwant.mnd 4-Apr-11 4:26am

I think you don't understand my requirement. i was saying that website should looks same whether their may be the different screen resolutions used.

Eduard Keilholz 4-Apr-11 5:08am

Do you mean that your entire website (including the images and stuff) should scale accoding to the clients screen resolution? Like if you would zoom in and out on an image in graphics software?

Balwant.mnd 4-Apr-11 7:18am

hiYes i will look for this type of scenario so that a website becomes intelligent and looks alike everywhere.
thanks for your suggestion.
if you know how to find the client's browser width and height. then please share with me.
Thanks
Balwant

Eduard Keilholz 4-Apr-11 7:55am

http://javascript.internet.com/snippets/client-window-size.html
This is a (javascript) example to retrieve the client's window size. But as I understand your question correctly, you'll not be able to do that using default features.

Kornfeld Eliyahu Peter · Answer 2 · 2014-04-27T04:12:00

Solution 5

There is NO WAY to ensure that your web page will look the same in every resolution!!!
There is a way to ensure it looks optimal, it called responsive web design[^]...

Posted 27-Apr-14 4:12am

Kornfeld Eliyahu Peter

Comments

[no name] 27-Apr-14 10:25am

Yeah.... he probably figured it out.... 3 years ago Peter.... :-)

Kornfeld Eliyahu Peter 27-Apr-14 11:53am

Ops...I didn't saw the year even...The question was on the first page on the list... :-)

[no name] 27-Apr-14 11:59am

Yeah it was resurrected by a site driving attempt in solution #4

Ankur^\m/ · Answer 3 · 2011-04-03T21:18:00

Solution 2

What you want here is a fluid layout for your web page. If you search Google for "fluid layout CSS" you will get many links that helps you implement it using CSS in your web site.

You may also like to read this - Fixed vs. Fluid vs. Elastic Layout: What's The Right One For You?[^]. It's a good read and would help you design your layout better.

Hope this helps! :thumbsup:

Cheers!
Ankur

Posted 3-Apr-11 21:18pm

Ankur^\m/

v2

Comments

Balwant.mnd 4-Apr-11 5:01am

hi,
This is not good approach, i have tested this type of layout and all those websites which used it have so many discrepancy. the code project website also have the same problem. you can check it by performing the task.
click the maximize button of your browser on the right corner and set the browser to a small window, then horizontally scroll and see this website looks so ugly.The whole design become a bit of non professional work.
Please have a look at this.
To remove this type of unmanaged designing we have to some coding using javascript or jquery.
Prior to loading the page in the client browser check for the screen resolution and then use the css file according to that resolution.
I know this but i don't know how to find the client's browser width and height.

so if you have any idea the please share it with me.
so that i can make it for all those who want's that their website looks alike irrespective of the machine and environment.
Thanks
Balwant

Ankur^\m/ 4-Apr-11 5:27am

Well every design has it's own pros and cons. The link I gave discussed this very well.
Article section of CP has both fixed and fluid layout options.

I know this but i don't know how to find the client's browser width and height.
Check this out - http://www.google.co.in/#sclient=psy&num=10&hl=en&q=browser+height+and+width+javascript&aq=o&aqi=&aql=&oq=&pbx=1&fp=722c0d992512ca64

You also need to handle re-sizes done on the browser after the page loads and again apply CSS accordingly.

Good luck!

Balwant.mnd 4-Apr-11 7:15am

Thanks i will desperately looking and also finding some ways to get the client's browser width and height.

Thanks for your response.