Update (June 2016): I now try to support touch and mouse input on every resolution, since the device landscape is slowly blurring the lines between what things are and aren’t touch devices. iPad Pros are touch-only with the resolution of a 13″ laptop. Windows laptops now frequently come with touch screens. Other similar SO answers … Read more
@media at-rules and media queries cannot exist in inline style attributes as they can only contain property: value declarations. As the spec puts it: The value of the style attribute must match the syntax of the contents of a CSS declaration block The only way to apply styles to one specific element only in certain … Read more
add this line in <head>
Let’s break down your examples one by one. This one is saying for a window with a max-width of 632px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases. This one is saying for a device with a screen and a window with max-width of 632px … Read more
iPhone 6 Landscape@media only screen and (min-device-width : 375px) // or 213.4375em or 3in or 9cm and (max-device-width : 667px) // or 41.6875em and (width : 667px) // or 41.6875em and (height : 375px) // or 23.4375em and (orientation : landscape) and (color : 8) and (device-aspect-ratio : 375/667) and (aspect-ratio : 667/375) and (device-pixel-ratio … Read more
Use a comma to specify two (or more) different rules: From https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in a list is true, the entire media statement returns true. In other … Read more
I don’t have an iPad Pro but this works for me in the Chrome simulator.
All three of these were helpful tips, but it looks like I needed to add a meta tag: Now it seems to work in both Android (2.2) and iPhone all right…
I’ve found the best method is to write your default CSS for the older browsers, as older browsers (including IE 5.5, 6, 7 and 8) can’t read @media. When I use @media, I use it like this: But you can do whatever you like with your @media. This is just an example of what I’ve found best for … Read more