时间戳

首页 > 解决方案 > 当 express.js 提供服务时，HTML 元视口标记被忽略

javascript - 当 express.js 提供服务时，HTML 元视口标记被忽略

问题描述

我有以下代码。我在 Android 8.1 下的 Chrome 67 中加载它。我正在从两个站点加载相同的代码。一个 URL 如下所示，由 Apache 提供服务：

https://my.site/vtest.html

第二个看起来像这样，由 express.js 提供：

http://my.site:8081/vtest.html

在这两种情况下都提供相同的静态 HTML 页面：

<!doctype html>  
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, height=device-height initial-scale=1 user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<title>Viewport Test</title>
</head>
<body>
  <H1>Viewport Test</H1>
</body>
</html>

第一个站点有效：页面始终具有相同的缩放比例，我无法放大和缩小。第二页没有 - 我可以放大和缩小，当我重新加载页面时，它会记住当前的缩放级别（而不是根据initial-scale指令将其重置为 1）。

我修改了 Apache 站点以从 http 而不是 https 提供服务，它仍然有效！它将 Apache 站点从端口 8081 而不是 80 修改为服务器，它仍然有效！所以我能看到的唯一剩下的区别是一个是 Apache 的服务器，一个是 express.js 提供的。

但是当我使用 Chrome 开发者工具检查页面上的 HTML 时，它是相同的 HTML。当我检查网络请求以获取页面时，响应标头中有一些细微的差异，但我看不到任何东西会导致 express.js 提供的页面导致浏览器忽略元视口标记。

我试图解决这个问题，但我的想法已经不多了。这里会发生什么？

标签： javascriptexpressmobile

解决方案

这与页面是服务器的方式无关。如果您的移动浏览器在选项菜单下选中了“桌面站点”选项（通常是右上角的三个点），就会发生这种情况。

推荐阅读