CSS Conditions for Mobile Devices

Tested and vetted CSS3 Media Queries
(we use them here)

Frameworks
Frameworks like Bootstrap supply comprehensive responsive design
Nevertheless, the need for use-case specific .css is often required

Warning
Additional code may be required to be fully responsive on certain mobile devices - e.g. - iOS utilizes viewport


/* Shared/Common */
@media only screen
and (max-device-width: 1024px)
and (max-device-height: 1024px) {
    p {    }
}

@media only screen
and (orientation:portrait)
and (max-device-width: 1024px)
and (max-device-height: 1024px) {
    p {    }
}

@media only screen
and (orientation:landscape)
and (max-device-width: 1024px)
and (max-device-height: 1024px) {
    p {    }
}

/* Galaxy S5 */
@media only screen
and (max-width: 360px)
and (max-height: 640px)
and (orientation:portrait) {
   p {    }
}

@media only screen
and (max-height: 360px)
and (max-width: 640px)
and (orientation:landscape){
  p {    }
}

/* Nexus 5x */
@media only screen
and (min-width: 361px)
and (max-width: 411px)
and (min-height: 641px)
and (max-height: 731px)
and (orientation:portrait) {
   p {    }
}

@media only screen
and (min-height: 361px)
and (max-height: 411px)
and (min-width: 641px)
and (max-width: 731px)
and (orientation:landscape){
   p {    }
}

/* Nexus 6p */
@media only screen
and (min-width: 412px)
and (max-width: 435px)
and (min-height: 732px)
and (max-height: 773px)
and (orientation:portrait) {
    p {    }
}

@media only screen
and (min-height: 412px)
and (max-height: 435px)
and (min-width: 732px)
and (max-width: 773px)
and (orientation:landscape){
   p {    }
}

/* iPhone 5 */
@media only screen
and (max-width: 320px)
and (max-height: 568px)
and (orientation:portrait) {
    p {    }
}

@media only screen
and (max-height: 320px)
and (max-width: 568px)
and (orientation:landscape){
    p {    }
}

/* iPhone 6 */
@media only screen
and (min-width: 321px)
and (max-width: 375px)
and (min-height: 569px)
and (max-height: 667px)
and (orientation:portrait) {
    p {    }
}

@media only screen
and (min-height: 321px)
and (max-height: 375px)
and (min-width: 569px)
and (max-width: 667px)
and (orientation:landscape){
    p {    }
}

/* iPhone 6 Plus*/
@media only screen
and (min-width: 376px)
and (max-width: 414px)
and (min-height: 668px)
and (max-height: 736px)
and (orientation:portrait) {
    p {    }
}

@media only screen
and (min-height: 376px)
and (max-height: 414px)
and (min-width: 668px)
and (max-width: 736px)
and (orientation:landscape){
    p {    }
}

/* iPad*/
@media only screen
and (min-width: 750px)
and (max-width: 768px)
and (min-height: 1000px)
and (max-height: 1024px)
and (orientation:portrait) {
   p {    }
}

@media only screen
and (min-height: 750px)
and (max-height: 768px)
and (min-width: 1000px)
and (max-width: 1024px)
and (orientation:landscape){
    p {    }
}


We also recommend: CSS-Tricks.com - they frequently update their queries in light of new device or client releases

We further recommend: JavaScript-generated CSS