I'm trying to write a bit of code that shrinks the size of the contents of the current page to eliminate vertical and horizontal scrollbars. This script only has to work on Mobile Safari, so I'm not very worried about browser compatibility. Here's what I have so far:
// maxHeight, maxWidth are the height and width of the browser window
function scaleContentToHeight(maxHeight, maxWidth) {
if(document.body.scrollHeight <= maxHeight || document.body.scrollWidth <= maxWidth) {
return;
}
var heightScale = maxHeight / document.body.scrollHeight;
var widthScale = maxWidth / document.body.scrollWidth;
var minScale = (heightScale < widthScale ? heightScale : widthScale);
document.getElementById("body").style["-webkit-transform-origin"] = (widthScale < 1 ? 0 : 50)+"% "+(heightScale < 1 ? 0 : 50)+"%";
document.getElementById("body").style["-webkit-transform"] = "scale("+minScale+")";
}
The problem with this is that pages whose height:width ratio do not match that of the window end up on the top/left side of the window. Is there a better way to do this?