In Chrome's DevTools, when I select a mobile device to display a web page, I notice that the screen size in DevTools does not match the device's actual screen resolution. For example, if I select a Pixel 2 XL, the width shown in DevTools is 412. But the device is actually 1440 in width. Is there a reason for this?
That's because the Pixel 2 XL has a pixel density of 3.5 so while the device resolution of the device is 1440 x 2880 px it's CSS resolution is 412 x 823 px ((1440 / 3.5) x (2880 / 3.5))
A pixel does not have an inherent size. It obtains one when it’s displayed or printed.
You can read more about the difference between device and CSS resolutions here.
You can find device and CSS resolutions for many devices here.
Related
how does flutter calculate devicePixelRatio for each device?
for example:
pixel xl:
resolution: 1440*2560 px
device pixel ratio 3.5
screen size : 5.5 inch
on the other hand
Nexus 6:
resolution: 1440*2560 px
device pixel ratio 3.5
screen size : 6.0 inch
both devices have different screen size however both devices have the same devicePixelRatio ??
My guess is that the different displays have different pixel dimensions. So that you can have the same amount of pixels on different sized displays.
To take a screenshot on the Android Emulator, I just need to click the camera button and that works well enough. I am trying to get screenshots together to submit an app to Amazon and the screen resolutions that they require are:
800 x 480px, 1024 x 600px, 1280 x 720px,
1280 x 800px, 1920 x 1080px, 1920 x 1200px,
or 2560 x 1600px (portrait or landscape)
I'm taking screenshots on a Pixel 3 emulator and the screenshot comes out at 2160 x 1080. The only way to get a usable screenshot out of this is to crop the image and I don't want to do that. Is there any way to specify a resolution for the emulator so that I get the full screen shot?
I had the same problem uploading photo to Amazon. Then I used this webapp to get do the job done. I made width: 1200 and height: 1920 and made it a .png file. Then uploaded it to Amazon.
This not be a good answer for this but it does the work.
As mentioned above what is the target resolution for the Apple TV? For example like the iPhone 5 was 640x1136, and the iPad was 768x1024. I know that TVs vary in size so there is no definitive size. But maybe a recommended size would work to have a starting point. Like having a fixed height and adjusting the width of the app to fit the tv.
The Apple TV standard resolutions for a modern 16:9 television are:
1920 x 1080 (1080p Full HD, preferred if supported)
1280 x 720 (720p for a HD Ready television)
858 x 480 (480p SD)
The new Apple TV runs apps at a standard 1920x1080 resolution at a 1x scale. This means that, when building tvOS apps, the screen size, in points, that you must use when building your interface is also 1920x1080.
Have a look here: http://code.tutsplus.com/tutorials/an-introduction-to-tvos-development--cms-24848
Why is the iPhone 5 displaying a mobile responsive site design when the phone's screen width (1136 x 640px landscape) can fit a website that is 1000px in width?
Shouldn't the iPhone 5 just be showing the desktop version as it has a large screen resolution that is big enough for the website?
Example site
When I resize a desktop browser to less than 1136px width the mobile responsive version doesn't show (the normal desktop design shows) which suggests that media queries are not in use at this size.
On retina screens, pixels are not points. So although you may think the resolution is higher; the actual landscape resolution of an iPhone 5 is 568x320.
Although distances are measured in px in web development, this does not translate into actual pixels on a retina device, where two physical pixels represent a point on the screen which is equivalent to a px in your CSS.
The dimensions of the iPhone is 320x480
The dimensions of a Retina iPhone is 640x960
When designing a design for a retina device, do you set the size of your document to 320 x 480 or 640 x 960?
I would have thought you would have set the size to 320 x 480.
The reason for this is that although a retina device has more pixels, these are still being displayed on a 3" screen size. If you did set your size to 640 x 960, then when viewed on a retina display, all the text would be small, as although there are more pixels, the screen isn't physically bigger.
Is that correct?
UPDATED: Do you also use 320 x 480 as a base size for CSS (see comments below)
Yes, that's correct. I'm an iOS developer, not a web designer, but in iOS devices you specify everything in points (which is one pixel on a non-retina device, and a 2x2 pixel block on a retina device) so everything is the same size. The extra pixels on the retina display simply make everything look better.
You can get away with smaller text on a retina screen since you have more detail, but accessibility wise that's not a good move, since lots of people can't then see your text without zooming, whatever kind of display they have.