使用chrome设备工具栏和媒体查询进行响应式布局调试

Question

我正在尝试使用html和css为我的应用程序编写登录表单。 在我的CSS中我正在使用@media - 查询：

@media (max-width: 767px){
    body {
        font-size: 25px;
    }
    ... and some more
}

因此，在超过767px的分辨率下，它看起来像这样：

当我调整到低于767px的分辨率时，它看起来像这样（全部更大，没有阴影框等）：

然后，我在Google Chrome中更改为设备视图

我切换到iPhone 5，其分辨率为width:320px和height:568px 结果看起来像这样（比大于767px的那个）：

看起来不应该低于767px？

Answer 1

在头部添加视口标记，如：

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

有关视口的更多信息：

  

https://www.w3schools.com/css/css_rwd_viewport.asp