Question

我有一个简单的网络应用，我正在部署到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。当我访问应用程序时，它非常小。我必须捏和缩放才能使用该应用程序。可能导致这种情况的原因是什么？

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>

请注意，我已声明doctype，charset，在视口元标记中使用逗号替换了分号（如brance所示），并将user-scalable=0更改为user-scalable=no }

清除缓存并检查。

（2）使用webinspector三重检查您是否没有404，并且所有文件，特别是css正在加载，并且没有路径问题

（3）如果仍然没有喜悦，请发布网址

祝你好运！

为什么在部署到heroku时，我的视口看起来有所不同？

1 个答案: