CSS 媒体查询在 iphone 6、7、8 的浏览器大小调整中不起作用

Question

我正在尝试为所有移动屏幕尺寸制作一个 css 文件，但是在 google 上，较小的 phone 屏幕无法识别媒体查询。它适用于像素 2 xl、iphone 6、7 和 8 PLUS 以及 iphone X。我也在尝试定位像素 2、iphone 6,7 和 8 和 5，所以我将最小设备宽度添加为 320 px.But 浏览器将无法识别任何 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;

}

Answer 1

为了实现这一点，您需要将媒体查询添加到 mobile.css 文件中，而不是在 HTML link 声明中。

您需要用媒体查询包装 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
}

Answer 2

您 css 的方式完全不正确。

首先，你绝对没有媒体查询。您的媒体查询应该简单地设置为 min-width，没有别的。没有 max-width，没有。这些需要在您的 css 文件中，而不是在 link 元素中。

响应式设计应该仅，我的意思是仅使用min-width媒体查询在mobile-first维度上完成.当宽度尺寸增加超过某个点时，您将添加下一个媒体查询以获得下一个最大宽度。

这是一个如此简单的概念，在过去的 6 到 7 年里，我看到数百人都不理解。我曾短暂工作过一段时间的一家公司，在我加入后，我必须完全 re-write 他们的整个 css 堆栈来支持这些基本规则并最终解决他们遇到的大部分问题。

我建议看看 Bootstrap 大约 4-5 年前是如何开始进行媒体查询的。我没有跟上框架在当前版本中正在做什么，但他们当时正朝着正确的方向前进。

一般来说，这纯粹是凭记忆，最好的 min-width 大小是：320px、480px、768px、1024px 和 1200px。这应该考虑到所有移动和平板设备的纵向和横向模式，向上移动到桌面宽度。根据需要调整。

Answer 3

这行代码无效：

<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' />

您应该将媒体查询添加到 css 文件中（可能在您的 mobile.css 中）

@media only screen and (min-width: 320px) {
  .class{
    background-color: green;
  }
}

CSS 媒体查询在 iphone 6、7、8 的浏览器大小调整中不起作用

CSS media queries won't work in browser resizes for iphone 6,7,8

html

css

media-queries