Chrome Developer Tool is not showing responsiveness
Question
I am having issues while checking responsiveness of my website on chrome developer tool. When I resize my chrome window, It shows responsivness
In the following image chrome window width is 768px
But when I use Toggle Device Toolbar in chrome it does not show responsiveness as in the following image. The width is 768px.
My index.html file is as follows
<!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
style.css
All the styles are here no media queries
tab.css
@media only screen and (max-width: 768px) and (min-width: 501px)
{
All the styles are here
}
mobile.css
@media only screen and (max-width: 500px)
{
All the styles are here
}
1 answers
solution1
1 ACCPTED 2020-08-15 08:01:52
You are missing the Viewport tag in your head,
Add this to your head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Please visit this Document for more information
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.