html 元标记未检测到设备宽度？答案

【问题标题】：html meta tag not detecting device width?html 元标记未检测到设备宽度？
【发布时间】：2014-03-20 07:01:45
【问题描述】：

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

<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 样式表。我知道在布局方面我可能会坚持其中一个，但在我被介绍给引导程序之前，我只使用我自己的媒体查询制作了这个网站。我只在页脚和弹出窗口/导航栏功能中使用引导程序。无论如何，引导程序不是问题。 似乎元标记无法识别设备宽度并且没有将初始比例设置为 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 and 切换到 @media screen，正如有人在另一个问题中建议的那样，但也没有成功。起初我认为最小/最大宽度对于移动设备来说太大/太小，所以我改变了它，但什么也没发生。我已经有这个问题大约 3 个月了，所以我决定发布我自己的问题。非常感谢您能给我的任何帮助。

~哈登

【问题讨论】：

标签： css html twitter-bootstrap media-queries

【解决方案1】：

所以这并不能准确定义正在发生的事情，尽管我确实认为这是由于最小和最大冲突。尝试仅设置 max-width ，因为这似乎涵盖了所有内容。说最小宽度为 1 像素，最大宽度为 320 像素，然后下一个媒体查询为 321 像素似乎是多余的。如果您将最大宽度设置为 320 像素，它将覆盖该范围。如果将下一个设置为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 上一个不错的资源的链接。

【讨论】：

很抱歉没有明确定义问题..尽管您解决了我的问题！非常感谢。
或者可能不是......当我使用 xCode iPhone 模拟器在本地测试网站时，它工作正常，但是当我在互联网上加载网站时，它的响应不一样......嗯。跨度>
尝试在您的设备上查看非隐藏版本。关于免费重定向服务的某些事情会弄乱您的媒体查询。可能是因为它将整个站点封装在一个框架内，并且设备不能很好地处理 iframes/frames。我敢打赌，如果你把它移到一个专用服务器上，这样你就不会重定向，它会像你期望的那样工作。