I’ve tried to understand how the display window – and the content it contains – is affected by the meta tag used to render content with WebView or the original browser.
First of all, a few comments:
Device no. 1 : The physical screen is 1024×600 and runs on Android 2.2.
Device number 2 : The physical screen is 800×480 and runs on Android 2.3.2.
It follows from these results that the following is not reasonable:
Does anyone know what happens to those who don’t feel like it?
Does anyone know why many 10-pixel values don’t match the physical pixels, but it’s as if they eventually match? (for example, 1.7 and 2.6).
Am I doing something wrong, or does it seem that it is not possible to scale more than 1.0 unless the user is allowed to scale and the minimum value of the scale has been set?
In other words, although the allowed values range from 0.01 to 10, initial scale values below 1.0 will be ignored unless you can also specify a minimum scale.
Android docking stations do not ignore the min/max scale values when the user scans. That doesn’t seem very helpful. And 2.9-2.11 seems to show that one cannot just calculate it oneself and set the width.
Finally, here’s the HTML I used:
So, uh… what am I missing?
How can I solve this problem?
Interesting Pandora’s box you discovered there. If you try other devices, you are likely to notice even more oddities and occasional bugs. An interesting time!
I think at some point you’ll want to give up and ….. want to give it a try.
- Use the simplest settings possible.
- Accept the pixel width selected by the camera for the report.
- Rely on an adaptive/liquid layout and relative width so everything works at different screen widths.
- Use the native CSS properties for a neutral display in terms of resolution of rounded corners, shadows, and slopes.
- Use vector formats (svg, icons, etc.) as often as possible.
- and (importantly) use high-resolution frame images and background images in combination with a well-supported background size feature1 to make things pleasant and unobtrusive2.
1) To ensure backward compatibility with older browsers (e.g. MSIE8), it is necessary to use double background images – for example :
background image: url (lowres.png); /* CSS2 */
background image: url (highres.png), none; /* CSS3 */
background image: 100px 10px; /* CSS3 */
2) Media Query -webkit-max-device-pixel ratio can also help, but as the name suggests, it only works for webkit browsers.
The new generation of Android and iOS devices have such different screen DPIs that they use CSS pixel ratios instead of the actual pixels of the device. It’s both good and bad – depending on how you look at it.
This is bad because you no longer have the pixel control you are used to when working with essentially homogeneous screens.
On the other hand, it is good because you know that your drawings will never be so small that they cannot be read/used by normal people.
The problem with using target-densitydpi=device-dpi is that while it works great on a 7,800 px screen, it completely destroys your application on a 4,960 px screen.
It seems to work to properly disable sizing after sizing adjustment.