Question

我进行了搜索和搜索，似乎无法找到我的html元标记在我的iPhone上运行的原因。您可以访问我的网站http://hadenhiles.mooo.com。如果您调整视口（窗口）的大小，您将看到我的网站完全按预期响应...但是当您在移动设备上查看它时，您会得到一个看起来好像是桌面版本的结果。这是头标记及其内容：

<head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css" />
        <link rel="stylesheet" href="style.css" type="text/css" />
</head>

您可能已经注意到我使用自己的样式表以及bootstrap3样式表。我知道在布局时我应该坚持使用其中一种，但在我介绍引导之前，我只使用自己的媒体查询制作了这个网站。我只在页脚中使用bootstrap和弹出/导航栏功能。无论如何，bootstrap不是问题。 似乎元标记无法识别设备宽度，并且未将初始比例设置为1.0 。我尝试将我的查询的 min-width 改为调试，但没有成功。以下是我的 css媒体查询：

/* Main css */

@media only screen and (min-width: 1px) and (max-width: 320px){
    /* content */
}
@media only screen and (min-width: 321px) and (max-width: 600px){
    /* content */
}
@media only screen and (min-width: 601px) and (max-width: 768px){
    /* content */
}
@media only screen and (min-width: 769px) and (max-width: 1020px){
    /* content */
}

我尝试从 @media only screen＆切换到 @media screen ，就像有人在另一个问题中建议的那样，但也没有成功。起初我认为移动设备的最小/最大宽度太大/太小，所以我改变了这一点，没有任何反应。我已经有这个问题大约3个月了，所以我决定发表我自己的问题。非常感谢您给予我的任何帮助。

〜海登

Answer 1

所以这并不能确切地定义发生了什么，尽管我认为这是由于最小和最大冲突造成的。尝试只设置最大宽度，因为这似乎涵盖了一切。似乎多余的是，min-width是1px，最大宽度是320px，然后下一个媒体查询是321px。如果将max-width设置为320px，则会覆盖该范围。如果将下一个设置为600像素，它将覆盖320-600范围等

@media only screen and (max-width: 320px){
    /* content */
}

@media only screen and (max-width: 600px){
 /* content */
}

@media only screen and (max-width: 768px){
    /* content */
}

@media only screen and (max-width: 1020px){
    /* content */
}

或者，您可以尝试使用 min-device-width 和 max-device-width 。这是media queries for standard devices上合适资源的链接。

html元标记没有检测设备宽度？

1 个答案: