Chrome：视口 320 创建水平滚动条并让您进一步向下滚动（响应式）
Chrome: viewport 320 creates horizontal scrollbar and lets you scroll further down (responsive)
问题
我目前正在开发一个固定宽度 320px 的网站。
将视口设置为 320 时，我遇到的问题是我可以进一步向下滚动，而且还有一个水平滚动条。
我尽可能地减少了代码，并找到了这个片段，它可以在 >320px（以及 Android 设备上）的 Chrome Inspector 中重现。
代码
<html style="overflow-x: hidden;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=320, user-scalable=no">
<title>Test</title>
</head>
<body style="width: 320px">
<div>
<p>
Bacon ipsum dolor amet alcatra porchetta ham, ball tip pork chop kielbasa tail. Brisket prosciutto shoulder kielbasa picanha spare ribs ball tip. Biltong drumstick venison burgdoggen. Shankle meatball flank jerky boudin porchetta pig bresaola tongue shoulder pork chop prosciutto. Capicola fatback burgdoggen shoulder frankfurter biltong pork chop flank swine bresaola boudin buffalo ground round strip steak. Strip steak andouille pancetta flank pig ham cow capicola. Chuck jowl tenderloin flank leberkas. Ground round pastrami chicken, turducken hamburger ribeye rump shankle pork belly shank beef ribs short ribs kielbasa andouille porchetta. Rump pig bacon tongue jerky. Pork loin brisket buffalo ball tip.
</p>
<p>
Tenderloin kevin pancetta rump venison beef. Kielbasa tail pork belly cow venison capicola meatball, landjaeger short ribs alcatra. Short ribs hamburger prosciutto shank meatball, strip steak rump tongue. Pork belly short ribs capicola chuck chicken sirloin jowl tri-tip t-bone. Pork chop corned beef tail ball tip. Pancetta tri-tip tenderloin, leberkas shoulder pork belly biltong pork chop cupim kevin ham hock pork loin doner jowl landjaeger. Ground round turkey salami capicola tail rump.
Sausage swine turkey kielbasa tail porchetta turducken ball tip capicola buffalo biltong jowl. Cow doner turducken ham hock, beef bacon short loin brisket biltong prosciutto buffalo pork. Chicken ribeye rump tri-tip sirloin short ribs frankfurter swine pork loin meatball pancetta. Alcatra rump pork cow, strip steak shank chicken jerky burgdoggen pancetta drumstick swine hamburger prosciutto bresaola. Beef pork flank shankle.
</p>
<p>
Bacon ipsum dolor amet alcatra porchetta ham, ball tip pork chop kielbasa tail. Brisket prosciutto shoulder kielbasa picanha spare ribs ball tip. Biltong drumstick venison burgdoggen. Shankle meatball flank jerky boudin porchetta pig bresaola tongue shoulder pork chop prosciutto. Capicola fatback burgdoggen shoulder frankfurter biltong pork chop flank swine bresaola boudin buffalo ground round strip steak. Strip steak andouille pancetta flank pig ham cow capicola. Chuck jowl tenderloin flank leberkas. Ground round pastrami chicken, turducken hamburger ribeye rump shankle pork belly shank beef ribs short ribs kielbasa andouille porchetta. Rump pig bacon tongue jerky. Pork loin brisket buffalo ball tip.
</p>
<p>
Tenderloin kevin pancetta rump venison beef. Kielbasa tail pork belly cow venison capicola meatball, landjaeger short ribs alcatra. Short ribs hamburger prosciutto shank meatball, strip steak rump tongue. Pork belly short ribs capicola chuck chicken sirloin jowl tri-tip t-bone. Pork chop corned beef tail ball tip. Pancetta tri-tip tenderloin, leberkas shoulder pork belly biltong pork chop cupim kevin ham hock pork loin doner jowl landjaeger. Ground round turkey salami capicola tail rump.
Sausage swine turkey kielbasa tail porchetta turducken ball tip capicola buffalo biltong jowl. Cow doner turducken ham hock, beef bacon short loin brisket biltong prosciutto buffalo pork. Chicken ribeye rump tri-tip sirloin short ribs frankfurter swine pork loin meatball pancetta. Alcatra rump pork cow, strip steak shank chicken jerky burgdoggen pancetta drumstick swine hamburger prosciutto bresaola. Beef pork flank shankle.
</p>
</div>
</body>
</html>
演示
预期行为
从 320px 开始更正升级，没有水平滚动和底部 space
谢谢！
我认为您可能会遇到此问题，因为您将响应式元标记设置为固定宽度 320。
实现此响应的正确方法是将宽度设置为设备宽度
<meta name="viewport" content="width=device-width, user-scalable=no">
将宽度设置为 320 会影响虚拟视口的宽度并强制其缩放。
通过摆脱内部内容必须是 320 的限制来解决它（将所有 div 容器更改为 100% 并将 viewport 更改为 width=device-width).
原来的错误似乎是 chrome 个错误。
问题
我目前正在开发一个固定宽度 320px 的网站。
将视口设置为 320 时，我遇到的问题是我可以进一步向下滚动，而且还有一个水平滚动条。
我尽可能地减少了代码，并找到了这个片段，它可以在 >320px（以及 Android 设备上）的 Chrome Inspector 中重现。
代码
<html style="overflow-x: hidden;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=320, user-scalable=no">
<title>Test</title>
</head>
<body style="width: 320px">
<div>
<p>
Bacon ipsum dolor amet alcatra porchetta ham, ball tip pork chop kielbasa tail. Brisket prosciutto shoulder kielbasa picanha spare ribs ball tip. Biltong drumstick venison burgdoggen. Shankle meatball flank jerky boudin porchetta pig bresaola tongue shoulder pork chop prosciutto. Capicola fatback burgdoggen shoulder frankfurter biltong pork chop flank swine bresaola boudin buffalo ground round strip steak. Strip steak andouille pancetta flank pig ham cow capicola. Chuck jowl tenderloin flank leberkas. Ground round pastrami chicken, turducken hamburger ribeye rump shankle pork belly shank beef ribs short ribs kielbasa andouille porchetta. Rump pig bacon tongue jerky. Pork loin brisket buffalo ball tip.
</p>
<p>
Tenderloin kevin pancetta rump venison beef. Kielbasa tail pork belly cow venison capicola meatball, landjaeger short ribs alcatra. Short ribs hamburger prosciutto shank meatball, strip steak rump tongue. Pork belly short ribs capicola chuck chicken sirloin jowl tri-tip t-bone. Pork chop corned beef tail ball tip. Pancetta tri-tip tenderloin, leberkas shoulder pork belly biltong pork chop cupim kevin ham hock pork loin doner jowl landjaeger. Ground round turkey salami capicola tail rump.
Sausage swine turkey kielbasa tail porchetta turducken ball tip capicola buffalo biltong jowl. Cow doner turducken ham hock, beef bacon short loin brisket biltong prosciutto buffalo pork. Chicken ribeye rump tri-tip sirloin short ribs frankfurter swine pork loin meatball pancetta. Alcatra rump pork cow, strip steak shank chicken jerky burgdoggen pancetta drumstick swine hamburger prosciutto bresaola. Beef pork flank shankle.
</p>
<p>
Bacon ipsum dolor amet alcatra porchetta ham, ball tip pork chop kielbasa tail. Brisket prosciutto shoulder kielbasa picanha spare ribs ball tip. Biltong drumstick venison burgdoggen. Shankle meatball flank jerky boudin porchetta pig bresaola tongue shoulder pork chop prosciutto. Capicola fatback burgdoggen shoulder frankfurter biltong pork chop flank swine bresaola boudin buffalo ground round strip steak. Strip steak andouille pancetta flank pig ham cow capicola. Chuck jowl tenderloin flank leberkas. Ground round pastrami chicken, turducken hamburger ribeye rump shankle pork belly shank beef ribs short ribs kielbasa andouille porchetta. Rump pig bacon tongue jerky. Pork loin brisket buffalo ball tip.
</p>
<p>
Tenderloin kevin pancetta rump venison beef. Kielbasa tail pork belly cow venison capicola meatball, landjaeger short ribs alcatra. Short ribs hamburger prosciutto shank meatball, strip steak rump tongue. Pork belly short ribs capicola chuck chicken sirloin jowl tri-tip t-bone. Pork chop corned beef tail ball tip. Pancetta tri-tip tenderloin, leberkas shoulder pork belly biltong pork chop cupim kevin ham hock pork loin doner jowl landjaeger. Ground round turkey salami capicola tail rump.
Sausage swine turkey kielbasa tail porchetta turducken ball tip capicola buffalo biltong jowl. Cow doner turducken ham hock, beef bacon short loin brisket biltong prosciutto buffalo pork. Chicken ribeye rump tri-tip sirloin short ribs frankfurter swine pork loin meatball pancetta. Alcatra rump pork cow, strip steak shank chicken jerky burgdoggen pancetta drumstick swine hamburger prosciutto bresaola. Beef pork flank shankle.
</p>
</div>
</body>
</html>
演示
预期行为
从 320px 开始更正升级，没有水平滚动和底部 space
谢谢！
我认为您可能会遇到此问题，因为您将响应式元标记设置为固定宽度 320。
实现此响应的正确方法是将宽度设置为设备宽度
<meta name="viewport" content="width=device-width, user-scalable=no">
将宽度设置为 320 会影响虚拟视口的宽度并强制其缩放。
通过摆脱内部内容必须是 320 的限制来解决它（将所有 div 容器更改为 100% 并将 viewport 更改为 width=device-width).
原来的错误似乎是 chrome 个错误。