为什么当我部署到 heroku 时我的视口看起来不一样？

Question

我有一个要部署到 heroku 的简单 Web 应用程序。在我的 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。当我访问该应用程序时，它非常小。我必须捏和缩放才能使用该应用程序。可能是什么原因造成的？

Answer 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 三重检查您是否没有 404s，所有文件，尤其是 css 是否正在加载，并且没有路径问题

(3)如果还是不开心，post一个URL

祝你好运！

为什么当我部署到 heroku 时我的视口看起来不一样？

Why does my viewport look different when I deploy to heroku?

html

mobile

heroku

viewport

responsive-design