Scale website to mobile devices

Question

I have a web app where responsive layout is not an option for mobile devices, so I tried playing with the viewport scaling a bit but had no success in doing so.

Page size is 1280x720 so on small screens it should be zoom out and on larger ones zoomed in:

var scale = $(window).width() / 1280;

$('head').append('<meta name="viewport" content="width=device-width, height=device-height, initial-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=0">');

I've only tried this for width but the result is not the desired one, am I doing something wrong?

Answer 1

I am not sure exactly what you are trying to achieve, but with the following html

<meta name="viewport" content="width=1280, initial-scale=1">

and the following JS

var siteWidth = 1280;
var scale = screen.width /siteWidth;

document.querySelector('meta[name="viewport"]').setAttribute('content', 'width='+siteWidth+', initial-scale='+scale+'');

you should be able to show the page initial zoomed in or out on mobile devices. You would have to check the device was in portrait. For landscape you would need to use screen.height as opposed to screen.width