This question already has answers here:
CSS media queries for screen sizes
(3 answers)
Closed 8 years ago.
I want to test a website on a plasma screen. This screen is 55 inches wide, but has a resolution of 1024x768. So for testing purposes, I changed my laptop's resolution from 1600x936 to 1024x768, and the site that was being tested displayed the same results.
I want to be able to target this 1024x768 screen resolution (not the device width or max, or min-width) via media queries.
Can someone please help me with this? Again, my laptop is 17 inches widescreen, and the default display is 1600x960. I want to test a website for responsive design for 1024x768 resolution. Need an appropriate media query for that.
I think this might be what you want: http://www.broken-links.com/2012/07/13/using-media-queries-to-test-device-resolution/
Edit:
I don't believe this is a duplicate, as it deals with the need to target the resolution and specifically NOT the device size.
Anyhow, click on the link above for a full analysis of this problem, but basically, I'll paraphrase here.
You can use the devicePixelRatio property to find out the DPR of your current device; unfortunately it’s not supported in Firefox for some reason, but it’s in all other major browsers:
console.log(window.devicePixelRatio);
Once you have your DPR (I’m going to use 1.5 as an arbitrary number throughout this article) you can start using it in your media query logic.
#media (-webkit-min-device-pixel-ratio: 1.5) {}
All of this being the case, the minimum number of media features you need to test for device resolution across the major browsers is two:
#media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5) {}
Related
I'm trying to make sense of CSS media queries for a mobile-only page. My final goal is to have the font size on my page be about the same in physical units (inches/centimeters) regardless of decice physical size and resolution. But what I see reported by the media queries has nothing to do with the device specs.
I'm testing on an HTC One M7, which is 1080x1920, 467dpi - manufacturer specs.
The precise numbers reported by the media queries is:
width (as reported by min-width/max-width): 1080px
resolution (as reported by min-resolution/max-resolution): 288dpi or 3.0dppx
First, shouldn't the pixels reported for the width be in logical pixels, not physical? I mean both iPhone3GS and iPhone4 report a width of 320px, even though the latter is actually 640 physical pixels. See How to target iPhone 3GS AND iPhone 4 in one media query?
How should I know what the browser meant by "pixel" when it matches a given query?
Second, the reported 288dpi has nothing to do with the actual device 467dpi. And how is this 3dppx calculated?
This is an interesting question. I'm familiar with the way media queries work for iOS devices, but less so with Android devices. I'll take a stab at it anyway.
Let's start with dppx, which you probably know is a measurement of how many physical dots fit into each pixel (let's use your terms "physical pixels" and "logical pixels"). 3dppx means that each of the screen's logical pixels is composed of a 3x3 grid of physical pixels. To use iOS terminology, your display has a #3x resolution, like the iPhone 6 Plus.
You can see a list of various device dppx values here:
http://bjango.com/articles/min-device-pixel-ratio/
(The site refers to -webkit-min-device-pixel-ratio, which predates dppx, but I think means exactly the same thing.)
If you know a device's physical width and dppx you can use the following formula to calculate its logical width, which you can use in media queries:
device width / dppx = logical width
For your device this should be:
1080 / 3 = 360
I would therefore expect the following media query to target your device in portrait mode:
#media only screen and (max-width: 360px) { }
As for the 288dpi: A 1dppx device has 96dpi, and 3 x 96 = 288. I'm not sure where the manufacturer's 467dpi comes from, but it doesn't seem relevant to writing media queries.
'Resolution' seems to be often used as a term to describe viewport dimensions/device pixels expressed in terms of a x b:
e.g. 960px x 640px (for iPhone 4)
However from what I understand that's a bit of a misappropriation as used in media queries, at least, resolution denotes the density of pixels of an output device.
Can I confirm that the media feature 'resolution' is essentially expressing pixel density?
i.e. the diagonal pixel resolution of the display divided by diagonal size (in inches)
So, taking the example of the iPhone 4 again, the resolution would be defined as 330 ppi? (or 330dpi)
I'm essentially interested to know whether the resolution feature could be used to target a device(s) with specific pixel density.
In Brian LePore's
article he suggests mobile devices round the actual dpi value to "120 DPI for a low density screen, 160 DPI for a medium density screen, 240 DPI for high density, and finally 320 DPI for extra high density".
Is this correct and would that mean that you can't actually target a specific dpi?
i.e.
#media screen and (resolution: 330dpi) {}
and
#media screen and (resolution: 311dpi) {}
will ultimately both be treated as /rounded to
#media screen and (resolution: 320dpi) {}
Yes, resolution is definitely expressing pixel density.
If you want to be as targeted as possible for iPhones, you might try using several of the available queries, and setting the values specifically to iPhone specs.
iPhone 5 would be something like this:
#media screen
and (-webkit-min-device-pixel-ratio : 2)
and (device-aspect-ratio : 40/71)
and (device-height : 568px)
and (device-width : 320px)
You can test media queries of different devices by going to the page http://pieroxy.net/blog/pages/css-media-queries/test-features.html on that device. The only strange result I'm getting is that it doesn't return a resolution value for iPhone 5. However, I'd be surprised if the above query targeted anything other than iPhone 5. (Sorry I don't know more specifics about resolution to answer your second question.)
More info at:
MDN: Media Queries
iPhone 5 CSS media query (device-aspect-ratio for iPhone)
Media features for common devices
When it comes to using media queries, I see max-width and max-device-width used a lot to target "small screen" devices, or smartphones, but why not use the media query for resolution?
For example, #media screen and (min-resolution: 230dpi) allows me to write CSS to target some smartphones, such as the Galaxy S Glide SGH I927R, which has 480 x 800 pixels, 4 inches (~233 ppi pixel density)
Conversely, I would have to use #media screen and (max-device-width: 480px) and (orientation: portrait) plus #media screen and (max-device-width: 800px) and (orientation: landscape).
It seems that min-resolution would save me some time. I have read several articles and blogs, but I do not see anyone advocating for resolution.
There must be an obvious point that I am missing - I am not a professional web designer - but what is "wrong" with the approach of using resolution? What makes width or device-width better to target "small screens."
My favorite site so far on width vs device-width has been:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
Maybe the reason that I had to use a max-device-width of 800px, which seemed "excessive" for smartphones to me is because I did not use the meta tag viewport. I read in the article above on page 3 the following:
"It means that our CSS media queries will match the dimensions of the "zoomed out" device's, and not its actual (ie: 980px for device-width on the iPhone instead of 320px). So whenever you're optimizing a webpage for mobile devices, the first step is to define a particular META tag on your page to alter/ disable the "zoom in" behaviour of mobile browsers..."
Perhaps after defining the viewport, the max-device-width would make more sense than using Resolution in the media queries?
Chris Coyier with CSS-Tricks.com and Jamie Bicknell of Rentedsmile Web Design put together a great article on the CSS-Tricks website.
I will summarize their main points and post a link to the article at the bottom.
The most popular analytics software in the world is Google Analytics which is why most of us are so concerned about resolution. Unfortunately this does not account for browser window size which is the only item to account for when many of us are using 27" screens, multiple screens, 40+ devices, and frankly, what percentage of people ever use the full window? I know I don't.
Chris Coyier points out only ~61% of users view within 200px of full screen meaning if you are 'pixel-perfect' then in the eyes of your consumer -- you are not. Your website will most likely be broken. (An estimated 0.85% using full screen)
This means screen resolution is totally irrelevant to the cause which are our end-users.
See the full article here for their complete breakdown and illustration-rich analysis
http://css-tricks.com/screen-resolution-notequalto-browser-window/
I wrote some CSS code to make an HTML page fit better in mobile browsers. To be sure that my CSS apply only on mobiles, I use to following media query :
#media only screen and (max-device-width: 480px)
As an iPhone developer, I tested on this device and it works really well. But I want my CSS to be use on all kind of devices (Android, Windows Phone, etc).
What would be a good resolution that would fit most of smartphone of these days? Or do I need a more complex media query?
Recently I started to work with Responsive Web Design and Media Queries, I didn't find a unique "magic" query, but after reading a lot of articles and a couple of books, I've adopted the Mobile First way to develop web pages, and I'm using some common Media Queries, here the breakpoints:
320 px Mobile portrait
480 px Mobile landscape
600 px Small tablet
768 px Tablet portrait
1024 px Tablet landscape/Netbook
1280 px & greater — Desktop
(Taken from http://fluidbaselinegrid.com/)
Hope it helps
Updated: Mars 2016
Projects are all different, so it's hard to set a global rule that will fit them all. If you're looking for one, here's an example that someone smarter than me came up with and that I've used before:
xsmall: (max-width: 479px),
small: (max-width: 599px),
medium: (max-width: 767px),
large: (max-width: 1024px),
largeOnly: (min-width: 768px) and (max-width: 1024px),
xxl: (min-width: 1200px),
tall: (min-height: 780px),
Note the lack of references to devices, screen sizes or orientation on their names. The size of a 'tablet portrait' shouldn't really matter to us as we should try to make things responsive and look good on any screen size, not simply adaptive to a few screen sizes.
Yes, it's important to know the most common screen sizes and avoid crazy media queries, but in the end, your design may start to beg for adjustments at 530px instead of 480px or something like that. So why not?
Now, on my personal preferences: I keep media queries in mind all the time, but at first I tend to ignore device sizes almost completely. I also prefer the desktop-first approach cause I find it easier to adjust layouts to smaller sizes (ie.: removing not so important things from the page, reducing sizes, etc.).
Original Answer
Some people tend to ignore device sizes completely. They say you should check where your layout starts to break and create media queries only when necessary. Others will check for different device sizes, as you're doing now. But then you'll have a media query for 320px, another for 480px, and so on... You may go crazy with that, and maybe it's not even necessary depending on your layout!
So, for now I'm trying to do both. I tend to ignore device sizes at first and will create some media queries only when necessary (when layout breaks), until it looks good for sizes like 960px and bigger, and also for smaller screen sizes, like 320px (the smallest device size I care about).
Will the following media queries behave exactly same on mobile devices and computers or there's any difference?
#media only screen and (max-width: 480px),
screen and (max-device-width: 480px){
...
}
and
#media (max-width: 480px) {
..
}
No, they will not. This is because device-width is not the same as width. If your media query has just width they'll behave the same, but when you introduce device-width you'll get different results. Refer to my response to this question for more info: CSS stylesheet that targets iPhone iPad not working
Media Queries themselves will behave the same. But when they query different things, they're likely to get different answers.
"only screen" usually works, but a small number of mobile devices classify themselves as 'handheld' rather than 'screen'. (My personal inclination is "only all" is better, partly because it includes handheld and partly because it provides the same CSS to print and presentation [i.e. projectors] too.)
For a first approximation, min/max-width is the logical current window (which may have been set by the user), while min/max-device-width is the physical screen. But many mobile devices will not return what you read in their sales specs for screen size. Many of them include a concept of a "viewport" ...something you can modify (with <meta name="viewport" content="...), but which usually defaults to something much larger than the actual screen dimensions. Thoroughly understanding the "viewport" will clarify (and possibly answer too) your query.
Also since mobile devices are often viewed at a much closer distance, they need much denser pixels in order to provide an equivalent user experience. (The iPad's "retina" display exemplifies the trend.) As a result of the very high pixel density, small physical dimensions can have notably large pixel dimensions anyway. (My own inclination is to think you'll ultimately have to take density into account in your Media Queries in order to produce really sensible results.)
In any case, for an alternative to Media Queries that keeps the concept but implements it rather differently, you might want to look at http://www.ckollars.org/alternative-to-media-queries.html