Menu
I'm trying to figure out how to leverage the mobile viewport meta tag to automatically zoom the contents of a HTML page to fit into a web view.
Constraints:
For example, if I have a single image (640x100px) I want the image to zoom out if the webview is 300x250 (scale down to fit). On the other hand, if the webview is 1280x200 I want the image to zoom in and fill the webview (scale up to fit).
After reading the android docs and the iOS docs on viewports, it seems simple: since I know the width of my content (640) I just set the viewport width to 640 and let the webview decide if it needs to scale the content up or down to fit the webview.
If I put the following into my android/iPhone browser OR a 320x50 webview, the image does not zoom out to fit the width. I can scroll the image to the right and left..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test Viewport</title> <meta name="viewport" content="width=640" /> <style type="text/css"> html, body { margin: 0; padding: 0; vertical-align: top; } h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; vertical-align: top; } </style> </head> <body> <img src="http://www.dmacktyres.com/img/head_car_tyres.jpg"> </body> </html> What am I doing wrong here? Does the viewport meta tag only zoom into content that is < the webview area?
866
The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen. This gives the browser instructions on how to control the page's dimensions and scaling.
The HTML Viewport meta tag is used for creating responsive website. So that web page can adjust its width according to viewport.
To configure a mobile viewport, all you have to do is add a meta viewport tag to any and all webpages you would like to be mobile-friendly. To do this, simply copy the HTML snippet below and paste it in the header of your site.
The user-scalable attribute defines whether users can scale (zoom) the page content on mobile. By default, scaling is on, but if user-scalable is set to '0' or 'no' then this will prevent users from zooming, which negatively affects user experience (in most cases).
In the head add this
//Include jQuery <meta id="Viewport" name="viewport" content="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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
