Skip to content

Instantly share code, notes, and snippets.

@egoens

egoens/iphones-responsive.css

Last active August 29, 2015 14:22
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save egoens/555a5abc6712a52d14a2 to your computer and use it in GitHub Desktop.
Save egoens/555a5abc6712a52d14a2 to your computer and use it in GitHub Desktop.
Download ZIP
General responsive containers for iPhones
Raw
iphones-responsive.css
/***********
iPhone 2G-4S
************/
/* iPhone 2G-4S In Portrait & Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
/* iPhone 2G-4S In Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
}
/* iPhone 2G-4S In Portrait */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) {
}
/***********
End iPhone 2G-4S
************/
/***********
iPhone 5
************/
/* iPhone 5 In Portrait & Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
}
/* iPhone 5 In Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
}
/* iPhone 5 In Portrait */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
}
/***********
End iPhone 5
************/
/***********
iPhone 6 And iPhone 6+
************/
/*iPhone 6 Portrait*/
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation : portrait) {
}
/*iPhone 6 landscape*/
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation : landscape) {
}
/*iPhone 6+ Portrait*/
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation : portrait) {
}
/*iPhone 6+ landscape*/
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation : landscape) {
}
/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px) {
}
/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px) and (orientation : portrait) {
}
/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px) and (orientation : landscape) {
}
/***********
End iPhone 6 And iPhone 6+
************/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment