HTML meta viewport tag ignored when served by express.js
Question
I've got the following code. I am loading it in Chrome 67 under Android 8.1. I am loading the same code from two sites. One URL looks like this and is served by Apache:
The second looks like this and is served by express.js:
http://my.site:8081/vtest.html
The same static HTML page is being served in both cases:
<!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).
I modified the Apache site to serve from http instead of https, and it still worked! It modified the Apache site to server from port 8081 instead of 80, and it still worked! So the only remaining difference that I can see is that one is server by Apache, and one is served by express.js.
But when I use Chrome developer tools to inspect the HTML on the page, it's the same identical 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.
I've tried to troubleshoot this problem but I'm running out of ideas. What could be going on here?
1 answers
solution1
0 2018-06-20 23:19:19
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.