HTML5 iOS app for mobile and desktop
Android has a baseline of 160 dpi, so depending on the device's resolution, we have different scales: ldpi (low) ~120dpi @0,75x mdpi (medium) ~160dpi @1x hdpi (high) ~240dpi @1.5x xhdpi (extra-high) ~320dpi @2x xxhdpi (extra-extra-high) ~480dpi @3x xxxhdpi (extra-extra-extra-high) ~640dpi @4x. iOS only mentions whether the screen is Retina or non-Retina, and we get scaling factors of 1 (non-Retina), 2 (Retina), and 3 (Retina HD). Some articles indicate that the baseline resolution is 163 dpi for non-Retina iPhones and 326 dpi for Retina iPhones. Similarly, it seems the iPad has a resolution of 123 dpi for non-Retina and 246 dpi for Retina. It might be possible to detect if it's an iPad and lower the DPI baseline to 123 dpi for non-Retina models. The problem is that I can't find this information for desktop computers; what is the DPI baseline? If the HTML5 application is viewed on an iPhone or iPad, everything looks fine, but if I view it on a regular PC with a 96 dpi resolution, applying a baseline of 163 dpi causes 44px elements to appear as 25,91 pixels on the screen. Is this correct, or should a minimum scaling factor be applied to prevent the elements from appearing too small? Thank you very much.
