All geek questions in one place

The layout is blurry / poor quality when jQuery for Android mobile devices

I am using phonegap and jQuery mobile to develop an Android application. The pages look fine in the browser, but when I run the application on the device (= in web browsing), the pages look cheap and ... are disabled. Almost as if the page was enlarged by 101% or something like that. Anyone else run into this issue? Any idea how to fix this?

+4
source share
7 answers

You tried to add the value target-densitydpi=device-dpi to the viewport meta tag in the </head> page as follows:

 <head> <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi" /> ... </head>

This should do the trick; Hope this helps!

+4
source

In fact, people, real fixes without any side effects of font size, refer to CSS Text-shadow as follows.

 * { text-shadow:0 0 0 transparent; text-shadow:none; }

This ensures that your font has no shadow, so the text looks blurry. If you look closely, you can see that the text is not really blurry, but has a shadow of the same color.

+2
source

The jQuery forum also suggested adding user-scalable=0 to the ever-growing meta tag. So in the end it looks something like this:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=device-dpi, user-scalable=0">

This fixit worked for me. Although the jQuery forum post also suggested that the final work around might include some Android-specific css:

 - if is_android? %link{:rel => 'stylesheet', :type => 'text/css', :href => '/stylesheets/mobile/android.css'}/
+1
source

I also have the same problem when testing on a mobile device. But refer to this link :

The CSS px px block may differ from the actual pixels of the device, as the browser “scales” the images and fonts to a larger size than you requested. (The browser just naturally assumes that you didn’t really mean “pixels” when you said “px,” and it is readily readable on high-resolution phone screens.)

Then I changed my TARGET-DENSITYDPI to "target-densitydpi = 150" and it works correctly (tested on NEXUS 10).

0
source

try putting the empty "" symbol in the same skinhead of your image, I don’t know for sure, but it works for me.

0
source

Webkit uses 'css pixels', which is then recalculated to the resolution of the physical device - perhaps this is the problem here.

If you have a typical 4-inch mobile phone with a 480x800 screen, the css pixels can be 320x533 and the CSS aspect ratio is 1.5.

In this case, the 32 x 32px image should have at least 48 x 48 pixels in order to look good and sharp. Since some devices have a pixel ratio of 2 (iPhone 4/5), I usually use 2x large images and they look very good, almost as good as svg images (and there is no problem with the width of older browsers).

When doing this, you need to remember the image size

 background:url('myimage64.png'); background-size:32px 32px;

or

 <img src='myimage64.png' width='32' height='32'>
0
source

I have the same problem, but only with the emulator. When I download apk to my phone and install it, the text on the device becomes crystal clear. The emulator has a lot of different screen resolutions and the ratio is not clear even after I try all the solutions recommended here.

0
source

Source: https://habr.com/ru/post/1416046/

More articles:


All Articles