general question to built responsive website

Question

I am learning webdesign(wordpress) so I come in problem with media queries. I use Bootstrap 4 grid system so I am using also media queries of bootstrap 4 which is :

// Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up) @media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }

I see this media queries is not enough specialy with iphones and samsungs new series. I see that I have to write extra break points to target those mobiles. I made a search in google and I see onother kind of media queries which is targeting width and height with webkit-device-pixel-ratio:2 or 3 etc .I see also there is also device targeting media queries which makes me confused my question is now: if I use extra break points for 375 width 4014 width iphones etc wil be enough or I have also to target height and webkit-device-pixel ratio. what do you advise me? there is a lot of mobile devices with different resolutions. thanks

In media Query, I think you have to focus on Galaxy S5 First, because it is showing the same view for MotoG, IPhone 6/7/8 and plus, Pixel X2 as well. For IPad you can use 768 - 1024 and for Ipad Pro and laptop 1024 - 1600 / 2000 and for extra large device 2000 or more. I am working by using this and its working for me everytime thats why i am you same advice as i am using. You can check and then let me know if its working for you or not. — bharti parmar

hovhannes999 hovhannes999 · Accepted Answer · 2021-04-02T18:40:26

thanks, I did with this code:

@media screen and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
    
    .site-header  {
        background-color:brown;
    }
    
}

but when I open in chrome inspect elements I see it is only targetting Galaxys5 and Moto G4.not iphone or Pixel2. you can see yourself on: http://webdesignleren.com/ thanks

general question to built responsive website

1 Answers