在移动设备上将固定元素与屏幕对齐？答案

【问题标题】：Align fixed elements to screen on mobile?在移动设备上将固定元素与屏幕对齐？
【发布时间】：2016-04-15 20:07:55
【问题描述】：

固定元素在桌面上完美对齐（@987654326@ 和 right 与浏览器窗口对齐）。但在移动设备上，元素与容器大小对齐。

这是它在移动设备上的样子（黑线代表屏幕）：

这就是我希望它在移动设备上的外观（黑线代表屏幕）：

示例代码（在我的实际应用程序中，画布需要大于视口（因此150vh 和150vw 的画布大小）：

html

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

<body>
  <div class="container">
    <div class="fixedElement">I AM A FIXED ELEMENT</div>
    <div class="fixedElement2">I AM A FIXED ELEMENT 2</div>
  </div>
</body>

css

body {
  margin: 0;
}

.container {
  width: 150vw;
  height: 150vh;
  background-color: orange;
}

.fixedElement {
  position: fixed;
  top: 50px;
  right: 200px;
}

.fixedElement2 {
  position: fixed;
  bottom: 50px;
  left: 200px;
}

Codepen example

关于如何解决此问题的任何建议？

【问题讨论】：

默认位置：固定是相对于视口，您需要根据屏幕调整css，否则您必须更改位置：固定为绝对形式。
你不应该使用 user-scalable="no"。您正在使用此设置导致可访问性问题。

标签： javascript jquery html css css-position

【解决方案1】：

只需将以下规则添加到 body 的 css 中：

body {
   width: 100vw;
}

我创建了一个适合我的 codepen 示例：Example on Codepen

我希望这就是您搜索的内容。

【讨论】：

感谢解答，但没有解决（尝试在手机上打开codepen示例）
我做了，用你的 codepen 没用，但用我的没问题。你用什么手机？您是否打开了全屏示例？
嗯，我在 iPhone 5S 上全屏尝试过，但没有成功。元素随着容器滚动。

【解决方案2】：

试试

.container {
  width: 100vw;
  height: 100vh;
}

或

html,body,.container{
   height:100%;
   width:100%;
}

【讨论】：

我的问题不够清楚。我现在更新了。部分问题是画布需要大于视口。我需要一些元素保持固定（.fixedElement1 和 .fixedElement2），而“背景”（.container）是可滚动的。
@allegutta what if ，如果您替换以下 css .fixedElement { position: fixed;顶部：50px；对：计算（200px + 50vw）； } .fixedElement2 { 位置：固定；底部：计算（50px + 50vh）；左：200px； }

【解决方案3】：

您正在那里混合单位（vw 和 px）。

vw 单位是相对于视口的宽度。将此值设置为 150vw 会使您的“画布”（具有 container 类的 div 容器）宽 150%。它将主体或视口向右扩展 50%。

将您的固定元素位置值设置为固定单位right: 200px 可能在某些视口中有效，但肯定不是。视口越宽，您的容器就越宽（150vw），但 200px 将始终相同。

【讨论】：

谢谢。你会如何为这个布局编写 css（在桌面和移动设备上工作）？
有两种可能的解决方案：您停止将画布扩展到视口的 150%，正如这里的一些评论者已经建议的那样，宽度为 100vw 或 100% 或者如果你想写nice(r) CSS 一开始就没有为具有类container 的div 容器设置宽度值。然后你可以相对于它定位你的固定元素。或者：您也可以在vw 中相对设置位置，其中一个值应该高于right: 50vw，另一个高于left: 50vw。
我发现我的问题不够清楚。部分问题是画布需要大于视口。我需要一些元素来保持固定（.fixedElement1 和.fixedElement2），而“背景”（.container）是可滚动的。如果你明白我的意思吗？
那么position: fixed 是错误的方法。元素不应该用.container滚动，对吧？
position: absolute 这些元素不会更有意义吗？