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

silverlight project setup

visual-studio silverlight

i have a a new silverlight solution in visual studio. i have created a silverlight class library to share common functionality. this class library has a service reference and so it has a

Mailchimp - Add existing subscriber to segment via email link

group mailchimp segment

I need to add an existing subscriber to a list segment via a link in a campaign email.

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.