scale fit mobile web content using viewport meta tag

Question

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    The HTML may or may not have fixed size elements  ex img has a fixed width of 640   In other words I don t want to force the content to be fluid and use   s  I do not know the size of the webview  I just know its aspect ratio   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     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt     lt head gt       lt title gt Test Viewport lt  title gt       lt meta name  viewport  content  width 640    gt       lt style type  text css  gt      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                    lt  style gt     lt  head gt     lt body gt       lt img src  http   www dmacktyres com img head car tyres jpg  gt     lt  body gt   lt  html gt    What am I doing wrong here   Does the viewport meta tag only zoom into content that is  lt  the  webview area

User · Answer

I think this should help you    lt meta name  viewport  content  width device-width  initial-scale 1 0  maximum-scale 1 0  gt    Tell me if it works   P s  here is some media query for standard devices  http   css-tricks com snippets css media-queries-for-standard-devices

User · Answer

ok  here is my final solution with 100  native javascript    lt meta id  viewport  name  viewport  gt    lt script type  text javascript  gt    mobile viewport hack  function       function apply viewport        if   Android webOS iPhone iPad iPod BlackBerry i test navigator userAgent               var ww   window screen width        var mw   800     min width of site       var ratio    ww   mw    calculate ratio       var viewport meta tag   document getElementById  viewport          if  ww  lt  mw     smaller than minimum size         viewport meta tag setAttribute  content    initial-scale     ratio      maximum-scale     ratio      minimum-scale     ratio      user-scalable no  width     mw                 else     regular size         viewport meta tag setAttribute  content    initial-scale 1 0  maximum-scale 1  minimum-scale 1 0  user-scalable yes  width     ww                          ok  i need to update viewport scale if screen dimentions changed   window addEventListener  resize   function        apply viewport             apply viewport            lt  script gt

User · Answer

Try adding a style  width 100    to the img tag  That way the image will fill up the entire width of the page  thus scaling down if the image is larger than the viewport

User · Answer

Adding style  width 100  max-width 640px  to the image tag will scale it up to the viewport width  i e  for larger windows it will look fixed width

User · Answer

For Android there is the addition of target-density tag   target-densitydpi device-dpi   So  the code would look like   lt meta name  viewport  content  width device-width  target-densitydpi device-dpi  initial-scale 0  maximum-scale 1  user-scalable yes    gt    Please note  that I believe this addition is only for Android  but since you have answers  I felt this was a good extra  but this should work for most mobile devices

User · Answer

I had same problem as yours  but my concern was list view  When i try to scroll list view fixed header also scroll little bit  Problem was list view height smaller than viewport  browser  height  You just need to reduce your viewport height lower than content tag  list view within content tag  height  Here is my meta tag    lt meta name  viewport  content  width device-width height 90    user-scalable   no  gt     Hope this will help Thnks

User · Answer

In the head add this    Include jQuery  lt meta id  Viewport  name  viewport  content  initial-scale 1  maximum-scale 1  minimum-scale 1  user-scalable no  gt    lt script type  text javascript  gt    function    if   Android webOS iPhone iPad iPod BlackBerry i test navigator userAgent        var ww       window  width    lt  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  lt  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              lt  script gt

[android] scale fit mobile web content using viewport meta tag

Examples related to android

Examples related to iphone

Examples related to ios

Examples related to mobile

Examples related to viewport