CSS media queries for Samsung s6

12

votes

Help please. Can any body tell me about media queries in CSS for Samsung s6 to be more responsive?

@media only screen and 
(min-device-width : 360px) and 
(max-device-width : 640px) and 
(-webkit-min-device-pixel-ratio : 3) { // code here }

And from where i can test for responsive design for Samsung s6? Any online link or tool please?

cssresponsive-designmedia-queries

4

votes

I've try this :

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px)
  and (-webkit-min-device-pixel-ratio : 4) 
  and (-webkit-device-pixel-ratio : 4)
  and (orientation: portrait) {

/* CSS GO HERE */

}

And it's seems to work. For S6 and S7. I think it's because the Samsung S6 and S7 dimensions are 1440x2560 :

1440 / 4 = 360
2560 / 4 = 640

Hope this help.

2

votes

Chrome dev tools can let you test the query on different screen sizes. Open the developer console (F12) and click the "Toggle device mode" button (the small screen icon). You can select your device or manually set the screen size yourself. For a galaxy S6, the dimensions are 360x640.

2

votes

I recommending you to use following code:

/* Samsung Galaxy S6, S6+, S7, S7+ | 1440×2560 pixels ----------- */
/* Portrait and Landscape */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
    /* Styles */
}

/* Landscape */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 4) {
    /* Styles */
}

/* Portrait */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 4) {
    /* Styles */
}

If you locking for full list of them please check this link, you will find the following devices: Smartphones, iPads, iPads 3, iPhone 4, iPhone 5, iPhone 6, iPhone 6+, Samsung Galaxy S3, Samsung Galaxy S4 , Samsung Galaxy S5, Samsung Galaxy S6, Samsung Galaxy S7, Samsung Galaxy S8, Samsung Galaxy S9

For more information please look at this link and check this link

CSS media queries for Samsung s6

3 Answers