My goal is to create a website that adjusts its size based on the document size.
When the document size is between 0px and 1024px, I want the design to be responsive. This can easily be achieved with CSS media queries. Similarly, when the document size is between 1024px and 1950px, I want the "normal" design to be displayed. These two dimensions work perfectly fine.
Now, here's what I want to achieve: When the document size exceeds 1950px, I want the scale to increase. For example, if the screen is 2000px wide, I want the website to have a transform scale(2).
To solve this, I came up with a simple 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", "");
}
}
This solution works perfectly fine in Chrome. However, I encountered a major issue in Firefox:
The scaling affects the X axis as well, resulting in a horizontal scroll being generated. Additionally, my html/body tags, which usually have 100% width, no longer fit within the window. As a result, users have to scroll horizontally, which is not desirable (Chrome does not have this problem).
What am I doing wrong?
EDIT
I've just discovered that the entire perspective is scaled, and therefore, I need to adjust the width of the html tag accordingly. Instead of using 100%, I now calculate the width based on 100 / newScale, and everything works fine now :)