Javascript 将固定元素与手机屏幕对齐？_Javascript_Jquery_Html_Css_Css Position

Javascript 将固定元素与手机屏幕对齐？

javascript jquery html css

Javascript 将固定元素与手机屏幕对齐？,javascript,jquery,html,css,css-position,Javascript,Jquery,Html,Css,Css Position,固定元素在桌面上完全对齐（底部和右侧与浏览器窗口对齐）。但在移动设备上，元素与容器大小对齐这是它在手机上的外观（黑线代表屏幕）：这就是我希望它在手机上的外观（黑线代表屏幕）：示例代码（在我的实际应用程序中，画布需要大于视口（因此画布的150vh和150vw大小）： html <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,

固定元素在桌面上完全对齐（

底部

和

右侧

与浏览器窗口对齐）。但在移动设备上，元素与容器大小对齐

这是它在手机上的外观（黑线代表屏幕）：

这就是我希望它在手机上的外观（黑线代表屏幕）：

示例代码（在我的实际应用程序中，画布需要大于视口（因此画布的

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>

关于如何解决这个问题有什么建议吗？

试试看

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

或

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

body {
   width: 100vw;
}

我创建了一个适用于我的代码笔示例：

我希望这就是你所寻找的。

你是那里的混合装置（大众和px）

vw单位相对于视口的宽度。将此值设置为

150vw

将使“画布”（类为

container

的div容器）的宽度增加150%。它将主体或视口向右延伸50%

将固定元素位置值设置为固定单位

right:200px

在某些视口中可能会起作用，但肯定不会在所有视口中都起作用。视口越宽，容器越宽（150vw），但200px始终不变。

默认位置：固定是相对于视口的，您需要根据屏幕调整css，否则您必须更改位置：固定为绝对形式。您不应使用用户可缩放=“否”。您正在使用此设置导致可访问性问题。谢谢您的回答，但它没有解决问题（请尝试在手机上打开codepen示例），我解决了问题，而使用您的codepen它不起作用，但使用我的代码笔就可以了。你用什么手机？你打开全屏的例子了吗？嗯，我在iphone5s上全屏试用过，但没有成功。元素与容器一起滚动。谢谢。你会如何为这个布局编写css（在桌面和移动设备上工作）？有两种可能的解决方案：你不再像这里的一些评论员建议的那样将画布扩展到150%的视口，并使用

100vw

或

100%

的宽度，或者如果你想写得漂亮（r）CSS只是在没有div容器的宽度值的情况下使用类

container

。然后，您可以将固定图元相对于该图元进行定位。或者：您也在

vw

中相对地设置了位置，其中一个的值应该高于

right:50vw

，另一个的值高于

left:50vw

。我发现我的问题不够清楚。部分问题在于画布需要比视口大。我需要一些元素保持固定状态（

.fixedElement1

和

.fixedElement2

），而“背景”（

.container

）是可滚动的。如果你知道我的意思，那么

position:fixed

是错误的方法。这些元素不应该与

.container

一起滚动，对吗？对于这些元素来说

位置：绝对值

不是更有意义吗？我的问题不够清楚。我现在更新了。部分问题在于画布需要比视口大。当“背景”（.container）可滚动时，我需要一些元素保持固定（即.fixedElement 1和.fixedElement 2）。@allegutta如果替换以下css.fixedElement{position:fixed；top:50px；right:calc（200px+50vw）；}.fixedElement 2{position:fixed；bottom:calc（50px+50vh）；left:200px；}

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

body {
   width: 100vw;
}