Sorry if this is a duplicate, but I couldn't find any questions here or through Google that matched my needs.
I am working on a small image (167px x 98px) and I noticed that it came up clearly on my desktop, but on the mobile version of the site it looked blurry (not pixelated though). It's still legible but noticeably hazy.
After some research, I realized that it was related to the pixel density. My monitors only have a density of 102 PPI while my phone has 554 PPI. So, I thought if I raised the PPI while maintaining the desired dimensions, I should be able to increase the quality of the image while maintaining the size. I bumped the PPI up to 550 and the result was essentially the same as the original 72 PPI image I started with.
Is there anything else I can do to improve the quality?
More info: This is an image that must be uploaded to Netsuite to be used as the site's logo, so there is no coding that would interfere. Image is PNG-24 format as it has a transparent background. I tried regular RGB and raising the image to 32-bit RGB. I also tried increasing the PPI to 700 in both color formats. While the 32-bit version made the image look better, it was still blurry.
Tested in: Firefox and Chrome mobile on a LG G5. Tested in Edge, Firefox, Chrome and IE on desktop. Running Windows 10, Samsung LED monitors that are 21.5 inches in 1920 x 1080 resolution.
Related
What would cause a 2560px wide device to claim to be 1138 pixels wide? It it because it's Android? I'm getting very different font size compared to dev tools on a desktop and a div sized to 2560px wide is 2.5X the width of my page on the tablet. I'm super confused. Tried every meta tag and forcing it to be 0.45 device with seems very wrong and hacky.
document.body.clientWidth
My iPhone 6 says 667px which is correct. Desktop browsers return correct width too. It's just this Samsung s4 tab that seems to return ting dimensions and create gargantuan text sizes.
I'm having an issue with getting all the fields to fit on an 800 by 480 display because the submit button disappears off the bottom. That got me to wondering if I really need to support a display that small. The app I'm working on is not for mass-consumption, max usage of a few thousand people, but it is targeted at "normal" users, i.e. the group profiles to the general population.
I did some checking and found two interesting links, especially this one:
https://gigaom.com/2014/07/09/android-screen-sizes-arent-as-big-a-challenge-for-developers-as-you-might-think/
It states that the 10 most popular phones used by the developer's customers corresponded to the 5 following layout sizes:
720 x 1280
768 x 1280
800 x 1280
1080 x 1920
1440 x 2560
The next link:
http://developer.android.com/about/dashboards/index.html
shows that just 6% of phones checked into Google Play are using versions of Android less than Android 4.0, and only 10% are using less than Android 4.1.
I then checked the history the screen sizes for the various versions of the Samsung Galaxy S series, and you have to back to the Galaxy S2, issued in April 2011, to find the one with 800 x 480 screen size. The next S version, the Galaxy S3, was issued in 2012 and has the lowest screen size found on the list of layouts shown above.
The issue is that although the minimum supported Android version in my app is 4.0, someone with an S2 could have upgraded to it. Plus there are some phones issued even recently which have have 800 x 480 displays, e.g. the Samsung Neo. The S3 was the first one issued with 4.0 as the native OS, so if the S2 users didn't upgrade, they wouldn't be able to use the app anyway. Most of them probably have a new phone by now, I'm hoping.
I'm probably going to try to wrap the submit button inside of a relative layout and see if I can let the 800 x 480 users scroll to it, but that display is so tiny I'm not sure I can make it work.
So I guess my question is, how concerned should I be with the 800 x 480 display issue?
I myself used the link you provided for research for my internship a couple of months back as well. The images I provided below indicate that a normal hdpi screen takes up 38.3% of all phones. This would be either 480x800, 480x854, or 600x1024 (if I interpreted it correctly). 38% is a serious amount and should not be discarded.
Not to sound degrading, but did you consider using a ScrollView in combination with sizing in dp?
I'm developing a small game for Android with Phonegap. I'm using media queries to support 3 different screen sizes (width from 480 to 1920 px).
For Android version lower than 4.4 all works fine. But when I test it on a full HD resolution, Android displays all scaled like on a 480px screen. All seems to be very big. So having a full HD resolution does no make any sense.
Well, setting the target SDK version to 18 fixes the problem, but I would like to known what is happening there.
The documentation says, Android is scaling all to fit on the page. But why does it scale so much? Why not for higher resolution? There is no code that could explain this. I made the media queries especially to handle different resolutions.
I have a png which is 96 X 96. I have two Android phones which have the same screen size but one phone has a higher PPI.
Will this image appear larger on phone with higher PPI?
If so why?
I looked through some documentation but could not find any answer there.
i recently developed a game, for Android 2.3.3, and strangely im finding few weird behaviour in different phones,
for example
An explosion sprite(256x256 pixels) divided into 4x4=16 images, when displayed is being displayed as a 2x2 image in Samsung Galaxy Ace 2.3.3 and Samsung Galaxy Y, 2.3.5 ,
Also, the accelerometer works in a haphazard form in Sony Xperia 2.3.3 and Samsung Galaxy Ace.. either its too slow(and takes touch gestures after 3-4 second gap) and Android OS throws a Alert box saying, the app is not responding, else its too fast.
Strangely, The game works perfectly on a Samsung S2, just like it plays on the VirtualBox..
please help me, b'cos this is my college project, and I wont even be able to put this up in the market if such a queer problem exists!!
Thanks in Advance!!
I think I have the same experience with the graphics problem:
From your code, I'm guessing you may have pre-computed "width_explosion" and "height_explosion" from the image height/width you have seen in an image editor and using the same values on different devices.
The device you have listed have two different DPI values as Android knows: 240, or MDPI (Galaxy S2) and 120, or LDPI (Galaxy Ace and Galaxy Y). Note that Galaxy S2's DPI is exactly twice as Ace's and Y's.
Android makes it handy for app authors by assisting them in manipulating images. When images are read from resources through getDrawable and are ready for rendering on screen Android resizes the images with respect to 160DPI, so that they will have the same length measured with a ruler on screens with different pixel densities. For example, if an image with 128x128 pixels is 2cm long and 2cm wide on Galaxy S2, it should be 2cm long and 2cm wide on a Galaxy Ace. However, to cover the more pixels on a Galaxy S2, it's resized to 192 x 192 pixels when drawing on a Galaxy S2, because its DPI as the Android system knows it is 240, 1.5 times the DPI of an ADP1 (HTC Dream). Similarly, the image will be resized to 96 x 96 on a Galaxy Ace or Galaxy Y.
The source rectangle in canvas.drawImage, unfortunately, refers to the number of pixels in the resized bitmap. That means the same source rectangle used in your code sample covers 4 times as many pixels on a Galaxy Y as it does on a Galaxy S2. I guess you are describing in the question that "the same sprite file looks like it was divided in 2x2 on a low DPI device but it should be divided by 4x4".
The following example illustrates what happens when I'm trying to replicate your question with devices with different DPIs.
I cannot post images, so I have put the images here (it's my blog):
http://edgeofmap.com/blog/2013/05/android-bitmap-over-devices-of-different-dpis/
Not sure what to do about the graphics issue, but for the accelerometer each device acts differently. Use event.sensor.getMaximumRange() in your onSensorChanged() to get the maximum value and base your actions on that or a percentage of that.