我已将我的元标记放在文档的头部，但是当我在我的 iPhone 或 iPad 上加载该网站时，它看起来仍然与桌面网站相同。 您可以在 www.thairapyexeter.co.uk 查看我的网站
我的 HTML:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Thairapy Hair, Beauty + Barbers</title>
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/menu.css" media="screen" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content = "width=device-width, initial-scale=1">
</head>
这是我如何编写媒体查询的示例:
CSS:
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 400px) {
/* Styles */
.menu nav ul li {
display: block;
float: left;
width: 50%!important;
position: relative;
height: 33%!important;
background-position: 50% 50%;
background-repeat: no-repeat;
overflow: hidden;
}
.offersmenu nav ul li {
display: block;
float: left;
width: 100%;
position: relative;
height: 50%;
background-position: 50% 50%;
background-repeat: no-repeat;
overflow: hidden;
}
.lightbox-prev, .lightbox-next {
position: absolute;
top: 0;
bottom: 0;
width: 60px;
background: center no-repeat red;
z-index: 1001;
cursor: pointer;
}
.arrow {
position: fixed;
width: 40px;
z-index: 1004;
}
.treatmentsmenu nav ul li {
width: 100%;
height: 50%;
}
.lightbox-prev {
background-image: url("../previous.png")!important;
}
.lightbox-next {
right: 0;
background-image: url("../next.png")!important;
}
最佳答案
在你的代码之间检查这段代码
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
/* please write one time in head section */
</head>
CSS 媒体查询:
/* small device code here */
@media (min-width: 480px){
/* media code here */
/* Mobile */
}
@media (min-width: 750px){
/* media code here */
/* Mobile or tab */
}
@media (min-width: 960px){
/* media code here */
/* desktop or Ipad */
}
@media (min-width: 1200px){
/* media code here */
/* desaktop */
}
@media (min-width: 1600px){
/* media code here */
/* desktop */
}
@media (min-width: 1920px){
/* media code here */
/* desktop */
}
关于html - 调整浏览器大小时媒体查询在桌面上工作，但在移动设备上不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30546900/