html - CSS 媒体查询不适用于 iphone 6、7、8 的浏览器调整大小
问题描述
我正在尝试为所有手机屏幕尺寸制作一个 css 文件,但是在谷歌上,较小的手机屏幕无法识别媒体查询。它适用于像素 2 xl、iphone 6、7 和 8 PLUS 以及 iphone X。我也在尝试定位像素 2、iphone 6,7 和 8 和 5,所以我将最小设备宽度添加为 320 像素。但是浏览器无法识别任何 mobile.css 代码。
这是我的头标签-
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SHEK LEUNG | MA</title>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<link rel="stylesheet" href="/css/style.css">
<link rel='stylesheet' media='only screen and (min-device-width:320px) and (max-device-width: 850px) and (-webkit-device-pixel-ratio: 3) and (-webkit-device-pixel-ratio: 2)' href='css/mobile.css' />
</head>
CSS
.nav-button-h {
position: relative;
display: flex;
justify-content: space-between;
height: 20vh;
width: 100vw;
top: 40%;
/* left: 0.5rem; */
z-index: 100;
font-family: Helvetica, sans-serif;
font-size: 1.5rem;
}
#logo-center {
display: none;
}
.mobile-logo {
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
font-family: Helvetica, sans-serif;
font-weight: bold;
width: 1.5rem;
}
#projbtn {
align-self: center;
}
.nav-button-v {
font-size: 1.5rem;
}
.openPress {
-webkit-transform: translate3d(100vw, 0, 0);
transform: translate3d(100vw, 0, 0);
transition: transform 1s;
}
.openAbout {
-webkit-transform: translate3d(-100vw, 0, 0);
transform: translate3d(-100vw, 0, 0);
transition: transform 1s;
}
/* press page */
.press-container {
width: 100vw;
}
.img-grid {
margin-top: 6vh;
margin-left: -30vw;
padding: 1rem;
}
.press-info {
width: 70vw;
height: 47vh;
}
.fixed-wrapper {
left: 173vw;
height: 20vh;
}
.contact-wrapper {
height: 20vh;
}
.back_home {
display: block;
position: fixed;
z-index: 2;
font-family: Helvetica, sans-serif;
font-size: 1.5rem;
color: black;
background-color: white;
text-transform: uppercase;
font-weight: bold;
}
.press__mobile {
margin-left: 75vw;
margin-top: 90vh;
}
.fixed-wrapper {
top: 5vh;
}
.contactbtn {
float: left;
font-size: 1.4rem;
}
.contact-wrapper ul {
background-color: rgba(255, 255, 255, 0.829);
color: black;
margin-top: 3vh;
width: 60vw;
height: 18vh;
margin-left: -45vw;
text-align: center;
justify-content: flex-start;
padding: 1rem;
pointer-events: none;
}
.contact-wrapper a {
color: white;
}
/* about page */
.about-container {
width: 100vw;
left: -100vw;
}
解决方案
为了实现这一点,您需要将媒体查询添加到 mobile.css 文件中,而不是 HTML 链接声明中。
您需要mobile.css
使用媒体查询包装文件的内容;如下所示:
@media only screen and (min-device-width:320px) and (max-device-width: 850px) and (-webkit-device-pixel-ratio: 3) and (-webkit-device-pixel-ratio: 2) {
//contents of your mobile.css file goes here
}
推荐阅读
- bar-chart - 如何让用户在 Superset 上动态选择条形图 - 系列参数
- cypress - 如何在 cypress.on(test:after:run,...) 中发出正确的异步请求
- azure - 使用证书的 Azure AD 应用程序身份验证复杂性?
- python - 用列中的平均值输入 NaN 并找到缺失值的百分比
- postgresql - OVER (PARTITION BY) 使查询变慢
- c# - Winforms 设置项目强制需要管理员权限
- c# - Windows 窗体 C#(拖放 100 个对象)
- php - 从控制器 YII2 在数据库中输入今天的日期
- ssh - SSH 密钥被添加到默认位置,而不是 sshd_config 中指定的 AuthorizedKeysFile
- amazon-web-services - SageMaker GroundTruth 标签作业允许的最大图像尺寸是多少?