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

Instead of $(window).width(), try window.outerWidth. Also, use your preferred width in pixels instead of device-width. So the code becomes:

var scale = window.outerWidth / 1280;

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

It works on mobile versions of Chrome, Opera, and Firefox. Let me know how it works for you.