Setting a proper viewport , compatible with ios & android, which works with rotation

I have a question, which I have seen different parts of being asked, but I have yet to find a concise working answer which works properly on iOS & android (I am specifically testing right now with iPad, iPad2, Android Phones and iPod Touch). So what I have is a scaleable site which works great. I want to be able to specify that the site's minimum width is 480px, the maximum width is 1014px, and anything inbetween will be left as is. Here is my current code:

viewportWidth is calculated by window.screen.width minwidth is a variable (480) maxwidth is a variable (1014)

the below code is called on the device rotation events which is being triggered.

Note: I have left some of my commented code in the source below to show what I have tried

Any help is very appreciated, my code does work, but I find on the smaller devices I have to zoom out a smidge, as the page is outside the viewport (even though it shouldnt be). rotating a few times on occasion fixes 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;   

        }

Answers


No one ever answered, so this is something which works

1, Use media queries for the css 2, Use this script to fix the zooming

<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>

Need Your Help

Fetch row and its foreign key rows in one query vs many queries

php mysql database foreign-keys

let's say I have three tables (MySQL), one for users, one for tags and a last one for joining them (many to many relation):

DataBinding Between a WPF GUI and a couple of ListBox/CheckBox

wpf binding listbox checkbox datacontext

The thing i want to do looks easy, but takes me a lot of time without any result.. =/

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.