Menu
Possible Duplicate:
iPhone 5 CSS media query
The iPhone 5 tech spec states screen dimension of 1136 by 640
My question is this,
For landscape, ff I am to use the max-device-width of 568px refer to http://www.stephentgilbert.com/mediaqueries/#iPhone
can you explain why that works when the dimension stated on the iPhone 5 site says the width would be 1136px
I know I'm mixing up with some of the fundamentals here. I'd appreciate if you could provide me with a proper explanation and perhaps link me to relevant online resources.
821
only screen: The only keyword is used to prevent older browsers that do not support media queries with media features from applying the specified styles. Syntax: @media only screen and (max-width: width) Example 2. <! DOCTYPE html>
If you want to include both min and max width for responsiveness in the browser, then you can use the following: @media (min-width: 768px) and (max-width: 992px){...} @media (min-width: 480px) and (max-width: 767px) {...}
320px — 480px: Mobile devices. 481px — 768px: iPads, Tablets. 769px — 1024px: Small screens, laptops.
The screen resolutions of different devices are listed below: Mobile (Smartphone) max-width: 480px.
The iPhone's Retina display means the 1136x640 screen uses 568x320 virtual pixels. Each CSS pixel is made up of four physical pixels (2x2).
Since no one who says "give me a 100px wide div here" in CSS wants it to show up at half-size on a higher-resolution device like a Retina display, it doesn't use the physical pixels as CSS pixels.
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
