javascript - How to show initial-scale 1.0 to devices below 570px width only -

javascript - How to show initial-scale 1.0 to devices below 570px width only -

on website, have mobile version devices below 980px, devices blow 570px see , if rotate mobile device, them able see total site device scaling if needed.

change pages width see mobile version. want devices see on portrait mode in landscape them see total version. thought implementing tilt detection, nowadays can 27" all-in-one touch computers can tilt!

if don't have viewport tag included, page render using device resolution. means homecoming 980px not css pixels you're expecting. default value of mobile browsers (on android , ios devices @ least). so, trying add together viewport tag checking if width of window less 570px without having viewport content tag set "width=device-width" fruitless. why first effort did not work.

also, if seek , remove viewport tag after page rendered (for instance, within $(document).ready(function () {}); remove tag, page unaffected.

however, can set viewport tag have different content value. so, in case, you'd include <meta name="viewport" content="width=device-width, initial-scale=1.0"> on page, in document ready, utilize jquery set content attribute default width value of 980px instead. because dom ready when checking width of window, changing value of content attribute cause devices honor property render page @ default 980px. (this horribly little on iphone5 , impossible use, stated find acceptable.)

//add document ready function , create sure //that viewport set content="width=device-width" var pagewidth = $(window).width(); if (pagewidth < 570) { $('meta[name="viewport"]').prop('content', 'width=980px'); }

why don't have worry resize events:

for current devices targeting, window width not resizable , resize event not triggered on orientation alter because it's not alter in width of browser, rather it's alter in zoom level. on desktop, however, browser won't care viewport meta tag @ all, so, no matter value have there, doesn't impact behavior.

javascript jquery