So I designed my website and forum with 1024x768 in mind, some users complained that it's tiny because they ran 2xxx x whatever resolution (lol).
I run 1920x1200 myself on my laptop and 1080p on my computers other than office where I also run a ridiculously high resolution.
That being said, web stats reports that 1024x768 is still the defacto resolution being used worldwide up until now...
So the solution? Jquery!
Go into Ungrouped Templates>headerinclude and place this before {$stylesheets}:
Then under Header Templates>header add before anything else this:
I run 1920x1200 myself on my laptop and 1080p on my computers other than office where I also run a ridiculously high resolution.
That being said, web stats reports that 1024x768 is still the defacto resolution being used worldwide up until now...
So the solution? Jquery!
Go into Ungrouped Templates>headerinclude and place this before {$stylesheets}:
Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>Then under Header Templates>header add before anything else this:
Code:
<script type="text/javascript">
jQuery(window).load(function() {
var currentWidth = jQuery(document.body).width();
var targetWidth = 1050; // experiment for your self
var scrollWidth = 10; // need to make it dynamic
// if the screen is not bigger than the target, then don't mess with zooming
if (currentWidth > targetWidth) {
if (typeof document.body.style.zoom != "undefined")
document.body.style.zoom = currentWidth / targetWidth;
else if (typeof document.body.style.MozTransform != "undefined") {
document.body.style.MozTransformOrigin = "left top";
document.body.style.MozTransform = 'scale(' + currentWidth / targetWidth + ')';
}
else if (typeof document.body.style.WebkitTransform != "undefined")
document.body.style.WebkitTransform = 'scale(' + currentWidth / targetWidth + ')';
jQuery(document.body).width(targetWidth - scrollWidth);
}
});
</script>