Question

我面临与固定元素宽度相关的问题。这是笔：

<body>
  <nav class="navbar">
    <div style="position:absolute; left:20px; top:12px">
      <a href="#">left</a>
    </div>
    <div style="position:absolute; right:20px; top:12px">
      <a href="#">right</a>
    </div>
  </nav>

  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis, diam quis hendrerit bibendum, augue massa tempor neque, et dapibus risus ligula tempor nulla. Donec accumsan tortor eget lorem venenatis, ac tincidunt eros volutpat. Mauris
      tempus libero metus, in posuere velit scelerisque vel. Donec dapibus dolor eu tortor interdum tincidunt. Donec dignissim nisl eleifend mauris efficitur dignissim. Nullam bibendum felis a nibh maximus efficitur. Donec commodo est at maximus facilisis.
      Sed risus dui, ultricies non accumsan sit amet, volutpat sit amet dui. Sed blandit tempus feugiat. Aliquam quis felis at eros vehicula viverra in eget ante. Phasellus tempus blandit turpis, sed condimentum nisl rutrum eget. Pellentesque suscipit
      sem accumsan nunc dapibus, id volutpat eros molestie. Proin dolor nisi, sodales quis tempor sagittis, sodales non lorem. Sed porta et nisl vel scelerisque.</p>
    <p>Maecenas dapibus mattis sem. Nam suscipit urna nec massa maximus gravida. Aliquam nec arcu scelerisque, elementum orci at, dictum augue. Sed quis ex risus. Integer nec imperdiet nisi. Cras non pretium metus. In feugiat metus a ante tincidunt euismod.
      Nunc leo nisi, pellentesque non sem ut, posuere vulputate ante. Morbi elementum vel libero in egestas. Pellentesque convallis ullamcorper mi ut sagittis. Vivamus ut facilisis sapien, vel consequat ligula. Vestibulum quis vehicula dui, vitae finibus
      ante. Ut elementum suscipit nisl eu vestibulum. Integer semper aliquam metus.</p>
    <p>Proin sapien ligula, pharetra id magna sit amet, bibendum fermentum tortor. Donec ultricies ex vel iaculis mollis. Duis scelerisque tellus purus, eu eleifend arcu scelerisque ac. Curabitur varius velit nunc, sit amet sollicitudin nibh rhoncus a. Nam
      eu cursus sem, at tempor eros. Sed sodales, ante eu sagittis interdum, tortor dui feugiat diam, eu tempor mi justo sed risus. Ut non vulputate ligula, eu fermentum felis. Duis quis leo vel nulla ullamcorper viverra ut in leo. Suspendisse scelerisque,
      lorem commodo convallis consequat, ex nulla maximus nunc, ac faucibus augue risus quis arcu. Fusce porttitor, augue non malesuada consequat, odio tellus viverra diam, ut tempus mi tortor ac felis. Proin a pretium nibh, in volutpat ligula. Mauris
      non diam massa.</p>
    <p>Maecenas hendrerit tincidunt ultrices. Sed vel sem velit. Cras felis purus, commodo a velit sit amet, fringilla blandit quam. Mauris ac cursus libero. Proin volutpat ut justo ut porta. Nulla lacus arcu, hendrerit sit amet nisi sed, dictum fermentum
      erat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
    <p>Donec nisl quam, efficitur non neque nec, vulputate rutrum lorem. Maecenas non finibus lectus. Nullam eu odio non leo mollis gravida. Aenean massa dolor, varius a hendrerit eu, molestie eu diam. Morbi lacus ipsum, ultrices et massa quis, viverra rutrum
      urna. Sed vehicula convallis massa, ac maximus diam maximus in. Aliquam non ultrices orci. Phasellus erat ante, iaculis a iaculis eget, porttitor ut nibh. Sed varius hendrerit semper. Phasellus cursus posuere semper. Curabitur pulvinar eget metus
      eget ultricies.</p>
  </div>

  <nav id="menu-left">
  </nav>

  <nav id="menu-right">
  </nav>

</body>

该片段模仿了一个双面菜单（不包括在内），其中一个＆＃34;崩溃了＃34;侧边栏是从窗口进行3D翻译的。为简单起见，两个侧边栏（半透明的绿色和红色）仅根据自己的宽度进行部分平移。

通过在＆＃34;桌面模式＆＃34;中查看页面一切正常。当您看到使用（几乎）任何移动设备的页面时，问题就变得清晰了。该页面似乎是水平滚动的，虽然我没有看到任何原因，因为它是在桌面视图中这样做的。第一个＆＃34;导航＆＃34;元素显示其宽度大于文档：为什么？而且，我无法找到将宽度限制在文档本身的方法。

简而言之，我希望从视口中翻译的元素应该保持不可见，并且移动设备上的滚动，平移，缩放或其他任何内容都不应显示它们。

Answer 1

找到它。

只需添加＆＃34; user-scalable = no＆＃34;切换它解决问题的元元素。

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

有用的链接：https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

移动设备上的视口宽度问题在＆＃34;固定＆＃34;元件

1 个答案: