CSS media queries for Samsung s6

前端 未结 3 1383
既然无缘
既然无缘 2021-01-11 12:51

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-de         


        
相关标签:
3条回答
  • 2021-01-11 13:25

    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.

    0 讨论(0)
  • 2021-01-11 13:40

    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.

    0 讨论(0)
  • 2021-01-11 13:46

    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

    0 讨论(0)
提交回复
热议问题