Question

我必须在实际内容的右边添加一个div（带有一些横幅）。 div是绝对定位的。在具有足够显示空间的普通笔记本电脑/台式机上，这不是问题。

然而，在便携式设备上，div被视为内容的一部分。因此视口被缩放为包含它。虽然将div包含在输出中很重要，但我希望它不包含在初始视图中。实际内容应该最大化，我希望人们能够简单地横向滚动到横幅 - 如果他们选择（这不是因为我被迫添加横幅，我必须突出定位他们！）。

这可能吗？

目前的CSS如下：

#side-container {
    position: absolute;
    top: 90px;
    right: -140px;
    width: 128px;
    text-align: center;
}

我主要谈论iOS（Safari / Chrome）

Answer 1

从我的角度来看，您可以使用CSS代码完全实现所需的行为。也许您的页面中缺少元元素<meta name="viewport" content="width=device-width, initial-scale=1">。

这是一个适用于iOS 8.0.2的iPhone 4S和Android 4.4.4的Nexus 5的示例，至少在初始页面加载时。当您放大或缩小并点击浏览器刷新按钮时，它将保持在缩放的视口中。但是当您再次加载页面（输入URL并转到）时，它将返回到所需的行为。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>banner</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
    #side-container {
      position: absolute;
      top: 90px;
      right: -140px;
      width: 128px;
      text-align: center;
    }
  </style>


</head>

<body>

  <h1>main content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque consectetur consequuntur cum dolorum earum illo itaque laborum, magni, maiores nesciunt nisi provident quasi suscipit tempora ullam velit veritatis voluptatem!
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque consectetur consequuntur cum dolorum earum illo itaque laborum, magni, maiores nesciunt nisi provident quasi suscipit tempora ullam velit veritatis voluptatem!
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque consectetur consequuntur cum dolorum earum illo itaque laborum, magni, maiores nesciunt nisi provident quasi suscipit tempora ullam velit veritatis voluptatem!
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque consectetur consequuntur cum dolorum earum illo itaque laborum, magni, maiores nesciunt nisi provident quasi suscipit tempora ullam velit veritatis voluptatem!
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque consectetur consequuntur cum dolorum earum illo itaque laborum, magni, maiores nesciunt nisi provident quasi suscipit tempora ullam velit veritatis voluptatem!
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque consectetur consequuntur cum dolorum earum illo itaque laborum, magni, maiores nesciunt nisi provident quasi suscipit tempora ullam velit veritatis voluptatem!
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque consectetur consequuntur cum dolorum earum illo itaque laborum, magni, maiores nesciunt nisi provident quasi suscipit tempora ullam velit veritatis voluptatem!
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque consectetur consequuntur cum dolorum earum illo itaque laborum, magni, maiores nesciunt nisi provident quasi suscipit tempora ullam velit veritatis voluptatem!
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque consectetur consequuntur cum dolorum earum illo itaque laborum, magni, maiores nesciunt nisi provident quasi suscipit tempora ullam velit veritatis voluptatem!
  </p>

  <div id="side-container">
    <h2>banner content</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse nisi, quam. Dolorem doloremque ex pariatur quod rem repudiandae tenetur voluptate. Expedita, harum nesciunt numquam provident quas repellat? Aliquid dolores, maxime?</p>
  </div>
</body>

</html>

＆＃13;

在移动浏览器中从初始视口中排除DIV

1 个答案: