Viewport meta tag for desktop browsers?

Question

My client is asking me to reduce size of current website for desktop browsers by 30%.

is there a css or meta tag to do it like viewport meta tag on a mobile browser?

Answer 1

You can enable the meta viewport tag on desktop with JS. First you should derive the setting (width) from the meta tag:

var viewportcontent = $( "#myviewport" ).attr('content');
var viewportcontents = viewportcontent.split(",");
//if it starts with 'width='
for (var i = 0; i < viewportcontents.length; i++) {
  if(viewportcontents[i].lastIndexOf('width=', 0) === 0) {
    var wspec = viewportcontents[i].substring(6);
  }
}

Then you need a little JS and the solution of Mike to get this working solution: http://codepen.io/anon/pen/GqoeYJ. Note that this example forces the width to be 1200 pixels, but initial-scale: 0.7 could be implemented in the same way.