I keep trying and trying, but my media queries are not working for iPhones.
#media only screen and (max-device-width: 667px) {}
It's supposed to support all the iPhones, up to the 6 Plus. Can someone help?
In terms of targeting just certain versions of the iPhone / iPhone 6, this post provides a helpful response: iPhone 6 and 6 Plus Media Queries
To support all small devices, under the 667px mark, you can generalize your media query to:
#media only screen and (max-width: 667px) {
...
}
If you are testing this on your desktop, just with a small window size, the reason the max-device-width may have not been working for you is:
width versus device-width
In CSS media the difference between width and device-width can be a bit muddled, so lets expound on that a bit. device-width refers to the width of the device itself, in other words, the screen resolution of the device.
Source: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
Related
Can someone tell me the width and height in px (as used by CSS in mobile mode) for the Pixel and Pixel LG?
Surprised that the Pixels do not yet appear as options in Chrome's emulator! Note that I'm not asking for the tech specs that can be found on the Pixel website.
The specs for the Google Pixel are :
1140px x 2560px
441dp x 731dp
16:9 ratio
If you want to target it with media queries:
#media only screen and (-webkit-min-device-pixel-ratio: 1.77) and (orientation:landscape) // or (orientation:portrait) {}
Works for me, but it also reach other mobiles like the recent Galaxy's.
Will standard media queries such as:
#media only screen and (min-width: 0px) and (max-width: 820px) {}
work on a device that is retina display?
I have read many articles on this, but most are about specifying the retina display css rather than how standard media queries developed for 96 dpi (the original size) will look on devices that have 300 dpi (retina display).
The main assurance I am looking for is: besides not taking full advantage of the quality being offered by the device, will the layout look the same if it was a 96dpi screen or 300dpi for example?
Much obliged for any help!
CSS pixel is not hardware pixel. This ARTICLE explains the difference.
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
Absent references to pixel density, it will target CSS styles to any iPad, with or without a Retina display, because it’s referring to CSS pixels, and in those terms the two are the same.
I have coded a responsive website, in which I have CSS media queries to detect the screen size(pixels) of the device the user is navigating with.
Just standard medias. Example:
#media (max-width: 1199px){
/*code*/
}
#media (max-width: 991px){
/*code*/
}
#media (max-width: 767px){
/*code*/
}
When I test my website with my mobile, which is a Samsung Galaxy S4 with 1920x1080 pixels my website shows me the mobile version, which is in this case the #media query with a max-width of 767px.
I understand that most things would be too small to read or be seen if my mobile respected exact measures like 12px font size.
So my question is, how do I control which version of my website is shown on high resolution devices, because pixels media queries aren't working in my case.
#media (max-width: 1199px){
/*code*/
}
The max-width property in the media query works a little different. It is not the resolution of the screen. It is equivalent css pixel.
Here are a couple of articles.
A pixel identity crisis.
A pixel is not a pixel is not a pixel.
moz media query page.
If you want to target device resolution you should use
#media all and (max-device-width: 320px) {
}.
max-device-width:This property measures the device-width. If you write css using media query using this it will get a little complex (mobiles tabs and even desktops can have 1080p resolution screens). In order to target device resolutions you might have to look into properties like -device-pixel-ratio , orientation and device-height to give better control of layouts
The problem might be that you didn't include a viewport meta-tag
<meta name="viewport" content="width=device-width">
I am using the following media query to target iPads:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* style */
}
From the testing I have done, this seems to work with all iPads (retina and non-retina). Why is this the case?
iPads without retina are 1024x768, but iPads with retina are 2048x1536. My media query does not include a 'device-pixel-ratio' property, so why is this targeting iPads with retina displays?
Although the Retina display has a resolution of 2048x1536, its device-pixel ratio of 2 means that the resolution as far as CSS is concerned is still 1024x768 (this is known as "CSS pixels"). The pixels are simply doubled when rendering pages onto the display, independently of how pixels are calculated by the browser for the purposes of CSS.
This is why the device-pixel-ratio/resolution media feature exists to distinguish high-resolution variants of specific devices.
So I always seem to do two identical media queries for smartphones, one being the min- or max-width, and the other being the min- or max-DEVICE-width (to target the iPhone and stuff)...
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
// Some awesome phone-specific CSS
}
#media only screen
and (min-width : 320px)
and (max-width : 480px){
// THE SAME awesome phone-specific CSS as above
}
Now I can't help but feel as though this is not the most efficient way to do things... Especially if I'm moving a lot of stuff around/restyling my site/application to be phone specific. Also especially when I have to do two more for the tablet sizes.
Now do I really need both? Does it matter and what exactly is the difference?
The difference between width and device-width can be a bit unclear. I'll try to explain.
device-width refers to the width of the device itself, in other words, the screen resolution of the device. Lets say your screen's resolution is 1280x800. This means the screen is 1280 pixels across, so it has a device-width of 1280 pixels.
In contrast, width refers to the width of your browser's viewport size.
In most cases width is more versatile when it comes to creating responsive webpages (and it is the method I would recommend you'd use), though device-width could be useful when you wish to specifically target mobile devices (and not desktops with a very small browser window).
DEVICE width will target only DEVICES and not desktops, u wouldnt hv any desktop/laptop of width 320x480, so u can use DEVICE width.
You could probably just use max-width: 767px this way you would target everything below an iPad.
I would also just specify dynamic widths so you don't have to differentiate between single devices.