代码之家  ›  专栏  ›  技术社区  ›  Philipp

chrome:viewport 320创建水平滚动条,允许您进一步向下滚动(响应)

  •  0
  • Philipp  · 技术社区  · 8 年前

    发行

    我目前正在一个网站上工作,该网站的设计固定宽度为 320px

    当将视区设置为 320时,我面临的问题是我可以向下滚动,然后它应该向下滚动,还有一个水平滚动条。

    我尽可能地减少了代码,并找到了这个片段,在这里可以通过chrome inspector at> 320px进行复制(以及在Android设备上)。

    代码

    <html style=“overflow-x:hidden;”>
    <头部>
    <meta charset=“utf-8”>
    <meta name=“viewport”content=“width=320,user scalable=no”>
    <title>测试</title>
    </head>
    <body style=“width:320px”>
    <DIV>
    <P>
    培根ipsum dolor amet alcatra porchetta火腿,球尖猪排kielbasa尾。牛胸肉排骨肩胛骨皮坎哈排骨球尖。比尔通鸡腿鹿肉。香克利肉丸侧翼肉汤猪乳酪舌肩肉排骨火腿。Capicola Fatback Burgdoggen肩扛法兰克福必通猪排侧翼猪Bresaola Boudin水牛磨砂圆条牛排。剥去牛排和肉饼,猪排,火腿,奶牛,头巾。夹头下巴里脊侧leberkas。磨碎的圆糕点鸡,吐鲁番汉堡,里脊,臀部,猪肉,肚皮,牛排骨,短排骨,基尔巴萨和欧维尔猪。猪屁股,培根,舌头,肉干。猪排牛腩水牛球尖。
    </p>
    <P>
    里脊Kevin Pancetta Rump鹿肉牛肉。基尔巴萨尾猪肚牛鹿肉Capicola肉丸,澳洲野猪短排骨Alcatra。短排骨汉堡包意大利火腿柄肉丸,牛排后腿条。猪肚排骨Capicola夹头鸡牛里脊骨三叉T型骨。猪排咸牛肉尾丸尖。薄煎饼三尖里脊,莱伯卡斯肩肉肚比尔通猪排骨杯凯文火腿猪排多纳约尔兰杰格。火鸡尾尾尾肉周围的地面。
    香肠,猪,火鸡,基尔巴萨尾巴,豪猪,吐鲁达肯球头,卡皮科拉,水牛,比尔通,披肩。牛Doner Turducken火腿曲棍球,牛肉培根短腰肉胸肉Biltong火腿水牛肉。鸡里脊、臀部、三尖、牛里脊、短排骨、法兰克福猪、猪、猪、猪里脊、肉丸、薄饼。阿尔卡特肉牛,肉排,鸡腿鸡干,勃艮第肉饼,鸡腿猪汉堡,意大利火腿。猪肉侧翼肉。
    </p>
    <P>
    培根ipsum dolor amet alcatra porchetta火腿,球尖猪排kielbasa尾。牛胸肉排骨肩胛骨皮坎哈排骨球尖。比尔通鸡腿鹿肉。香克利肉丸侧翼肉汤猪乳酪舌肩肉排骨火腿。Capicola Fatback Burgdoggen肩扛法兰克福必通猪排侧翼猪Bresaola Boudin水牛磨砂圆条牛排。剥去牛排和肉饼,猪排,火腿,奶牛,头巾。夹头下巴里脊侧leberkas。磨碎的圆糕点鸡,吐鲁番汉堡,里脊,臀部,猪肉,肚皮,牛排骨,短排骨,基尔巴萨和欧维尔猪。猪屁股,培根,舌头,肉干。猪排牛腩水牛球尖。
    </p>
    <P>
    里脊Kevin Pancetta Rump鹿肉牛肉。基尔巴萨尾猪肚牛鹿肉Capicola肉丸,澳洲野猪短排骨Alcatra。短排骨汉堡包意大利火腿柄肉丸,牛排后腿条。猪肚排骨Capicola夹头鸡牛里脊骨三叉T型骨。猪排咸牛肉尾丸尖。薄煎饼三尖里脊,莱伯卡斯肩肉肚比尔通猪排骨杯凯文火腿猪排多纳约尔兰杰格。火鸡尾尾尾肉周围的地面。
    香肠,猪,火鸡,基尔巴萨尾巴,豪猪,吐鲁达肯球头,卡皮科拉,水牛,比尔通,披肩。牛Doner Turducken火腿曲棍球,牛肉培根短腰肉胸肉Biltong火腿水牛肉。鸡里脊、臀部、三尖、牛里脊、短排骨、法兰克福猪、猪、猪、猪里脊、肉丸、薄饼。阿尔卡特肉牛,肉排,鸡腿鸡干,勃艮第肉饼,鸡腿猪汉堡,意大利火腿。猪肉侧翼肉。
    </p>
    </DIV>
    </body>
    </html>
    

    演示

    预期行为

    纠正从320px开始的向上缩放,无需水平滚动和底部空间

    谢谢!320px.

    将视区设置为320我面临的问题是,我可以向下滚动,然后它应该,还有一个水平滚动条。

    我尽可能地减少了代码的数量,并找到了这段代码片段,在这里可以通过chrome inspector at>进行复制。30px(也适用于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>
    

    演示

    预期行为

    更正升迁自30px无水平滚动和底部空间

    谢谢您!

    2 回复  |  直到 8 年前
        1
  •  0
  •   TeoAlmonte    8 年前

    我认为您可能有这个问题,因为您将响应元标记设置为固定宽度320。

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

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

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

        2
  •  0
  •   Philipp    8 年前

    通过消除内部内容必须为 320的限制来解决它(Changed All Div Containers to 100% and the viewport to width=device width )。 最初的bug似乎是chrome bug。

    内在内容必须 320 (全部更改) div 容器到 100% 以及 viewport width=device-width ) 最初的bug似乎是一个chrome bug。