响应式设计高达320px？

Question

我不知道为什么我的响应式设计不适用于最大宽度为320px的尺寸。我在Chrome中尝试使用不同尺寸的iPad并且工作正常，但iPhone出错了。我的代码如下：

<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/iPhonePortrait.css" media="only screen and (max-width : 320px) and (orientation : portrait)" />
<link rel="stylesheet" type="text/css" href="css/iPadLandscape.css" media="only screen and (max-width : 1024px) and (orientation : landscape)" />
<link rel="stylesheet" type="text/css" href="css/iPadPortrait.css" media="only screen and (max-width : 768px) and (orientation : portrait)" />

浏览器已更新，有什么想法吗？

Answer 1

您需要将此作为元标记<meta name="viewport" content="width=device-width,initial-scale=1.0">。