Search code examples
cssioszoomingmobile-safaricss-transforms

How to fill the screen when using transform: scale on <body>, instead of centering it on the screen with whitespace around it?

I would like to use the following code to zoom the page to 65%, but it does not work on Safari for iOS:

body {
    zoom: 0.65;
}

So instead I am using this code:

body {
    -webkit-transform: scale(0.65, 0.65);
    transform: scale(0.65, 0.65);
}

However it makes the page appear in the middle of the screen, with a bunch of whitespace around each side:

How can I make the page fill the whole screen?

Solution

  • Change the CSS to:

    body {
    -webkit-transform: scale(0.65, 0.65);
    transform: scale(0.65, 0.65);
    transform-origin: top left;
    height: calc(100% / 0.65) !important;
    width: calc(100% / 0.65) !important;
}

    The page will now fill the screen, at 65% zoom level.

    Details of the calc can be found in this Stack Overflow question.