How To Adapt Website To User's Screen Resolution?

I'm designing my website by using a base of 1024x768 screen resolution. When you're looking at the website in the browser from a computer with a smaller/bigger screen resolution th

Solution 1:

The best way to tackle this issue is instead of using px use em or % ( percentage ).

.container {
  width: 1000 px;
  height: 750 px;
}

---

.container {
  width: 90%;
  height: 90%'
}

Solution 2:

What you're looking for is the browser "viewport".

This link offers a good overview of how to obtain the viewport: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

In most standard browsers, you can just reference window.innerWidth and window.innerHeight in JavaScript.

If you are using the dojo JavaScript framework, then you can just call dijit.getViewport() which will do the heavy lifting for you.

Once you have the dimensions of the viewport, it's up to you to decide how your webpage will react to the information it receives from the browser.