媒体查询不适用于移动设备

Question

I'm currently working on a site that is supposed to change between different stylesheets based on the size of the screen. It works perfectly when I test this on my laptop browser, changing styles as I resize the width of the browser window, but it doesn't work on my mobile phone. I'm only getting the desktop stylesheet, and I'm not sure why. The phone I'm using to view the site is a Samsung Galaxy S4, and appears the same on both Firefox and Chrome.

<link rel="stylesheet" type="text/css" media="screen and (min-width:1200px)" href="css/styles_desk.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px) and (max-width: 1024px)" href="css/styles_tablet.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 320px) and (max-width: 480px)" href="css/styles_mobile.css">

Answer 1

确保设置了视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">