我知道这个问题以前被问过，但所有建议的答案都对我不起作用。我正在尝试制作一个响应式网站，虽然它在浏览器中运行良好(当我调整大小时)，但当我在移动设备上打开网站时，我只能获得完整的桌面版本。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>LaVida Cake</title>
<link rel="stylesheet" href="main2.css">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Sacramento" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</head>
我确保<meta>标签符合其他答案的建议，但我仍然无法在移动设备上获得适当的功能。 请耐心等待，这是我的第一个网站，非常感谢您的帮助。
提前致谢
更新：
CSS 文件
body {
background-image: url(pexels-photo-132694smaller.jpeg);
background-attachment: fixed;
background-size: cover;
}
/* **********PHONE SCREEN********** */
@media screen and (max-width: 640px){
#leftSide {
display: none;
}
#rightside {
display: none;
}
#emptyLeft {
display: none;
}
#emptyRight {
display: none;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"logo"
"main"
"footer";
}
#menu {
display: none;
text-align: center;
grid-area: menu;
}
/* #menu ul li{
display: inline;
margin-right: 50px;
font-size: 2em;
font-family: 'Sacramento', cursive;
}
#menu ul li a {
text-decoration: none;
color: #d83444;
}
#menu ul li a:visited{
text-decoration: none;
color: #d83444;
font-weight: normal;
}
#menu ul li a:hover {
font-weight: bold;
} */
#logo {
text-align: center;
grid-area: logo;
}
#logo h1 {
font-family: 'Great Vibes', cursive;
font-size: 3em;
padding: 10px 10%;
color: #d83444;
}
#main {
text-align: center;
grid-area: main;
background-color: rgba(255,255,255,0.5);
padding: 3%;
}
#main h1 {
font-size: 2em;
font-family: 'Great Vibes', cursive;
color: #d83444;
letter-spacing: 7px;
}
#main p {
font-size: 1.8em;
max-width: 800px;
margin: 20px auto;
font-family: 'Sacramento', cursive;
text-align: justify;
color: #d83444;
}
#main p a {
text-decoration: none;
color: #d83444;
}
#main p a:visited {
text-decoration: none;
color: #d83444;
font-weight: normal;
}
#main p a:hover {
font-weight: bold;
}
#footer {
grid-area: footer;
text-align: center;
}
#footer ul li{
display: inline;
margin-right: 50px;
font-size: 1.5em;
font-family: 'Sacramento', cursive;
}
#footer ul li:first-child{
display: none;
}
#footer ul li a {
text-decoration: none;
color: #d83444;
}
#footer ul li a:visited{
text-decoration: none;
color: #d83444;
font-weight: normal;
}
#footer ul li a:hover {
font-weight: bold;
}
}
/* **********TABLET SCREEN********** */
@media screen and (max-width: 959px) and (min-width: 641px){
#leftSide {
display: none;
}
#rightside {
display: none;
}
.container {
display: grid;
grid-template-columns: 0.1fr 1fr 0.1fr;
grid-template-areas:
"emptyLeft menu emptyRight"
"emptyLeft logo emptyRight"
"emptyLeft main emptyRight"
"emptyLeft footer emptyRight";
}
#emptyLeft {
grid-area: emptyLeft;
}
#emptyRight {
grid-area: emptyRight;
}
#menu {
text-align: center;
grid-area: menu;
}
#menu ul li{
display: inline;
margin-right: 50px;
font-size: 2.5em;
font-family: 'Sacramento', cursive;
}
#menu ul li a {
text-decoration: none;
color: #d83444;
}
#menu ul li a:visited{
text-decoration: none;
color: #d83444;
font-weight: normal;
}
#menu ul li a:hover {
font-weight: bold;
}
#logo {
text-align: center;
grid-area: logo;
}
#logo h1 {
font-family: 'Great Vibes', cursive;
font-size: 5em;
letter-spacing: 7px;
padding: 10% 10%;
color: #d83444;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgba(250,250,250,0.5);
}
#main {
text-align: center;
grid-area: main;
background-color: rgba(255,255,255,0.5);
padding: 3%;
}
#main h1 {
font-size: 3em;
font-family: 'Great Vibes', cursive;
color: #d83444;
letter-spacing: 7px;
}
#main p {
font-size: 2.5em;
max-width: 800px;
margin: 20px auto;
font-family: 'Sacramento', cursive;
text-align: justify;
color: #d83444;
}
#main p a {
text-decoration: none;
color: #d83444;
}
#main p a:visited {
text-decoration: none;
color: #d83444;
font-weight: normal;
}
#main p a:hover {
font-weight: bold;
}
#footer {
grid-area: footer;
text-align: center;
}
#footer ul li{
display: inline;
margin-right: 50px;
font-size: 2em;
font-family: 'Sacramento', cursive;
}
#footer ul li a {
text-decoration: none;
color: #d83444;
}
#footer ul li a:visited{
text-decoration: none;
color: #d83444;
font-weight: normal;
}
#footer ul li a:hover {
font-weight: bold;
}
}
/* **********FULL SCREEN********** */
@media screen and (min-width: 959px){
.container {
display: grid;
grid-template-columns: repeat(2,minmax(0%,0.5fr)) minmax(300px,4fr) repeat(2,minmax(0%,0.5fr)) ;
grid-template-areas:
"leftSide emptyLeft menu emptyRight rightSide"
"leftSide emptyLeft logo emptyRight rightSide"
"leftSide emptyLeft main emptyRight rightSide"
"leftSide footer footer footer right";
}
#leftSide {
grid-area: leftSide;
}
#leftSide img {
max-width: 100%;
margin-top: 50px;
margin-bottom: 50px;
}
#leftSide img:hover {
transform: scale(1.2);
}
#emptyLeft {
grid-area: emptyLeft;
}
#menu {
text-align: center;
grid-area: menu;
}
#menu ul li{
display: inline;
margin-right: 50px;
font-size: 3.5em;
font-family: 'Sacramento', cursive;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: rgba(255,255,255,0.8);
}
#menu ul li :nth-of-type(3) {
margin-right: 0;
}
#menu ul li a {
text-decoration: none;
color: #d83444;
}
#menu ul li a:visited{
text-decoration: none;
color: #d83444;
font-weight: normal;
}
#menu ul li a:hover {
font-weight: bold;
}
#logo {
text-align: center;
grid-area: logo;
}
#logo h1 {
font-family: 'Great Vibes', cursive;
font-size: 8em;
padding: 10% 10%;
color: #d83444;
letter-spacing: 7px;
-webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: rgba(250,250,250,0.5);
}
#main {
text-align: center;
grid-area: main;
background-color: rgba(255,255,255,0.5);
padding: 3%;
}
#main h1 {
font-size: 4em;
font-family: 'Great Vibes', cursive;
color: #d83444;
letter-spacing: 7px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgba(250,250,250,0.5);
}
#main p {
font-size: 3.2em;
max-width: 800px;
margin: 50px auto;
font-family: 'Sacramento', cursive;
text-align: justify;
color: #d83444;
}
#main p a {
text-decoration: none;
color: #d83444;
}
#main p a:visited {
text-decoration: none;
color: #d83444;
font-weight: normal;
}
#main p a:hover {
font-weight: bold;
}
hr {
max-width: 800px;
}
#emptyRight {
grid-area: emptyRight;
}
#rightside {
grid-area: rightSide;
}
#rightside img {
max-width: 100%;
margin-top: 50px;
margin-bottom: 50px;
}
#rightside img:hover {
transform: scale(1.2);
}
#footer {
text-align: center;
grid-area: footer;
}
#footer ul li{
display: inline;
margin-right: 50px;
font-size: 2.5em;
font-family: 'Sacramento', cursive;
-webkit-text-stroke-width: 0.3px;
-webkit-text-stroke-color: rgba(255,255,255,0.8);
}
#footer ul li :nth-of-type(3) {
margin-right: 0;
}
#footer ul li a {
text-decoration: none;
color: #d83444;
}
#footer ul li a:visited{
text-decoration: none;
color: #d83444;
font-weight: normal;
}
#footer ul li a:hover {
font-weight: bold;
}
}
更新 15 MAR 2018
我在评论中提到了这一点，但没有在问题正文中提到这一点。我正在使用CSS网格进行网站布局。最初我认为移动浏览器可能不支持CSS网格，但事实似乎并非如此。我不确定，但这可能是我的媒体查询的编写方式吗？意思是min-width和max-width以某种方式混淆了？在不同视口中查看时使用什么重要吗？
你使用的是CSS框架吗？即Materialize， Bootstrap
如果您只在main2.css中使用CSS，那么您将不得不满足您希望使用媒体查询无法响应的每个断点。
meta - viewport标签不会使您的CSS响应，而是让浏览器知道该网站针对移动设备进行了优化。
更新
我建议你看看这篇关于CSS网格的响应式布局的文章。这应该回答您的问题，将使您的CSS grids在移动设备和台式机上运行。