#media not working in different browsers - css

Question

I am a beginner to coding and currently making an app for a uni assignment. I am currently only using html and css until I get it right and then I will add JavaScript. The problem I am having is that my code is responsive on chrome for the set devices I need, but when I preview it in any other browser and on macs, the #media rules don't seem to be working.
This is my current css
body {
background-color:#F4BAAE;
background-image:url("Images/Pattern Landscape.png");
background-size:cover;
}
#logo {
background-image: url("Images/Logo.png");
background-repeat:no-repeat;
background-size 400px 400px;
width:100vw;
height:100vh;
background-position:top;
position:fixed;
margin:-10px;
}
#start {
background-image:url("Images/Start.png");
background-repeat:no-repeat;
position:fixed;
border-radius:15px;
background-position:bottom;
width:600px;
height:300px;
}
/* ----------- Webpages ----------- */
#media only screen and (min-device-width:1024px) {
#start {
background-size: 600px 300px;
top: 80%;
left: 50%;
transform: translate(-50%, -20%);
}
#logo {
background-size:500px;
top:80px;
}
}
/* ----------- Iphone 6 ----------- */
/* Portrait and Landscape */
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
#start {
background-size:180px 80px;
width:180px;
height:80px;
}
body {
background-size:667px auto;
}
}
/* Portrait */
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: portrait) {
#start {
top: 90%;
left: 50%;
transform: translate(-50%, -80%);
}
#logo {
background-size: 150px;
top:54px;
}
}
/* Landscape */
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: landscape) {
#start {
top: 90%;
left: 50%;
transform: translate(-50%, -80%);
}
#logo {
background-size:130px;
top:40px
}
}
/* ----------- Ipad ----------- */
/* Portrait and Landscape */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
body {
background-size:1024px auto;
}
}
/* Portrait */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
#start {
background-size: 400px 180px;
top: 90%;
left: 50%;
transform: translate(-50%, -80%);
}
#logo {
background-size:300px;
top:50px
}
}
/* Landscape */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
#start {
top: 90%;
left: 50%;
transform: translate(-50%, -90%);
background-size: 340px 130px;
}
#logo {
background-size:320px;
top:50px;
}
}
/* ----------- Galaxy S4 ----------- */
/* Portrait and Landscape */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
#start {
background-size:180px 80px;
width:180px;
height:80px;
}
body {
background-size:640px auto;
}
}
/* Portrait */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
#start {
top: 90%;
left: 50%;
transform: translate(-50%, -90%);
}
#logo {
background-size:150px;
top:54px;
left:10px;
}
/* Landscape */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
#start {
top: 90%;
left: 50%;
transform: translate(-50%, -90%);
}
#logo {
background-size:130px;
top:40px;
}
}

Answer 1

Lose the 'device' #media (min-width: 600px) { ... }
On another note... I applaud you're hard work, but your letting things get too complex.
body {
background: red;
}
#media (min-width: 400px) {
background: blue;
}
#media (min-width: 700px) {
background: green;
}
Small-screen-first... no device specific targeting... create a break when things get ugly... repeat...
(you can use 'only screen and' if you research it and think it's important)
(i'd ditch the ids for styling... use classes)

Answer 2

You have -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio, etc in the media queries. -webkit-* is a browser prefix and will only apply to safari/chrome. Unless you only want the media query to fire for a webkit based browser, you likely want to use the non-prefixed versions of those instead. Like device-pixel-ratio, min-device-pixel-ratio, etc.