Surface Pro - Media Queries for mobile/tablet devices( ALL Updated - 2019)

    , ,     No comments 
/*Reference: 
https://gist.github.com/aamorozov/ff6b41896b7cfef299ec9ce83ea1889d
*/

@media only screen     
and (min-device-width : 1024px) 
and (max-device-width : 1366px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 2) {
  /* PORTRAIT: 
 Apple Ipad Pro */ }
  
@media only screen and (max-width: 800px) and (orientation : portrait) {
 /* PORTRAIT:
 Samsung Galaxy Tab 3(10")
 Amazon indle Fire HD
 Motorola Xoom 1, 2 */
}

@media only screen and (max-width: 768px) and (orientation : portrait) {
 /* PORTRAIT:
 Apple iPad 1,2,3,4,Air, Mini
 Microsoft Surface
 HP Touchpad
 LG Optimus Pad  */
}

@media only screen and (max-width: 720px) and (orientation : portrait) {
 /* PORTRAIT:
 Microsof Surface Pro */
}

@media only screen and (max-width: 600px) and (orientation : portrait) {
 /* PORTRAIT:
 Asus Nexus 7
 BlackBerry PlayBook
 Kindle 3
 LG G Pad 8.3
 Samsung Galaxy Tab 2(7") */
}


 /*Mobile. Iphone 6 plus and galaxy edge will go somewhere here*/
 
@media only screen and (max-width: 400px) and (orientation : portrait) {
 /* PORTRAIT: (some of them might need to be broken out into '360px')
 Apple Iphone 6
 Samsung Galaxy S3, S4, S5, S6, S7
 Samsung Galaxy Note, Note 2
 Motorola Moto G
 LG Nexus 5
 Google Nexus 5
 HTC One X, Sensation
 BlackBerry Bold 9900
 BlackBerry Z10 */
}

@media only screen and (max-width: 320px) and (orientation : portrait) {
 /* PORTRAIT:
 Apple iPhone 3, 4, 5
 HTC Nexus One, Evo
 LG Optimus
 Nokia N900
 Nokia Lumia 1020
 Samsung Galaxy S, S2 */
}


@media only screen and (max-width: 1366px) and (orientation : landscape) {
 /* LANDSCAPE:
 Microsoft Surface 
 Apple Ipad Pro */
}

@media only screen and (max-width: 1280px) and (orientation : landscape) {
 /* LANDSCAPE:
 Samsung Galaxy Tab(7.7 > 12.2)
 Mictosoft Surface Pro 1, 2
 Acer Iconia Tab (A100-A500)
 ASUS Transformer Pad TF300T
 Motorola Xoom 1, 2
 LG Optimus Pad */
}

@media only screen and (max-width: 1024px) and (orientation : landscape) {
 /* LANDSCAPE:
 Apple iPad 1,2,3,4,Air,Mini
 BlackBerry PlayBook
 Samsung Galaxy Tab 2(7") */
}

@media only screen and (max-width: 980px) and (orientation : landscape) {
 /* LANDSCAPE:
 Nexus 7
 HTC Evo 3D */
}

@media only screen and (max-width: 800px) and (orientation : landscape) {
 /* LANDSCAPE:
 Iphone 6plus
 Kindle Fire HD 7, 8
 HTC Desire Z
 Nokia N900
 Samsung Galaxy Grand */
}

@media only screen and (max-width: 640px) and (orientation : landscape) {
 /* LANDSCAPE:
 Samsung Galaxy S3, S4, S5, S6, S7
 Samsung Galaxy Note 1, 2
 HTC One S, V
 Nokia 500 */
}

@media only screen and (max-width: 600px) and (orientation : landscape) {
 /* LANDSCAPE:
 Nexus 4
 Apple iPhone 5 */
}

@media only screen and (max-width: 540px) and (orientation : landscape) {
 /* LANDSCAPE:
 HTC Desire, One
 LG Optimus 2X
 Nexus S
 Samsung Galaxy S2
 BlackBerry Z10 */
}

Continue Reading...

spacer