External media query for CSS not working in Chrome

I've been playing with using different CSS files, for different browser sizes (to make the code cleaner and easier to tweak). This works fine in Firefox, but not in IE Edge or Chrome:

<link rel="stylesheet" media="screen" href="./css/style.css" /> <!-- common css -->
<link rel="stylesheet" media="all and (max-device-width: 767px)" href="./css/smaller-
screen.css" />

I also tried:

<link rel="stylesheet" media="(max-device-width: 767px)" href="./css/smaller-screen.css" />

As a test, I put this in the smaller-screen.css file:

body {
    min-width: 400px;
    background: red;
}

My HTML is pretty simple:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="iso-8859-1">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Chambres D'hotes New</title>

    <link rel="stylesheet" media="screen" href="./css/style.css" /> <!-- common css -->
    <link rel="stylesheet" media="(max-device-width: 767px)" href="./css/smaller-screen.css" />

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    content here

  </body>
</html>

Solution

Try with just max-width instead of max-device-width:

<link rel="stylesheet" media="(max-width: 767px)" href="./css/smaller-screen.css" />

More information about media queries