为什么当我部署到 heroku 时我的视口看起来不同？答案

【问题标题】：Why does my viewport look different when I deploy to heroku?为什么当我部署到 heroku 时我的视口看起来不同？
【发布时间】：2015-05-25 15:03:58
【问题描述】：

我有一个简单的 Web 应用程序，我正在部署到 heroku。在我的 html 中，我有关于视口的元信息：

<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <title>Notify</title>
    <link rel="stylesheet" type="text/css" href="./app.css">
    <link rel="stylesheet" type="text/css" href="./bootstrap.css">
</head>

这是我的服务器代码：

var express = require('express');
var app = express();
var port = process.env.PORT || 3000;

app.use(express.static('./public'));

当我从本地服务的iphone 访问它时，它看起来不错。我不必捏和缩放来使用我的应用程序。

然后我将它部署到heroku。当我访问该应用程序时，它非常小。我必须捏合和缩放才能使用该应用程序。这可能是什么原因造成的？

【问题讨论】：

这只是一个尝试，但您是否考虑过使用 , 而不是 ;分离视口内容中的配置？
我试过了，但没用
不确定您是否通过 goDaddy 进行托管，但我遇到了同样的问题，我必须将“带屏蔽”的域转发更改为“永久”，然后一切都突然完美了

标签： html mobile heroku responsive-design viewport

【解决方案1】：

您可以检查一些细节。

(1) 将页面头部改写如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Notify</title>
    <link rel="stylesheet" type="text/css" href="./app.css">
    <link rel="stylesheet" type="text/css" href="./bootstrap.css">
</head>
<body>

</body>
</html>

请注意，我已经声明了文档类型字符集，用逗号替换了视口元标记中的分号（如 brance 所建议的那样，并将 user-scalable=0 更改为 user-scalable=no

清除缓存并检查。

(2) 使用 webinspector 三次检查您没有 404，所有文件，尤其是 css 正在加载，并且没有路径问题

(3)如果还是不开心，发个网址

祝你好运！

【讨论】：

我修复了所有这些项目，但没有任何改变。然后我克隆了 repo（包括你的更改）并将它们推送到Heroku。新站点运行良好，但旧站点仍然被破坏，我所做的只是复制目录并调用db。我不知道改变了什么来解决它。我要等几天看看有没有人能告诉我发生了什么事，如果没有，我会给你赏金。
很高兴听到您的网站现在正在运行；)
我刚刚发现了问题所在。我正在通过godaddy 转发，这就是问题所在。当我直接点击heroku 链接时，它看起来还不错。当我点击godaddy 转发地址时，它就出现了问题。有什么想法吗？
检查 GoDaddy 是否在 iframe 中加载转发的域。那会是个问题。
它确实使用了 iframe。所以这才是真正的问题。