【问题标题】:Chrome: viewport 320 creates horizontal scrollbar and lets you scroll further down (responsive)Chrome:视口 320 创建水平滚动条并让您进一步向下滚动(响应式)
【发布时间】:2018-07-03 21:08:34
【问题描述】:

问题

我目前正在开发一个固定宽度为320px 的网站。

当将视口设置为320 时,我遇到的问题是我可以向下滚动到它应该向下滚动的位置,并且还有一个水平滚动条。

我尽可能地减少了代码并来到了这个 sn-p,它可以通过 Chrome Inspector 在 >320px(以及 Android 设备上)重现。

代码

<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 正确放大,没有水平滚动和底部空间

谢谢!

【问题讨论】:

    标签: html google-chrome responsive viewport


    【解决方案1】:

    我认为您可能会遇到此问题,因为您将响应式元标记设置为 320 的固定宽度。

    使这种响应的正确方法是将宽度设置为设备宽度

        <meta name="viewport" content="width=device-width, user-scalable=no">
    

    将宽度设置为 320 会影响虚拟视口的宽度并强制其缩放。

    【讨论】:

    • 这是我唯一的限制。内容完全适合320px(我对此并不满意)。所以在我的情况下width=device-width 不会这样做。
    • 为什么不更新主体,使其始终在视口中居中,就像这样 让我知道连同内容 device-width 一起解决了您的问题。
    • This 不能从 > 320px 扩展:-我需要它,就像 this 一样,但没有来自 OP 的 gif 中的错误
    【解决方案2】:

    通过摆脱内部内容必须是320 的限制来解决它(将所有div 容器更改为100%viewportwidth=device-width)。 原来的 bug 好像是 chrome bug。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-09-07
      • 1970-01-01
      • 1970-01-01
      • 2016-08-05
      相关资源
      最近更新 更多