Question

在移动设备上，如果某个其他元素比视口宽，但不在桌面上，则position: fixed; right: 0;元素会被推出视口。像这样：

如何确保元素在移动浏览器中保留在屏幕上？

使用http://jsbin.com/zawijayata/edit?html,output和http://output.jsbin.com/zawijayata/进行游戏。

Answer 1

除非有理由让元素大于视口，否则请将以下div上的width:400px更改为：

width: 100%;
max-width: 400px;

Answer 2

vw单位似乎表现得像我想要的那样，所以position: fixed; left:calc(100vw - 75px);有点工作，但它需要硬编码元素的宽度（75px）。也许有另一种方法可以使用vw来获得正确的效果。

Answer 3

替代解决方案 - 位置：绝对而非固定作品，我已将代码粘贴到页面中并托管在本地环境中以在实际移动设备上进行测试并且它可以工作（尽管它不起作用）在你的代码中，不知道为什么）。另请注意对元视口行的更改，以便移动浏览器不要尝试缩小页面以适应600px div。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
    <div style="position:absolute; top:0; right:0;">Top Right</div>
    <div style="width:600px; border:1px solid blue;">600px<?
</body>
</html>

保持位置：固定;右：0;移动浏览器屏幕上的元素

3 个答案: