元视口在Chrome设备模式下不起作用 [英] meta viewport has no effect in Chrome Device Mode
问题描述
这些是重现此问题的步骤(在Linux和Mac上均使用64位的Chrome 53.0.2785.101和Chromium 53.0.2785.143测试)
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)
- 复制此简单的HTML代码并将其粘贴到新文件中
<！DOCTYPE html>
< html>
< head>
<元字符集="UTF-8">
<！-取消注释.在chrome设备模式下(开发工具的一部分)，它不起作用.它没有故意包含initial-scale = 1->
<！-元名称=视口" content ="width = device-width"->
< title>初始比例尺</title>
</head>
< body>
< p>
Lorem ipsum dolor坐在amet的办公室，自私自利.眼科医师和眼科医师将眼科视光和眼眶内的视物腐败归因于眼前的腐败现象.
Lorem ipsum dolor坐在amet的办公室，自私自利.负号面容fuga aliquam velit perferendis cum ut officiis ex quia delectus sint别名soluta saepe libero dolor odit exercitationem！
Lorem ipsum dolor坐在amet的办公室，自私自利.波斯佩斯皮亚提斯·波斯波斯·法拉克·纳库姆·克雷佩迪埃塔·意大利·古斯塔克·皮库塔斯减负······································•
</p>
</body>
</html>
<!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>
- 使用Google Chrome在设备模式"下将其打开.模拟任何终端，甚至使用响应模式.
我期望的结果:小文本.由于此视频中所述的效果，浏览器会将宽度默认设置为980px(典型值)桌面浏览器宽度)
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
因此，第一个问题:为什么我看不到视频中所显示的小文本?
更新时间:我的猜测:Chrome是否正在字体增强 ?
UPDATED: My guess: Is Chrome doing font boosting?
现在，第二个实验.只需取消注释元视口标记.目的是复制这种缩放效果，这是由于缺少初始-比例= 1.因此，请在iPhone 5仿真器中打开网页，然后使用纵向/横向模式.
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.
我期望的结果:链接中说明的缩放效果.屏幕的宽度在横向模式下已更改，因此，如果没有initial-scale = 1，我应该会看到文本放大.
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.
我能得到的:文字在纵向和横向模式下都保持相同的大小.但是我没有应用initial-scale = 1修饰符...
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...
查看屏幕截图
第二个问题:为什么我不需要initial-scale = 1才能使文本在横向模式下看起来不错?
在此示例中，它按我的预期发生:
- 一开始的文字很小(没有meta视口)
-
如果我完整地添加了元视口，则一切都将正确放置.
- Text is tiny at first (no meta viewport)
If I add the meta viewport complete, everything fits properly.
推荐答案
我认为这与您格式化这些HTML注释的方式有关.
I think it just has something to do with the way that you're formatting those HTML comments.
没有标签:
带有标签:
尝试在<!--和-->注释定界符与注释文本之间添加一个空格.
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.
还要注意，我同时设置了width和initial-scale，这就是
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:
这篇关于元视口在Chrome设备模式下不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
