Setting the correct ios & android compatible viewport that works with rotation

Question

I have a question that I saw in different parts of the request, but I still have to find a short working answer that works correctly on iOS and Android (I’m specifically testing it right now with iPad, iPad2, Android phones and iPod Touch). So, I have a scalable site that works great. I want to be able to indicate that the minimum width of the site is 480 pixels, the maximum width is 1014 pixels, and all the intermediate ones will be left as is. Here is my current code:

viewportWidth is calculated using window.screen.width minwidth - variable (480) maxwidth - this is variable (1014)

The code below is called on device rotation events that are triggered.

Note. I left part of my code with comments in the source below to show that I tried

Any help is greatly appreciated, my code really works, but I am on smaller devices, I have to reduce the smidge size as the page is outside the viewport (although this should not be). rotating several times sometimes corrects this ...

/*Set initial Sizes*/ if( viewportWidth > maxWidth){ //dont adjust since it may be desktop viewportWidth = maxWidth; $('meta[name="viewport"]').attr('content', 'initial-scale=1.0; width=device-width' ); //viewport = document.querySelector("meta[name=viewport]"); //viewport.setAttribute('content', 'width=' + maxWidth + '; initial-scale=1.0; user-scalable=1;'); }else if( viewportWidth > minWidth && viewportWidth < maxWidth ){ $('body').removeClass('mobile'); $('body').addClass('desktop'); $('meta[name="viewport"]').attr('content', 'initial-scale=1.0; width=device-width' ); //viewport = document.querySelector("meta[name=viewport]"); //viewport.setAttribute('content', 'width=' + window.screen.width + '; initial-scale=1.0; user-scalable=1;'); isMobile = 0; }else if( viewportWidth <= minWidth ){ if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) { $('meta[name="viewport"]').attr('content', 'initial-scale =' + (window.screen.width / minWidth ).toFixed(2) ); }else{ $('meta[name="viewport"]').attr('content', 'initial-scale = ' + (window.screen.width / minWidth ).toFixed(2) + '; width=device-width'); } //viewport = document.querySelector("meta[name=viewport]"); //viewport.setAttribute('content', 'initial-scale = ' + (window.screen.width / minWidth ).toFixed(2) + '; width=' + minWidth + '; initial-scale=1.0; user-scalable=1;'); $('body').removeClass('desktop'); $('body').addClass('mobile'); //$('#pageBody').width(minWidth ); viewportWidth = minWidth ; isMobile = 1; } 

Answer 1

No one ever answered, so this is what works.

1, use media queries for css 2, use this script to fix scaling

 <meta id="Viewport" name="viewport" width="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <script type="text/javascript"> $(function(){ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width var mw = 480; // min width of site var ratio = ww / mw; //calculate ratio if( ww < mw){ //smaller than minimum size $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww); }else{ //regular size $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww); } } }); </script>