Issues with media queries when targeting 2 or 3 devices with same viewport (768px or 1024px)

Question

I'm currently working on a project where it needs to be user friendly for multiple devices but came across issues on devices themselves when targeting devices with one of the two viewport that a re the same and still not able to find a solution for it.

I am using media queries to archieve this, of course sounds far enough but there is no explanation online to separate an iPad mini with this syntax

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

And this

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

And an iPad Pro

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

And this

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

I am testing with the Chrome devtool for devices and is fine when i start with the biggest ipad but when i then go on with the smallest(mini), it overwrite the previous changes because the css is read from top to bottom so i am so confused please guys can you help me to understand better this concept?

Also for mobiles i have this multiple lines of code one for each mobile (iPhone 5, 6 ,6+ but still same issues)

iPhone 5

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
       and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
       and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}

iPhone 6

@media only screen and (min-device-width: 375px) and (max-device-width: 667px)
       and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px)
       and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}

iPhone 6+

@media only screen and (min-device-width : 320px) and (max-device-width : 767px)
       and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 3) {}

@media only screen and (min-device-width : 320px) and (max-device-width : 767px)
       and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 3) {}

Literally I don't know how to be more specific then this but also here the iphone 5 because is the last one in the css is overwriting some stile in the iphone 6 or 6+.

Answer 1

How about writing different style sheets for each device

Answer 2

I would use just min-width instead of min-device-width and similar. A 768px x 1024px device with retina display (iPad Mini) actually has 1536px x 2048px device pixels (if the pixel taio is 2:1), so you either have to use the true device pixel size or use CSS pixel size.