Question

我没有iPad，所以我无法正常测试，在线模拟器看起来不够可靠。

问题:(客户的话）

网站在纵向和横向都可以完美加载。但是，如果我在风景中查看，然后旋转屏幕，则纵向视图将像以前一样向左移动，但不会那么糟糕。

图片： CENSORED NSFW IMAGE
链接：http://bybyweb.com/london（警告：NSFW内容）

注意：它发生在除汞之外的所有浏览器中。

我使用媒体查询“纵向”视图，因为横向模式（1024px）的iPad应该正确显示桌面版本。

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

我做错了什么？

P.S。修正位置：亲戚没有解决我的问题，“纵向”视图中还有很多空白区域？！我很感激帮助。在方向改变之后发生问题很奇怪。

Answer 1

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

因此，在任何情况下，宽度总和不应超过100％，iPad不会容忍它。

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

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

奇怪的iPad肖像和风景视图问题

1 个答案: