奇怪的 iPad 纵向和横向视图问题答案

【问题标题】：Strange iPad portrait and landscape view issue奇怪的 iPad 纵向和横向视图问题
【发布时间】：2023-03-22 23:52:01
【问题描述】：

我没有 iPad，所以我无法正确测试，在线模拟器似乎不够可靠。

问题：（客户的话）

该网站在纵向和横向上都能完美加载。但是，如果我在横向查看，然后旋转屏幕，纵向视图会像以前一样偏向左侧，但没有那么糟糕。

图片：经审查的 NSFW 图像
链接：http://bybyweb.com/london（警告：NSFW 内容）

注意：它发生在所有浏览器中，除了水星。

我已将媒体查询用于“纵向”视图，因为 iPad 处于横向模式 (1024 像素) 应该可以正确显示桌面版本。

CSS：

@media screen and (min-width : 767px) and (max-width: 1023px) { 
    #date h1 {
            font-size:48px;
        line-height:88px;
        margin:-3px 0 0 340px;
        padding:0;
        color:#fff;
        letter-spacing:0px;
        word-spacing:0px;
        font-weight:bold;
    }
    #joinform {
        float: right;
        width: 525px;
        height: 500px;
        left: 300px;
        position: absolute;
        z-index: 7;
        padding-left: 5px;
        padding-top: 6px;
        overflow:hidden;
    }
    #member-login {
        position:absolute;
        left:470px;
        top:15px;
    }
    #members-signup {
        width:180px;
    }

    #members-area h2 {
        line-height:30px;
        font-size:30px;
        margin:0 0 0 15px;
        padding:65px 0 0 0;
        font-weight:bold;
        color: #454545;
    }


    #members-list {
        width:500px;
        height:220px;
        float:left;
        overflow:hidden;

    }
    #members-list h3 {
        line-height:20px;
        font-size:20px;
        margin:0px;
        padding:25px 0 5px 0px;
        font-weight:400;
    }
    #content {
        width:100%;
    }
    #about-area {
        width:100%;
    }

    #about-area p{
        width:90%;

    }

    #about-area h3 br{
        display:none;
    }

    #about-area p br {
        display:none;
    }

    #join-img-holder {
        width:100%;
    }
    #members-area {
        width:100%;
    }
    #logo-area {
        width:100%;
    }
    #footer-content {
        width:100%;
    }
}

完整页面css链接：http://bybyweb.com/london/css/style.css

我做错了什么？

附：修复 position:relative 没有解决我的问题，“人像”视图中还有很多空白空间？！我会很感激帮助。奇怪的是方向改变后出现的问题。

【问题讨论】：

iOS6 Safari orientation change bug?的可能重复
谢谢，安德烈，我希望就是这样......
P.S.修复 position:relative 没有解决我的问题，“人像”视图中还有很多空白空间？！我将不胜感激。

标签： html css media-queries

【解决方案1】：

答案是：问题是一个元素的宽度 - #joinform。我已将宽度减小到 463 像素，现在一切正常。似乎溢出：隐藏不起作用：iPad倾向于“显示”隐藏的内容，并在需要时在页面上“推送”元素。

因此，在任何情况下，宽度总和都不应超过 100%，iPad 不能容忍。

另外，我得到了有关 iPad 测试的好建议 - Google Chrome 模拟器（包含在最新版本中）非常可靠（在模拟中可以看到错误）。

我希望这对某人有所帮助。

【讨论】：