我想知道是否可以在 iOS6 的视口(viewport)之外使用 position: absolute; 定位元素。
即使我使用 <meta name="viewport"content="width=640, maximum-scale=0.5, initial-scale=0.5, minimum-scale=0.5"/> 如果元素以 right: 0; 的方式定位,则视口(viewport)具有更大的宽度; margin-right: -100px; (视口(viewport)外 100px)。
iOS 试图在视口(viewport)中包含这个元素,这不是我想要的。我想让它部分可见和部分隐藏。 iOS 增加了水平滚动条,并包含了应该隐藏的元素部分。
Best Answer-推荐答案 strong>
是的,如果你使用带有 overflow: hidden 的包装器
这个例子显示了一个 100x100px 的红色矩形,它位于视口(viewport)右侧 50px 的位置,但视口(viewport)不包括它。
创建一个与视口(viewport)右侧对齐的容器#limit 。通过设置溢出防止内容放大视口(viewport)。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#limit {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
overflow: hidden;
}
#offset {
position: absolute;
top: 0px;
right: -50px;
width: 100px;
height: 100px;
background: #f00;
}
</style>
</head>
<body>
<div id="limit">
<div id="offset">
Hello
</div>
</div>
</body>
</html>
关于iphone - iOS Safari - 将元素放置在视口(viewport)之外,我们在Stack Overflow上找到一个类似的问题:
https://stackoverflow.com/questions/15327519/
|