Chrome 开发者工具没有显示响应

Question

I am having issues while checking responsiveness of my website on chrome developer tool.我在 chrome 开发者工具上检查我的网站的响应时遇到问题。 When I resize my chrome window, It shows responsivness当我调整我的 chrome window 的大小时，它显示出响应性

In the following image chrome window width is 768px在下图中，chrome window 宽度为 768px

But when I use Toggle Device Toolbar in chrome it does not show responsiveness as in the following image.但是当我在 chrome 中使用Toggle Device Toolbar时，它不会显示如下图所示的响应能力。 The width is 768px.宽度为 768 像素。

My index.html file is as follows我的index.html文件如下

<!DOCTYPE html>
<html>
<head>
    <title>Personal Site</title>
    <link rel="stylesheet" type="text/css" href="./styles/style.css">
    <link rel="stylesheet" type="text/css" href="./styles/tab.css">
    <link rel="stylesheet" type="text/css" href="./styles/mobile.css">
</head>
<body>
All the Code lies here
</body>
</html>

My CSS files are as follows我的 CSS 文件如下

style.css样式.css

All the styles are here no media queries

tab.css选项卡.css

@media only screen and (max-width: 768px) and (min-width: 501px)
{
All the styles are here
}

mobile.css手机.css

@media only screen and (max-width: 500px)
{
All the styles are here
}

Answer 1

You are missing the Viewport tag in your head,您在脑海中缺少 Viewport 标签，

Add this to your head tag将此添加到您的head标签

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

Please visit this Document for more information请访问此文档以获取更多信息

Chrome 开发者工具没有显示响应

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-08-15 08:01:52

Chrome 开发者工具没有显示响应

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-08-15 08:01:52

解决方案1
1 已采纳 2020-08-15 08:01:52