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.
Related
I need to make specific changes to the page layout for iPads 3.There is any media query css for I-pad3 9'7inch screen 1536 x 2048 pixels (~264 ppi pixel density)
The media query itself doesn't appear to have changed significantly from the previous iterations of the iPad with the exception that pixel ratio is set to handle retina displays via the -webkit-min-device-pixel-ratio attribute :
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
/* Place iPad 3 Styles Here */
}
These higher-resolution retina displays generally still report the same device-width as earlier versions, but you can think of the previously mentioned attribute effectively as a "multiplier" to your minimum and maximum values.
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.
IPad resolution is 768*1024, but a mobile maybe 720*1024. I want to set larger font for device, so that its size in pt is same as pad. for example:
#media (min-width: 700px) {
#div_test{
font-size:22px;
}
}
how to modify the #media condition?
#media (min-width: 700px){
/*code*/
}
The min-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.
Here is a list of media queries for ipad
This media query targets all ipads.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
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
I am using the following media query for my site
#media (max-width: 976px) {}
I am finding that when i view my site
http://46.32.253.11/
on the ipad 3 in landscape mode the navbar button that appears in portrait mode doesn't work and my navbar is split over 2 lines.
Do i need to add another media query, or can i edit the existing one. If so what changes would i need to make.
Im really new to media queries so if anyone has an excellent resource they would like to share that would be great
Have a peek at this css-tricks article which has a bootstrap for standard device resolutions: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
There are specific media queries for landscape and portrait listed below:
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
I want to stress, though, that from a "mobile-first" approach, you shouldn't be designing for devices, but rather for resolution breakpoints that fit your design. Try starting with a very small resolution, like 320 x 480. From there, increase the browser width until that design "breaks" (i.e. looks like crap) and then add a breakpoint at that resolution. A handy way of checking the browser width is to open up your developer console in Chrome (or Firebug for Firefox) and typing in document.body.offsetWidth and hitting enter. That will show the pixel amount of the width of the browser. Keep adding / rearranging things until you get the experience you want on a wide range of devices.
The web is moving forward. This means that we have to think about smartphones all the way up to TVs and projectors. Design your site with that in mind.
I hope this helps.