Arnaud Arnaud - 7 months ago 15
HTML Question

Auto-fit fixed-width layout to screen width

I have a website with a fixed-width layout, and that cannot be changed easily. Its width is around 1300px, so it doesn't render well on a smaller screen.

I am looking for a solution to make the website looks good even on small screens. It should be possile, because if the user changes the browser zoom level to something like 75%, everything looks quite good. But I read that changing browser zoom level is not possible in JavaScript, and that the behaviour of this feature is not consistent across browsers.

Is there a standard solution (a library or something) to solve this problem?

Answer

You already put the tag "responsive" in your tags. This means you know that you want a responsive website.

You could create mediaqueries on specific width's and set the zoom property to a suitable value (but Firefox does not support this: http://caniuse.com/#search=zoom ; you can use transform: scale() as fallback).

EXAMPLE:

@media (max-width: 600px) {
  body {
    zoom: 0.75;
    moz-transform: scale(0.75, 0.75);
  }
}

The best solution would be to create mediaqueries on specific width's and take the effort of changing the width's of the elements. I don't see why the width can't be changed easily.

EXAMPLE:

@media (max-width: 600px) {
  .myElement {
    width: 600px; /* whatever, maybe 100%? */
  }
}