问题
These are the steps to reproduce the problem (tested with Chrome 53.0.2785.101 and Chromium 53.0.2785.143, both 64 bits, in Linux and Mac)
- Copy this simple HTML code and paste it in a new file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--uncomment this. It has no effect in chrome device mode (part of dev tools). It doesn't contain initial-scale=1 on purpose -->
<!--meta name="viewport" content="width=device-width"-->
<title>Initial Scale</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio in illo nisi totam eaque ipsam asperiores est nemo dolor ab commodi corporis nostrum voluptas sint corrupti quo obcaecati dolores expedita.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus voluptas facere odio fuga aliquam velit perferendis cum ut officiis ex quia delectus sint alias soluta saepe libero dolor odit exercitationem!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aut possimus facere necessitatibus nam cumque repudiandae itaque recusandae minus hic exercitationem soluta officia voluptates neque quia maxime voluptatum eaque sed!
</p>
</body>
</html>
- Open it with Google Chrome in Device Mode. Emulate any terminal, or even use the responsive mode.
What I expect: Tiny text. Because of the effect explained in this video: The browser will default the width to 980px (typical desktop browser width)
What I get: the text has normal size. Check screenshot
So, first question: Why am I not seeing the text small, like is explained in the video?
UPDATED: My guess: Is Chrome doing font boosting?
Now, second experiment. Just uncomment the meta viewport tag. The aim is to reproduce this zooming effect, caused by the lack of initial-scale=1. So, open the web page in the iPhone 5 emulator, and use portrait/landscape modes.
What I expect: the zoom effect explained in the link. The width of the screen has changed in landscape mode, so, without initial-scale=1, I should see the text zoomed.
What I get: the text keeps the same size in both, portrait and landscape modes. But I'm not applying the initial-scale=1 modifier...
Check screenshots
So, second question: why don't I need initial-scale=1 to make the text look nice in landscape mode?
In this example, it happens as I expect:
- Text is tiny at first (no meta viewport)
If I add the meta viewport complete, everything fits properly.
回答1:
I think it just has something to do with the way that you're formatting those HTML comments.
Without tag:
With tag:
Try adding a space between the <!-- and --> comment delimiters and the comment text.
I don't know the spec that well but I think that your comment format is valid, but for some reason it's causing a bug.
Also note that I'm setting both width and initial-scale which is how the best practices doc recommend it. However, it's working for me when I only set width as you did:
来源：https://stackoverflow.com/questions/40185620/meta-viewport-has-no-effect-in-chrome-device-mode