用于高分辨率显示器的引导程序答案

【问题标题】：Bootstrap for high resolution displays用于高分辨率显示器的引导程序
【发布时间】：2014-11-13 22:09:16
【问题描述】：

请在您将此称为重复并投反对票之前阅读它！我知道这个解决方案 (twitter bootstrap for high resolution mobile displays) 并且我已经使用过它，但是当我使用三星 S5（高分辨率移动设备）指向该站点时，它会呈现平板电脑视图而不是移动设备。

除了使用 viewport initial-scale=1 或使用上述问题中提到的 CSS 之外，还有其他可能的解决方案吗？

阿米尔

【问题讨论】：

twitter bootstrap for high resolution mobile displays的可能重复

标签： twitter-bootstrap-3

【解决方案1】：

我发现了问题！这很奇怪也很有趣，所以我分享给每个可能有同样问题的人。

具有视口的解决方案工作正常，问题实际上是移动设备如何导航到该站点！我在我的域名注册商 (Godaddy) 上进行了永久重定向，以将访问者重定向到实际部署，这似乎是问题所在！

所以这里是细节。我的域是 aaaa.com，我的代码部署在 bbbb.com/aaawebsitecontent 下在 aaaa.com 域注册表中，我定义了一个永久重定向，以将任何请求重定向到 aaaa.com 以转到 bbbb.com/aaawebsitecontent。如果我将手机浏览器指向 aaaa.com，则视口将无法工作！由于某种原因，它仍然显示高分辨率桌面布局！如果我将手机浏览器指向 bbbb.com/aaaawebsitecontent，那么一切正常，系统切换到移动布局！

我真的无法解释为什么，但不管我知道问题的根本原因！

【讨论】：

救了我的命！当您的主站点在框架内运行时也会发生这种情况（隐藏上下文路径）。您要么需要删除框架，要么将设备宽度元数据添加到框架头。

【解决方案2】：

我一直在为我创建的每个网站使用Bootstrap basic template，但我还没有遇到问题。我拥有三星 Galaxy S4，它的分辨率与 S5 相同，所以应该没有区别。你也应该试试。如果您对自己创建的某个网站有疑问，可以附上一些代码以便我们审核。

正如您在此处看到的，在您链接的问题中存在相同的<meta> 标签（我希望scale=1 和scale=1.0 之间没有区别，所以是的，它可能是重复的问题。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

【讨论】：