Different <meta> viewport zoom based on device?

Question

I have a website with a static width (1500px). I'd like to display the exact same image on browser / tablet / mobile.

Because 1500px doesn't fit in an standard ipad screen I need to change the scale of the image based on the device used.

So far i'm using

<meta name="viewport" content="minimum-scale=.7, maximum-scale=.7" />

For the website to work with tablets.

I know that you can change the viewport value at runtime through javascript but I'd like to have the page start with the right zoom level when using a device that have a smaller screen.

I was thinking about using different html pages for each device (with redirections).

But maybe there is a better way / simpler way to do this ?

Thanks !

Answer 1

I think the best solution would be to make your site responsive but as a quick solution you can scale the whole page down using transform: scale(0.7); with a media query like this:

@media only screen and (max-width: 1024px) {
    body {
        -webkit-transform: scale(0.7); 
        -moz-transform: scale(0.7); 
        -ms-transform: scale(0.7); 
        -o-transform: scale(0.7); 
        transform: scale(0.7); 
    }
}

You might tweak the values to your specific needs.

More on media queries for standard devices.