Member Avatar for Moderns

Hi,

I need to fit the website width to the screen width and when I zoom out the browser, I don't want the website width to stretch on left and right. I am using the Javascript now to assign the website width the value of window.screen.width, but I faced problem with IE7 and IE8 that when I zoom out or zoom in the window, then the value of window.screen.width will change.

I am looking to make something like this website: http://ca.com please try to zoom out and see the website will not stretch on left and right.

Would appreciate your kind hints.

Note: I don't want to use the Jquery or any library, just pure Javascript or CSS.

Thanks.

Cheers!

  • 2 Contributors
  • 1 Reply
  • 325 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by webmeat

Dani AI

Generated

Good point about avoiding window.screen.width — that value is tied to the device/screen and can be unreliable when browser zoom or DPI scaling changes (older IE is especially inconsistent). A CSS-first solution is simpler and more robust: make the layout fluid but cap its maximum width so the page never “stretches” across very wide viewports. That removes the need to probe screen dimensions with JavaScript.

A minimal, widely supported pattern:

.site {
  width: 100%;
  max-width: 1200px;     /* design cap */
  margin: 0 auto;        /* center on large screens */
  padding: 0 20px;
  box-sizing: border-box;
}

Also include the mobile viewport meta in the head:

<meta name="viewport" content="width=device-width, initial-scale=1">

’s media-query idea is useful for refining breakpoints and typography, but the max-width approach already prevents the layout from expanding indefinitely and works in IE7/8 without media queries. If a JS fallback is required (no libraries), prefer measuring the viewport width instead of screen.width:

function viewportWidth() {
  return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}

var w = viewportWidth();
var el = document.getElementById('site');
el.style.width = (w > 1200 ? '1200px' : '100%');

Keep this logic throttled on resize. Final notes: avoid relying on screen.width for layout decisions, use max-width + width:100% for predictable centering, apply box-sizing to include padding in totals, and test zoom/DPI behavior across browsers. For , replacing the screen.width approach with the CSS pattern above will achieve the “no-stretch” effect when zooming without adding libraries.

Member Avatar for webmeat

I'm not 100% sure I understand your question, but I believe you're saying you want a static width on various view sizes. You could just set the width inside a media query. For example:

@media only screen and (min-width: 320px) {
    .container {
        width: 300px;
    }
}

@media only screen and (min-width: 480px) {
    .container {
        width: 460px;
    }
}

Since I don't have your code, this is a generic example.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.