OGeek|极客世界-中国程序员成长平台

标题: iphone - iOS Safari - 将元素放置在视口(viewport)之外 [打印本页]

作者: 菜鸟教程小白    时间: 2022-12-12 09:32
标题: iphone - iOS Safari - 将元素放置在视口(viewport)之外

我想知道是否可以在 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-推荐答案


是的,如果你使用带有 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/






欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/) Powered by Discuz! X3.4