CODEWITHSUNDEEP
javascriptjquerycsstransform
toddeTV
toddeTV

Reputation: 1517

css transform scale issue in firefox

I am trying to make a website scale based on the document size.

So when the document is 0px<1024px there should be a responsive design. This is strait forward with css media query. On the scale 1024px<1950px the "normal" design should be shown. Also this is pretty easy and this two dimentions working very fine.

Now I want that, when the document is >1950px, the scale is going up. So that when for example the screen is 2000px the website has a transform scale(2).

For this I came up with this little solution: 

$(document).ready(larg);
$(window).resize(larg);
function larg(){
    var startResizing = 1950;
    var documentWidth = $(window).width();
    console.log("documentWidth: "+documentWidth);
    if(documentWidth > startResizing){
        var scale = (documentWidth - startResizing) / 2000;
        var roundTwoDecimals = Math.round(scale * 100) / 100;
        scale = 1 + roundTwoDecimals;
        console.log(documentWidth +"-"+ startResizing+"="+(documentWidth - startResizing));
        console.log(scale);

        $("html").css("zoom", scale); // IE
        $("html").css("-moz-transform", "scale("+scale+")"); // Firefox
        $("html").css("-moz-transform-origin", "0 0");
        $("html").css("-o-transform", "scale("+scale+")"); // Opera
        $("html").css("-o-transform-origin", "0 0");
        $("html").css("-webkit-transform", "scale("+scale+")"); // Safari and Chrome
        $("html").css("-webkit-transform-origin", "0 0");
        $("html").css("transform", "scale("+scale+")"); // Standard Property
        $("html").css("transform-origin", "0 0");
    }else{ // Reset
        $("html").css("zoom", ""); // IE
        $("html").css("-moz-transform", ""); // Firefox
        $("html").css("-moz-transform-origin", "");
        $("html").css("-o-transform", ""); // Opera
        $("html").css("-o-transform-origin", "");
        $("html").css("-webkit-transform", ""); // Safari and Chrome
        $("html").css("-webkit-transform-origin", "");
        $("html").css("transform", ""); // Standard Property
        $("html").css("transform-origin", "");
    }
}

In Chrome this is working fine. But in Firefox there is one big problem:
The scaling is done also on the X axis and a horizontal scroll is generated. And my html/body tag that normally has 100% width does not fit in the window anymore. So the user has to scroll horizontal and that should be not the case (in chrome everything is fine).
What am I doing wrong?

EDIT
I now found out, that the complete point of view is scaled and that I have to set the width of the html tag down. So instead of usind 100% I not calculate the width with 100 / newScale and this is working fine now :)

Upvotes: 0

Views: 1126

Answers (2)

Marcin Biernacki
Marcin Biernacki

Reputation: 109

Js (jQuery) is a bad practice for scaling website (wait for the website to be fully loaded, then change its size?)

Use @media insead:

@media (max-width:1023px) {
   /* scaled down */
   .body {transform: scale (50%); }
}

@media (min-width:1024px) and (max-width:1950px) {

}
@media (min-width:1951px) {
    /* scaled up */
    .body {transform: scale (200%); }
}

Upvotes: 0

Christian Futtrup
Christian Futtrup

Reputation: 172

To change your CSS this way is really bad practice. You might want to take a look at CSS media queries, where you can do this in a better practice and easier. This way of doing responsive scaling is supported in all modern browsers.

Upvotes: 1

Related Questions