CSS hack for iPhone only
Many time we need to target browser or device specific CSS to fix some problem. Here i am showing to target css only for iPhone devices. I’ve posted these media queries to help designers & developers save some time searching.
For iPad CSS media queries hack you can view complete list here.
CSS media query target only iOS devices
|
1 2 3 4 5 6 7 |
@supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */ } @supports not (-webkit-overflow-scrolling: touch) { /* CSS for other than iOS devices */ } |
iPhone 6 in portrait & landscape
|
1 2 3 |
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { /* STYLES GO HERE */} |
iPhone 6 in landscape
|
1 2 3 4 |
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) { /* STYLES GO HERE */} |
iPhone 6 in portrait
|
1 2 3 4 |
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) { /* STYLES GO HERE */ } |
iPhone 6 Plus Media Queries
iPhone 6 Plus in portrait & landscape
|
1 2 3 |
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) { /* STYLES GO HERE */} |
iPhone 6 Plus in landscape
|
1 2 3 4 |
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) { /* STYLES GO HERE */} |
iPhone 6 Plus in portrait
|
1 2 3 4 |
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) { /* STYLES GO HERE */ } |
iPhone 5 & 5S Media Queries
iPhone 5 & 5S in portrait & landscape
|
1 2 3 |
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { /* STYLES GO HERE */} |
iPhone 5 & 5S in landscape
|
1 2 3 4 |
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { /* STYLES GO HERE */} |
iPhone 5 & 5S in portrait
|
1 2 3 4 |
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { /* STYLES GO HERE */ } |
iPhone 5 Resolution
|
1 2 3 4 5 6 7 |
Screen Width = 320px (CSS Pixels) Screen Height = 568px (CSS Pixels) Screen Width = 640px (Actual Pixels) Screen Height = 1136px (Actual Pixels) Device-pixel-ratio: 2 |
iPhone 4/4S Resolution
|
1 2 3 4 5 6 7 |
Screen Width = 320px (CSS Pixels) Screen Height = 480px (CSS Pixels) Screen Width = 640px (Actual Pixels) Screen Height = 960px (Actual Pixels) Device-pixel-ratio: 2 |
[paypal-donation]
