확대 할 때 CSS가 iOS에서 올바르게 렌더링되지 않습니다.

사이드 바를 렌더링하고 싶습니다. 내 CSS는 데스크톱 브라우저에서 렌더링 할 때도 확대 할 때도 잘 작동하지만 iOS 기기에서는 핀치 확대를 통해 페이지를 확대하면 콘텐츠 위에 사이드 바가 렌더링됩니다. 마지막으로 확인한 결과 기본 Android 브라우저 및 Chrome 베타에서 동일한 동작이 발생했음을 기억합니다. 여기 iOS screenshot 확대 할 때 CSS가 iOS에서 올바르게 렌더링되지 않습니다.

입니다 : http://www.seas.upenn.edu/~dange/test/test.html

는 모바일 사파리와 같은 모바일 브라우저로 방문하는 경우, 그러나, 우리가 얻을 :이 동작을 설명하는 (주로) 최소한의 데모 페이지를 넣어

해당 페이지 렌더링하는 데 사용되는 CSS :

/* Sidebar */ 

header { 
    border-right: 1px solid #AAA; 
    float: left; 
    padding: 0 10px; 
    position: fixed; 
    width: 200px; 
    bottom: 0; 
    left: 0; 
    right: auto; 
    top: 0; 
} 

#site-title { 
    font: bold 36px sans-serif; 
    margin: 1em 0; 
    text-align: center; 
} 

/* Navigation menu in sidebar */ 

nav { 
    font: 18px sans-serif; 
    margin: 2em auto; 
    width: 140px; 
} 

    nav > ul { 
     list-style: none; 
     padding: 0 10px; 
    } 

    nav li { 
     margin: 0; 
     text-align: center; 
    } 

    nav a { 
     display: block; 
     padding: 8px 10px; 
     text-decoration: none; 
    } 

/* Content "Pane" */ 

#content, 
footer { 
    margin-left: 220px; 
    max-width: 620px; 
    padding: 0 10px; 
    position: relative; 
} 

#content p { 
    font: 18px/30px serif; 
} 

footer { 
    border-top: 1px solid #AAA; 
    font: 14px serif; 
}

을 ... 그리고 단순화 된 HTML 문서 :

<body> 
    <header> 
    <h1 id="site-title">Lorem Ipsum</h1> 
    <nav> 
     <ul> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 3</a></li> 
     </ul> 
    </nav> 

    </header> 

    <section id="content"> 
    <article> 
     <p>...</p> 
     <p>...</p> 
     <p>...</p> 
    </article> 
    </section> 

    <footer> 
    <p>...</p> 
    </footer> 
</body>

저는 이것이 모바일 브라우저를위한 최적의 레이아웃이 아니라는 것을 알고 있습니다. 그리고 실제 사이트를 개선하여 모바일 장치에서보기 좋게 만들 계획입니다. 그러나 그동안이 문제를 해결하고 싶습니다.

출처

2012-07-01 kibibyte

px 대신 em을 사용하는 것이 좋습니다. –

왜해야합니까? (심각한 질문) – kibibyte

픽셀은 초고속 디스플레이가있을 때 의미가없는 실제 픽셀을 의미해야합니다. 이렇게해도 문제가 해결되지는 않지만 다양한 화면 해상도를 처리하는 것이 가장 좋습니다. http://m.alistapart.com/articles/fluidgrids/를 읽으십시오. –

헤더 고정 위치를 추출해보십시오. 실제로 테스트 할 수는 없지만 피들을 사용해 보았지만 확대/축소가 예상했던 것과 똑같이 작동하지 않는 것 같습니다. 하지만 헤더 태그가 왼쪽에 고정되어 있으면 왼쪽에있는 것이 당연합니다. iOS에서 윈도우의 크기를 확대 또는 축소하여 CSS가 반응을 보일 정도로 반응을 보입니다.

출처

2012-07-04 20:01:35 Huangism

필자의 경우 헤더의 고정 위치가 필요합니다 .-) – MacMark

body 태그 내부에서 래퍼를 사용하여 사이트에서 비슷한 문제를 해결했습니다.

#wrapper{ 
    width:840px; 
    overflow:auto; 
}

모바일에 표시되는 사이드 바는 동적으로 숨겨져 있지 않으면 좋은 생각이 아닙니다. 모바일에서 사이드 바를 콘텐츠 상단에 쌓아 두는 것이 좋습니다.

@media (max-width: 480px) { 
    #content, nav{width:100%; margin:10px 0; position:relative;} 
}

위의 내용은 테스트되지 않았습니다.

출처

2013-04-30 12:15:00 Matthew

"오버플로"에 대한 언급은 저에게 영감을주었습니다. 이미 두 div에 대해 z- 인덱스를 사용했음을 상기 시켰습니다. 트릭은 네비게이션에 주 콘텐츠보다 적은 z- 인덱스를 제공 할뿐만 아니라 음수의 Z- 인덱스를 제공하는 것입니다. 그 영감을 얻으려면 +50을 얻습니다. 축하해! – MacMark

@MacMark 감사합니다. 선생님! – Matthew

트릭은 네비게이션 요소 ("헤더")에 주 콘텐츠보다 적은 z- 인덱스를 줄뿐만 아니라 -3과 같은 음수의 Z- 인덱스를 제공하는 것입니다. 주 콘텐츠 div에 +4 또는 무엇이든 Z- 색인을 붙이십시오.

메인 콘텐츠에서 모바일 사파리로 확대하면 탐색 영역이 이전과 동일하게 유지되지만 다시 축소 할 때까지 기본 콘텐츠 뒤에 숨겨집니다.

재미있게 보내세요!

편집 : 네거티브는 링크를 건 드리면 좋지 않습니다. 적어도 내 경우에는 ;-)

편집 2 : z-index는 위치 속성이 명시 적으로 절대, 고정 또는 상대로 설정된 요소에서만 Mobile Safari에서 작동하는 것으로 보입니다.

출처

2013-04-30 18:01:38 MacMark

확대 할 때 CSS가 iOS에서 올바르게 렌더링되지 않습니다.

답변

관련 문제