I've developed a website that is not responsive (it's more of an "experimental/artistic" site with a lot going on the screen, making it difficult to make it responsive..)
I have decided not to cater for mobile phones, but I would like the site to be accessible on tablets as well.
However, since the site has a width of 1280px, it may not display correctly on tablets either.
Still, can't I simply zoom out the body of my site accordingly when the user is using a tablet?
Do you believe that the following script will solve the issue:
var resizeSite = function (originalWidth, minWidth)
{
var resize = function ()
{
var currentWidth = $(window).width();
var zoom = currentWidth / originalWidth;
if ((currentWidth < originalWidth) && (currentWidth >= minWidth))
{
$('body').css({
zoom: zoom,
'-moz-transform' : 'scale(' + zoom + ')'
});
}
};
resize();
$(window).resize(function ()
{
resize();
});
};
resizeSite(1280, 980);
Zooming out might affect quality, but it's better than nothing, right?
Is there a better alternative or is there something flawed in the script above?
Is there any way to prevent text from appearing blurry at certain zoom levels when zooming out?