Screen size and browser size?

[skald89]

If you have a screen resolution of 1366 x 768 whats your browser window size?

its obviously not 1366 x 768

is there a way to see this for other screen sizes?

[scottloway]

Unfortunately, there is no single answer, as it will vary heavily by any number of reasons; for example, even with a given monitor size, the user may not have their browser window maximized; additionally, you have to account for browser chrome, bookmark toolbars, scrollbars, utilities running in the browser, etc.

What you're after is the viewport; you can utilize javascript to dynamically determine this for you (try something like jQuery, though there are others). Google put this together (http://browsersize.googlelabs.com/) which is really interesting, and allows you to render any website under their overlay.

Good luck.

[beaut]

Re: Screen size and browser size?
Unfortunately, there is no single answer, as it will vary heavily by any number of reasons; for example, even with a given monitor size, the user may not have their browser window maximized; additionally, you have to account for browser chrome, bookmark toolbars, scrollbars, utilities running in the browser, etc.

What you're after is the viewport; you can utilize javascript to dynamically determine this for you (try something like jQuery, though there are others). Google put this together (http://browsersize.googlelabs.com/) which is really interesting, and allows you to render any website under their overlay.

Good luck.

yes,it can not chang~~

[Joebhoy Designs]

to give you an idea, the majority of websites are built to a set size of 1024 x 768 but as the other poster stated this will vary depending on what browser is used, if browser is maximised etc.

For instance in internet explorer you will lose about 10 - 20 pixels for the address bar, menu, tab and bookmarks section of the browser and a further 10 or so pixels for your taskbar being on show and 3 - 5 pixels for the scroll bar. so you could say the browser window size is approx 1360 x 738... Before someone starts to disagree this is only an approximation not exact.

Regards
Joe

[pixelpaintr]

If you want the MAX screen area for a browser, you can take a screenshot of the browser and then select the area within the browser chrome using an image editing program like photoshop, etc. You'll find that each browser is slightly different. Also, you should be aware that not every web user will maximize their browser when surfing the web. So that number is not completely reliable for designing a web page.

The best you can do is look at the most common screen resolution sizes of your users, or if you can't track that, then at least of web users at this time:

This link contains data that is up to date - http://www.w3schools.com/browsers/browsers_display.asp

So if you are concerned about the 13% of users who are still at 1280x768 resolution, design within that (removing the height and width of browser chrome) and maybe a little less in case they surf with a smaller browser window.

[designgene]

what if we want a graphic perfectly readable and does not get blur or faint in any screen resolution. What kind of and what graphic designing tool should we use to see our logo design and other graphic accurately in all screens sizes.

[pixelpaintr]

If your graphic is clear to begin with, it will be clear at any resolution it is viewed. It will look larger on a lower resolution, and smaller on a higher resolution, because your logo will be a set number of pixels.

Say the logo is 250 pixels wide. A monitor set to 1024x768 would display that logo about 1/4 the width (250/1024 = .24). But if the same monitor is set to 1180 width, the monitor displays more pixels, and your logo stays the same, so looks smaller (250/1180 = .21) more like 1/5 the width of the monitor.

You need to create a design/layout that will fit the smallest target resolution you decide on, and then keep you graphics large enough to be read on the highest resolution you estimate your customers using. The best way to do this is design it in Photoshop or Fireworks no wider than can fit in your lowest resolution minus the chrome thickness (both are graphics programs for web design), then just change your monitor resolution up and down to those settings - you'll see the web page look larger and smaller.

I sometimes take a screen shot of a web browser and then use that to design over, to see how the page will look inside the browser chrome. Start with the smallest size you want/expect to visit your website - you can then draw your graphics to fit that, so people wont have to scroll horizontally to see the whole page ('cause that sucks!).