이상한 iPad 세로 및 가로보기 문제

Question

iPad가 없으므로 제대로 테스트 할 수 없으므로 온라인 시뮬레이터가 충분히 안정적이지 않습니다.

문제 : (클라이언트의 말)

가로 및 세로 모두에서 완벽하게 사이트로드됩니다. 그러나 가로로 보았을 때 화면을 회전하면 세로보기가 이전과 같이 왼쪽에서 벗어나지 만 나쁘지는 않습니다.

이미지 : 검열 NSFW 이미지
링크 : http://bybyweb.com/london (경고 : NSFW 내용)

주 : 수은을 제외하고, 모든 브라우저에서 발생합니다.

가로 모드의 iPad (1024px)에서 데스크톱 버전이 올바르게 표시되어야하므로 미디어보기를 '세로'보기로 사용했습니다.

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. 위치 수정 : 상대방이 내 문제를 해결하지 못했지만 '초상화'보기에 여전히 많은 빈 공간이 있습니까?! 나는 도움을 감사 할 것입니다. 오리엔테이션 변경 후 문제가 발생한다는 것은 이상한 일입니다.

Answer 1

답변 : 문제는 한 요소의 너비가 #joinform입니다. 너비를 463px로 줄였습니다. 이제는 모두 정상적으로 작동합니다. 오버 플로우 : 숨김이 작동하지 않는 것처럼 보입니다. iPad는 숨겨진 콘텐츠를 '보여주는'경향이 있으며 필요한 경우 페이지의 요소를 '푸시'하는 경향이 있습니다.

그래서 너비 합계는 100 %를 넘지 않아야합니다. iPad는 허용하지 않습니다.

또한 iPad 테스트와 관련된 조언이 있습니다. 최신 버전에 포함 된 Google 크롬 에뮬레이터는 매우 안정적입니다 (에뮬레이션에서 오류가 표시됨).

누군가에게 도움이되기를 바랍니다.