title: CSS: font-size, physical button height for a wide range of mobile devices
body: <p>I am working on a web application which is run on iPhone and various Android phones. I have used <a href="http://www.k10design.net/articles/iui/" rel="nofollow">iUI framework</a> so far. iUI was designed for iPhone 3 and uses pixels in CSS for font-size, line-height etc. But the result is unusable on a newer Samsung I5500 with high pixel density (240 x 320 pixels, 2.8 inches = 143dpi). All the elements are too small. This can be partly compensated in browser settings > zoom > close, but I do not like making users change their browser settings.</p>
  
  <p>My goal is, that every link and every button can be used comfortably by touching it. For that I would like to ensure a minimal physical size of the element. Luckily the CSS 2.1 specification provides a way for that: <code>min-height: 20mm</code> or <code>min-height: 0.8in</code>. Unluckily every phone I have ignores that declaration. On iPhone 3GS the element is 11mm in size, on Samsung I5500 (Andorid 2.1) is 10mm, on HTC Wildfire with low res display (Android 2.2) it is 14mm in size. Looks like WebKit browser assumes some low resolution like 96dpi rendering the elements hardly readable and barely clickable on high resolution mobile phone displays.</p>
  
  <p>This <a href="http://www.sencha.com/blog/resolution-independent-mobile-ui" rel="nofollow">blog post at sencha</a> provides some solution approaches an recommends setting all the sizes for buttons, links, list items in em and shifting the size for <code>body</code> once by some sort of browser sniffing.</p>
  
  <p>They also mention CSS3 media queries but tell, that it does not currently work:</p>
  
  <pre><code>@media screen and (min-resolution: 160dpi) {
      body {
        font-size: 114%;
      }
  }
  </code></pre>
  
  <p>For Android</p>
  
  <pre><code>&lt;meta name="viewport" content="target-densitydpi=low-dpi" /&gt;
  </code></pre>
  
  <p>seems to help. It enlarges the page on devices with high-dpi more than on devices
  with low dpi. But the physical size of elements is still different. See also <a href="http://developer.android.com/reference/android/webkit/WebView.html" rel="nofollow">Android WebView</a>. </p>
  
  <p>The <a href="http://developer.android.com/reference/android/util/DisplayMetrics.html#density" rel="nofollow">Android DisplayMetrics</a> documentation with its density vs. scaledDensity brings more fuzziness than clarification.</p>
  
  <p>So the best combination I found so far for iPhone and Android is iUI plus following declaration in HTML head:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;target-densitydpi=low-dpi;"/&gt;
  </code></pre>
  
  <p>Is there a modern, elegant way to set the font-size and button width and height for a wide range of mobile devices?</p>
  
  <p>Or which workaround do you use?</p>