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

Posted 2023-03-06

【中文标题】奇怪的 iPad 纵向和横向视图问题

【英文标题】：Strange iPad portrait and landscape view issue

【发布时间】：2014-02-01 07:13:35

【问题描述】：

我没有 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 没有解决我的问题，“人像”视图中还有很多空白空间？！我将不胜感激。

【参考方案1】：

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

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

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

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