Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Internet Explorer 11 using media query css

I'm doing some testing on IE 11 and it's using the CSS for mobile devices and not the "full screen" css. Chrome, Firefox, Opera and Safari all use the correct "full screen" CSS, but IE 11 is grabbing the mobile/media css. I've cleared the cache multiple times and looked at the CSS sheet that it's grabbing, and it is using the most up-to-date version.

In the head I have

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/css/default.css">
</head>

In the CSS file, I have the following after all of the "full sized" css

//"full sized" css
....

@media only screen and (max-width: 479px) {
  //mobile CSS
}

IE 11 on my laptop is using the media CSS and I can't figure out why. I know it's using the media only section and not just formatting incorrectly, because when I delete the media only section from the CSS, it then displays as expected.

like image 768
user1406951 Avatar asked Oct 20 '22 13:10

user1406951


1 Answers

can you try this:

@media all and (max-width: 479px) {
  //mobile CSS
}

with all you are targeting all devices, and not only the desktop version you are now targeting with screen.

For mobile only, you would do this:

@media (max-width: 600px) {
  //mobile CSS
}
like image 176
Mark Avatar answered Oct 23 '22 04:10

Mark