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.
Related
I want to write css to devices. In the devtools Galaxy S5 for example say the size is 360x640.
But according to screensiz website Galaxy S5 is 480x800.
Which of them is correct?
A mobile phone's screen size is not necessarily the same as it's web browser viewport size. You should design your website based on the browser viewport and not on the actual pixel size.
You can read some more about this, as well as find the viewport size for many devices here.
In my app, I support multiple screens to a reasonable extent as per the guidelines here and here. However, the S8+ seems to be taking the layout-normal layout instead of layout-large. I remember reading that it could be due to its odd aspect ratio (18.5:9) when its setting for "use fullscreen" or something is enabled. It seems with or without this setting the result is the same (uses normal layout). I suspect there are other phones that will have this issue.
Also, interestingly, I made a generic device definition in Android Studio of that phone, with it's 2960x1440, 6.2" screen to preview the screen and Android automatically reclassified it as a tablet (and forces it to use the large layout in the preview). This leads me to believe that it would do the same at runtime on a device, but it would appear it doesn't.
How can I set my app to have these phones (perhaps those with these...problematic...aspect ratios) use the large layout it was supposed to?
As mentioned in the comment by #CommonsWare, it would be better to use dp size qualifiers, however to shed a little light on why your problem happens:
The old size qualifiers are size "buckets", they represent a range of sizes and aren't very precise. So the S8+ falls into the normal size bucket on the device (probably due to the size the device is reporting), but large on the emulator (which seems suspect to me).
If you look closely at the resource qualifier definitions listed here Providing Resources you will notice the definitions for screen size are a bit vague.. taking a unit dp to be 1/160 inch.. the screen sizes they describe are "approximately":
small: 2" x 2.6"
medium: 2" x 2.9"
large: 3" x 4"
xlarge: 4.5" x 6"
Note that all of these sizes are surprisingly small. In reality the device manufacturer decides the bucket it falls into, which is very likely why your S8+ reports "normal" and the emulator is a tablet.. by the table above, it would be.
Essentially I recommend you use the "smallest width" qualifier. You can find some hints around the values you might want on the same page linked above.
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.
I am searching on different resolution support in IBM Worklight android . From this side i am reading tutorials IBM Worklight Tutorials In tutorial/module 09 they discuss about different resolutions.
In the document there is line which telling:
By default, Android application assumes that the application HTML
file was styled for a screen width of 320 pixels.
When displaying graphical elements on wider screens, Android
automatically scales images and fonts to the appropriate ratio.
For example, on a 480-pixel wide screen, a 100-pixel wide image will
be scaled by 480/320 (= 1.5) to 150 pixels in width
Now i make a Worklight Hybrid project and set a background image in it and two buttons on this image. Its a demo app in which i am testing different resolutions.
Now i deploy this app in android and run it on Tab 7 inch ,nexus 4 and tab 10.1 .Now my image size is 580x320 and bit depth is 24.
When i run this project on nexus 4 it gives the width of image correct but it do not scales the image height vise.
When i run this project on tab 7 2 , it shows the image having some extra white space on the left of image and extra white space on height of image means down the image.
When i run on tab 10.1 it shows the same behavior as the tab 7 2 did.
I am really confuse that which exact general size will be use so that all these scale on all screen sizes and not shows extra white space on width and on height
I would suggest using Worklight Skins in order to support multiple Android devices (with varying screen sizes) in your application.
Idan's answer works for me. I have a android tablet for some reason the app looks very blurry and huge buttons and fonts all the time. I have tried all the different target-densitydpi setting, the button might have change sizes. But everything is still very blurry.
Then I set this in the Android manifest as per Idan.
<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="13"/>
Now everything is sharp and crisp on my low resolution tablet. It turns out that Android would automatically do some scaling "screen compatibility mode" even though my device can support better resolution. Android will still treat this as low resolution and scale things automatically. By providing the target, it will stop this behaviour when the device is higher than that Android version. Read more here.
http://developer.android.com/guide/topics/manifest/uses-sdk-element.html
I am developing a mobile website, and I've come across an interesting issue.
I'm testing on my desktop, as well as on my Motorola Droid (Android 2.2). I have media queries set up to load 3 different stylesheets (320px wide, 480px wide, and 640px wide). I noticed that my Droid is loading the 320px stylesheet despite having a 480x854px screen. I set up a little JS to find out what the screen width is, and it's reporting 320px.
Does the Android browser run in MDPI on HDPI screens? It's scaling the 320px properly to fill the screen, but I'm a little confused why this is happening.
Also, I do have <meta name="viewport" content="width=device-width"> on my page, so that is not the issue.
Many OEMs have chosen to set their default browser viewport dimensions based on those of the iPhone (or similar resolutions) despite having an altogether different resolution. Apple had a similar problem with the release of the 'retina display' on the iPhone 4 where the spec sheet states 640px across, but screen.width will return 320px when is set.
As #omermuhammed mentioned base your logic on screen.width, CSS #media queries AND/OR device detection using WURFL or DeviceAtlas.
The following article may also be of interest in helping to clarify the issue:
A pixel is not a pixel is not a pixel by #ppk
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
I don't know in context of Android Browser, but I have seen handsets where Android reported wrong screen size. I would recommend basing your logic on a combination of user agent string AND screen resolution. This way you can detect this handset and handle differently, and use normal mechanisms with others.
I have noticed a few issues with getting screen.width and screen.height on Android 4.2.
Dimensions are not updated to reflect the orientation of the device.
You can correct this if you wish to by first getting orientation, then switching the values accordingly.
http://menacingcloud.com/?c=orientationScreenWidth
http://davidwalsh.name/orientation-change (nice matchMedia usage)
OS user interface elements are subtracted from the actual device screen dimensions.
E.g. nexus 7 screen is 1280x800, 1205x800 is reported. 75px for the OS buttons.
Ideally (in my opinion), the values should be reported in CSS pixels, not device pixels.
E.g. nexus 7, CSS viewport is set to 600px in portrait, but screen.width reports 800px. So DPR is approx 1.33
Overall, screen.width and screen.height are not very reliable (iOS has orientation issues as well).
I'll hopefully re-edit this answer with more detail soon.