Development issue/problem:

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.

I resorted to some obvious contradictions. I made a small page (see below) with an image and javascript to display the size of the viewing window, so you can visually see the zoom with the image and also get exact numbers.

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:

Hello, world.

So, uh… what am I missing?

How can I solve this problem?

Solution 1:

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.

Solution 2:

$(document).ready(function() {
$(‘meta[name=viewport]’).attr(‘content’,’width=1024, user-scalable=no’);

It seems to work to properly disable sizing after sizing adjustment.

Good luck!

viewport-fit=cover,safe-area-inset-top not working,javascript detect notch,safe-area-inset-bottom android,env(safe-area-inset-bottom) calc,viewport-fit=cover android,custom css not working with bootstrap,is bootstrap mobile-first,bootstrap css not working,bootstrap.min.css not working locally,bootstrap not working react,bootlint,request desktop site javascript,request desktop site not working,force desktop site android chrome,what happened to stack overflow,stackoverflow api c#,stackoverflow php problems,stackoverflow calendar,stackoverflow tech tracker,stackoverflow license change,html for beginners pdf,tag used to abbreviate a text is,what is the use of defer attribute,css for beginners,simple website using html,autobiography html sample code,overscroll-behavior,stop page from auto scrolling,pull to refresh javascript,disable bounce scroll ios css,refresh page and keep scroll position,disable pull refresh,view hierarchy android,android optimizing layout,advanced layout in android,view hierarchy ios,framelayout vs constraintlayout performance,constraint layout inside constraintlayout,meta viewport scale to fit,viewport meta tag not working

You May Also Like

4 Browsers that are Super Awesome

Facebook Twitter Pinterest Reddit Messenger WhatsApp Xbox One supports a wide range…

Eve Spectrum 4K 144Hz Gaming Monitor – Review and First Look

The Spectrum 4K 144Hz monitor is increasingly becoming a good option for…

Something went wrong while downloading your template [Fix]

How to correct an error when loading a model? 1. Retrieve a…

Why Choosing an ITAD Company is Important to your Business

The destruction of hard drives as a means of data protection is…