So I am about to create a full screen game for iPad. The retina display (new iPad) has a resolution of 2048 x 1536 pixels while the old iPad has resolution of 1024x768 pixels.
My question is, should I set width of my container div to be 2048 pixels and then use media queries to change dimensions and positions of different HTML elements based on window width? I will be using lots of absolute positioning and I am not sure how will that work between old and new iPad.
Or will the retina display still return 1024 in media queries?
Also, do I need two sets of images? One set of images for the retina display and one set of images (with half the size) for the old iPad display?
I am slightly confused. Thank you for explaining this to me.
You should set it at 1024, and then target retina and higher resolution displays with device pixel ratio media queries.
Read more here:
http://menacingcloud.com/?c=highPixelDensityDisplays
Related
What is my phone real resolution? The resolution that CSS detects.
The phone is a Samsung S6. Its factory specifications show a resolution of 1440px x 2560px.
How ever when I use css #media(max-width:...px) to detect the screen resolution, the mobile browser acts as if it's somewhere between 768px and 991px width.
Using Google chrome inspection tool and toggling to mobile view, it shows that a Samsung S5 has a resolution of 360px x 640px.
So where is the real resolution in all of this?
Screen size and screen resolution are NOT the same. You seem to be confusing the two.
Google's web developer tools detect the screen size (as in the width of the screen) as opposed to the screen resolution.
Screen resolution refers to the clarity of the text and images displayed on your screen.
At higher resolutions, such as 1600 x 1200 pixels, items appear sharper.
To summarise; the google inspection tool picks up the physical screen size of devices and emulates them, it does not emulate the screen resolution which is essentially the quality of the output of text/images.
The accepted answer seems to be incorrect.
#OP here's what you need to know:
Screen size is the physical size of the screen, and is measured in inches.
Screen resolution is the number of pixels making up the screen, and is measured in pixels.
Your phone has a resolution of 1440x2560, as stated in the spec sheet.
So why does CSS act like the resolution is lower? It's because the contents of the screen that you are seeing on your mobile device are zoomed in.
This is done because showing text etc. at 100% size on a 1440x2560 display that is only ~6 inches would make the text so tiny as to be illegible.
So, if the amount of zoom is 200%, CSS thinks the screen is 720x1280. If 400% (as seems to be the case with your phone), CSS thinks 360x640. And so on...
I don't quite understand what the window.devicePixelRatio value is, and how it dictates what size image (2x, 3x, etc) I need for that device.
For instance, on an iMac 5K Retina (Late 2015), I'd expect the pixel ratio to be at least 3 or so, but it's actually 2, the same as an iPad Air and iPhone 6s. Does that mean it prefers a 2x bitmap? 3x?
devicePixelRatio is the ratio between physical pixels and device-independent pixels (dips) on a given device. You can think of dips as what the display "acts" like.
For example: a non-retina 27" iMac has a width of 2560 physical pixels. Everything is displayed 1:1, so it's also 2560 dips wide, so the devicePixelRatio is 1.
On your retina 27" iMac, the width is 5120 physical pixels. But the display "acts" like it's only 2560 pixels wide, so that everything is shown at the same physical size as the non-retina iMac. Therefore, it's still 2560 dips wide, so the devicePixelRatio is 2 (5120 / 2560), and you would serve 2x images.
(You can look up what the dips values are for your system – if you have a retina display – by going to System Preferences > Displays > Display and switching the Resolution toggle to Scaled, then hovering over the different options. For Default, on the 5K iMac, it'll say "Looks like 2560 x 1440").
To date, standard practice for graphics destined for Retina displays is still to provide an image that's twice the usual, non-Retina size.
Reminder: it is good "bandwidth hygiene" to serve an image only as large as needed for the current user's device size and resolution. Solutions to that are outside the scope of this question.
When I use
.class { width: 800px; }
what does it actually mean?
When I view it on my laptop screen, it shows up exactly 800 pixels wide. When I view it on my tablet screen, it shows up as 1600 pixels wide. I am guessing because my tablet might have a higher pixel density. However, the physical (when compare side-by-side) width of the element if much smaller on the tablet than on my laptop
So, my question is: When I define a dimension in CSS to an HTML element, what is the reference? How is it computed or scaled on different displays?
The reference is a logical coordinate system that might be scaled in relation to the physical screen.
It's most common on a PC that the scale is 1:1. However as screens get larger it's becoming more common with computers that have scaled up display, which may also affect the browser.
The user can also zoom in the browser, which natually affects the scaling.
Devices like tablets and phones usually have a 2:1 scaling in the browser, sometimes even more. That means that the browser reports a smaller screen size, and everything is scaled up. This also affects the media queries, so even if the physical screen is larger, your CSS might not apply as the media query uses the screen size that the browser reports.
Also, if you don't lock the viewport using a meta tag, the mobile browser will scale the page to fit the screen, so whatever page width you specify will show up the same size.
Why does iOS scale images up? I am building a site and want it to be mobile friendly, when I look at it on iOS my pixel-based images are getting scaled up for some reason.
Shouldn't the browser keep the images the right size? I have been testing it mostly in chrome using Dev Tools and setting it up to emulate iphone 4 and the images don't scale at all, it displays them as they are supposed to be.
I took a couple screen shots and the iphone width its taking is 640px, but my media query is as follows:
#media screen and (max-device-width: 479px)
What am I doing wrong? I can't find a solution to this. I need the pixel font images to stay pixely. Same for my splash screen. Screen shots available if you need....
You probably haven't been seeing the issue because your emulator isn't retina display, and therefore your images aren't being scaled, but your device is probably an iPhone 4 or later, and therefore has retina display, which assumes it needs to scale images unless directed otherwise.
Regarding devices with retina display, image resolution works in the browser similarly as it does on the device. If you want crisp images, you need to specify a separate image for the retina display. This stack overflow post has a few suggestions for implementing it: Apple retina support for images in HTML
Suppose that I want to render two capital 'T's, both precisely one inch tall. One 'T' is rendered on a Macbook Pro with Retina Display (220 DPI, CSS pixel ratio 2), and the other is rendered on an iPhone 4S (326 DPI, CSS pixel ratio 2). In order to do this, I set the font size on the Macbook Pro to 220 / 2 = 110px, and the font size on the iPhone 4S to 326 / 2 = 163px. However, the two 'T's are still not the same size. Why? Also, what can I do to make sure that the two 'T's are of the same physical size?
Edit: Yes, I am using media queries. I didn't want to get into the gory details, but I hinted at it by mentioning the use of the CSS pixel ratio. Assume that I am somehow magically able to obtain the DPI and CSS pixel ratio of the client monitor in all cases.
Thanks for your insight!
I think the concept under which this has to be done is media queries and there is no mention that you are doing this using media queries. You can target both iPhone as well as iOS using media queries to get the desired effects:
More is here