I came across several ways and questions about the sizes of the ipad and iphone and how to use different css. Is it really necessary, especially now with more versions of the ipad and iphone to have a different background for each and every device?
Almost every answer/site about this problem tells the user to use the resolution 1024 for an iPad but according to Apple's site the latest iPad has a resolution of 2048 x 1536 pixels?
So do I need to make one background with 1024 in width for iPad 2 (or whatever), then one with 2048 for iPad 3, another one for iPhone etc or is there an easier solution?
I thought "background-size: cover" would be the solution for every resolution (since it scales automatically) but it apparently isn't since it doesn't seem to work on an iPad.
So do I need to make one background with 1024 in width for iPad 2 (or
whatever), then one with 2048 for iPad 3, another one for iPhone etc
No. Despite the different device resolutions, they still follow the original numbers in terms of targeting them with CSS. So all iPads respond to device-width: 1024px, and iPhones still stick with 320px, even if they now pack in far more pixels.
The only thing to be aware of is that iPhone5 is a little taller so it responds to 320 x 560px.
Anyhow, in terms of background-size, all of this is kind of irrelevant, because the whole point of it is that it can size the image appropriately to cover any screen if you use background-size: cover.
Related
I'm a bit confused about CSS pixels and whether they translate into pure resolution or physical width of devices.
My question is, will content displayed on a 1080p 13 inch laptop be the same as content on a 4k 13 inch laptop? Or will everything be scaled down?
(I'm using (max-width)/(min-width) media queries and not (max-device-width)/(min-device-width)
I'd be glad if you guys could clear this up for me.
Yes, it should render the same.
CSS uses “px” to relate “...the pixel unit to the reference pixel...”, thus a single CSS “px” could represent more than one physical pixel as different devices (ie. HD vs. 4K) have different pixel densities.
A single “px” in CSS should always be about 1/96 of an inch though. You may see variations in rendering based on browser rendering and/or monitor resolution quirks.
For most cases, desktop and laptop displays will use the same pixels their resolution is set to for CSS pixels. In these cases, a 4k 13" laptop without scaling will display more content, at a smaller physical size, than a 1080p 13" laptop.
That said, there are some cases where this isn't quite true. With mobile devices the browser will use a scaled down resolution so that elements are rendered at a more natural physical size. This scaling can be determined by the devicePixelRatio - which is the ratio of physical pixels to CSS pixels.
Further reading about devicePixelRatio: https://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
Details on sizes for mobile devices: https://mydevice.io/devices/
So I have noticed that a website I created looks bigger in Chrome than it does in IE11.
I couldn't figure out why. The zoom was set to 100% in both browsers.
If I go to http://viewportsizes.com/mine/ it reports the following viewport sizes:
Chrome - 1280 × 619 and IE11 - 1920 × 906
My question is why does this happen? How can the two browsers report back two largely different sizes?
Please tell me what device are you using? (IE Version, Windows Version, Device size)
Probably you use a mobile device (like 10 inch tablet) with Full HD resolution. Unfortunately I have no such Windows device, but this is a common behavior of mobile devices and chrome/firefox.
The reason shortly is that viewport does not represent the screen resolution and is mostly optimized for better user experience. Here I mean, that for an 10 inch device, browsing webpages in full resolution would result in a non readable webpage, a short example you can find here
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml
More details about viewport you can find here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Note that IE is 'integrated' with the operating system, meaning, that DPI settings on your device also should have influence on IE (icon text size on your desktop and context menu text size is probably the same as a text in IE).
I like to use Firefox 'Responsive Design View' to emulate multiple mobile devices on my desktop. But I'm in doubt about one thing.
As far as I understand iPhone with Retina use 2 physical pixels per one CSS pixel. And Firefox 'Responsive Design View' do not. That mean that if I want to emulate iPhone 4 screen with resolution 960x640 I actually should use FF RDV preset 480x320 (and add preset 568x320 for iPhone 5). Right?
You're right that you should use the 480x320 viewport size, as all sizing measurements are based on logical pixels not the screen's physical pixels.
If you want to thoroughly test the site for retina content, and you don't have a retina screen, change the value of layout.css.devPixelsPerPx in the about:config page to 2. -1 is default. Note the UI will all look huge, but this will properly kick in pixels per px media queries, etc.
I just tried the devPixelsPerPx tweak along with RDV, and it works well - RDV looks like a great tool!
I am looking to make my websites appear the same size on retina and other higher resolution screens that they do on standard screens. That is to say make them optically look the same but with more detail on the higher resolution screens.
So if we had a screen with four times the number of pixels per inch then I would want the height and width of elements to be twice the normal CSS pixel measurements as well as doubling the font size.
I looked into this and it appears that the solution detects the DPI and then loads different CSS.
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
The thing is these screens all have different DPIs.
iPhone 4/4S and iPod Touch (4th generation) -- 326
iPad (3rd)/4th generation) -- 264
MacBook Pro with Retina Display 15" -- 220
MacBook Pro with Retina Display 13" -- 227
So if we had a an element with a height of say 24px. I would like it to adjust its height to accurately fit whatever the pixel ratio is. IE. do the Maths and do it for all elements.
You leave the image dimensions untouched, you just give it the appropriate source.
You can also put different queries in, see here:
http://css-tricks.com/snippets/css/retina-display-media-query/
I would recommend that you read about both dpi and dppx. When you look at Retina displays you need to think about both CSS-pixels and physical pixels, as I'm sure you know.
If you want to have the componenets of the website appear in the same physical size, then I think dpi is the way to go but and add different CSS for the different dpi levels you want to cover bu if you want to differentiate between Retina and normal display you need differentiate between dpi and dppx (dots-per-physcial-inch)
These articles both helped me:
https://developer.mozilla.org/en-US/docs/Web/CSS/resolution
http://drewwells.net/blog/2013/working-with-dppx/
this is mentioned every article about mobile web, but nowhere I can found an explanation of what exactly does this attribute measure.
Can anyone please elaborate what does queries like this check?
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
//high resolution images go here
}
Short answer
The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical linear resolution.
Physical resolution: 960 x 640
Logical resolution: 480 x 320
The formula is:
Where:
is the physical linear resolution
and:
is the logical linear resolution
Other devices report different device pixel ratios, including non-integer ones. For example, the Nokia Lumia 1020 reports 1.6667, the Samsumg Galaxy S4 reports 3, and the Apple iPhone 6 Plus reports 2.46 (source: dpilove). But this does not change anything in principle, as you should never design for any one specific device.
Discussion
The CSS "pixel" is not even defined as "one picture element on some screen", but rather as a non-linear angular measurement of viewing angle, which is approximately of an inch at arm's length. Source: CSS Absolute Lengths
This has lots of implications when it comes to web design, such as preparing high-definition image resources and carefully applying different images at different device pixel ratios. You wouldn't want to force a low-end device to download a very high resolution image, only to downscale it locally. You also don't want high-end devices to upscale low resolution images for a blurry user experience.
If you are stuck with bitmap images, to accommodate for many different device pixel ratios, you should use CSS Media Queries or the HTML picture Element to provide different sets of resources for different groups of devices. Combine this with nice tricks like background-size: cover or explicitly set the background-size to percentage values.
Example
#element { background-image: url('lores.png'); }
#media only screen and (min-device-pixel-ratio: 2) {
#element { background-image: url('hires.png'); }
}
#media only screen and (min-device-pixel-ratio: 3) {
#element { background-image: url('superhires.png'); }
}
This way, each device type only loads the correct image resource. Also keep in mind that the px unit in CSS always operates on logical pixels.
A case for vector graphics
As more and more device types appear, it gets trickier to provide all of them with adequate bitmap resources. In CSS, media queries is currently the only way, and in HTML5, the picture element lets you use different sources for different media queries, but the support is still not 100 % since most web developers still have to support IE11 for a while more (source: caniuse).
If you need crisp images for icons, line-art, design elements that are not photos, you need to start thinking about SVG, which scales beautifully to all resolutions.
Device Pixel Ratio == CSS Pixel Ratio
In the world of web development, the device pixel ratio (also called CSS Pixel Ratio) is what determines how a device's screen resolution is interpreted by the CSS.
A browser's CSS calculates a device's logical (or interpreted) resolution by the formula:
For example:
Apple iPhone 6s
Actual Resolution: 750 x 1334
CSS Pixel Ratio: 2
Logical Resolution:
When viewing a web page, the CSS will think the device has a 375x667 resolution screen and Media Queries will respond as if the screen is 375x667. But the rendered elements on the screen will be twice as sharp as an actual 375x667 screen because there are twice as many physical pixels in the physical screen.
Some other examples:
Samsung Galaxy S4
Actual Resolution: 1080 x 1920
CSS Pixel Ratio: 3
Logical Resolution:
iPhone 5s
Actual Resolution: 640 x 1136
CSS Pixel Ratio: 2
Logical Resolution:
Why does the Device Pixel Ratio exist?
The reason that CSS pixel ratio was created is because as phones screens get higher resolutions, if every device still had a CSS pixel ratio of 1 then webpages would render too small to see.
A typical full screen desktop monitor is a roughly 24" at 1920x1080 resolution. Imagine if that monitor was shrunk down to about 5" but had the same resolution. Viewing things on the screen would be impossible because they would be so small. But manufactures are coming out with 1920x1080 resolution phone screens consistently now.
So the device pixel ratio was invented by phone makers so that they could continue to push the resolution, sharpness and quality of phone screens, without making elements on the screen too small to see or read.
Here is a tool that also tells you your current device's pixel density:
http://bjango.com/articles/min-device-pixel-ratio/
Boris Smus's article High DPI Images for Variable Pixel Densities has a more accurate definition of device pixel ratio: the number of device pixels per CSS pixel is a good approximation, but not the whole story.
Note that you can get the DPR used by a device with window.devicePixelRatio.
https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
-moz-device-pixel-ratio
Gives the number of device pixels per CSS pixel.
this is almost self-explaining. the number describes the ratio of how much "real" pixels (physical pixerls of the screen) are used to display one "virtual" pixel (size set in CSS).
Device Pixel Ratio has direct correlation with Pixel density of the device.
Best concise description I could find:
Purpose of DPR is to keep consistent size of CSS pixels and therefore
consistent size of letters, symbols, images and everything else on
screen, across a variety of devices with different physical pixel
densities.
Source: screenresolutiontest