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

Question

I've got the following code. 我有以下代码。 I am loading it in Chrome 67 under Android 8.1. 我正在Android 8.1下的Chrome 67中加载它。 I am loading the same code from two sites. 我正在从两个站点加载相同的代码。 One URL looks like this and is served by Apache: 一个URL如下所示，由Apache提供：

https://my.site/vtest.html https://my.site/vtest.html

The second looks like this and is served by express.js: 第二个看起来像这样，由express.js提供：

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

The same static HTML page is being served in both cases: 在两种情况下都提供相同的静态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>

The first site works: The page always has the same scaling and I am not able to zoom in and out. 第一个站点有效：页面始终具有相同的缩放比例，并且我无法放大和缩小。 The second page does not - I am able to zoom in and out, and when I reload the page, it remembers the current zoom level (instead of resetting it to 1 per the initial-scale directive). 第二页没有-我能够放大和缩小，并且当我重新加载页面时，它会记住当前的缩放级别（而不是按照initial-scale指令将其重置为1）。

I modified the Apache site to serve from http instead of https, and it still worked! 我修改了Apache网站，使其从http而不是https提供服务，但它仍然有效！ It modified the Apache site to server from port 8081 instead of 80, and it still worked! 它将Apache站点从8081端口（而不是80）修改为服务器，并且仍然有效！ So the only remaining difference that I can see is that one is server by Apache, and one is served by express.js. 因此，我能看到的唯一剩下的区别是，一个是Apache的服务器，一个是express.js的服务器。

But when I use Chrome developer tools to inspect the HTML on the page, it's the same identical HTML. 但是，当我使用Chrome开发人员工具检查页面上的HTML时，它们是相同的HTML。 When I check the network requests to get the page there are some minor differences in the response headers but nothing I can see that would cause the express.js served page to cause the browser to ignore the meta viewport tag. 当我检查获取页面的网络请求时，响应头中有一些细微的差别，但是我什么都看不到，这会导致express.js服务页面导致浏览器忽略元视口标签。

I've tried to troubleshoot this problem but I'm running out of ideas. 我曾尝试解决此问题，但想法不多了。 What could be going on here? 这可能是怎么回事？

Answer 1

This has nothing to do how the page is server. 这与页面如何作为服务器无关。 It will happen if your mobile browser has the "Desktop site" option checked under the options menu (usually three dots in the upper right corner). 如果您的移动浏览器在选项菜单下选中了“桌面站点”选项（通常在右上角为三个点），则会发生这种情况。

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

问题描述

1 个解决方案

解决方案1
0 2018-06-20 23:19:19

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

问题描述

1 个解决方案

解决方案1 0 2018-06-20 23:19:19

解决方案1
0 2018-06-20 23:19:19