iOS 7 Safari 상태 표시 줄 오버레이 콘텐츠

모바일 앱 상단에 고정 헤더가 있습니다. iOS7의 모바일 Safari에서는 가로 모드에서 아래로 스크롤 한 다음 고정 머리글을 클릭하면 상태 표시 줄이 열리고 머리글 요소를 클릭 할 수 없습니다.iOS 7 Safari 상태 표시 줄 오버레이 콘텐츠

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 

</head> 
<body> 
    <header> 
     <a href="javascript:alert('clicked')"> 
      Click Me 
     </a> 
    </header> 
    <div class="content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie diam sed rhoncus luctus. Integer et urna erat. Donec venenatis leo eu adipiscing condimentum. Praesent auctor interdum mauris, a cursus nisl. Mauris at nunc in magna gravida molestie. Phasellus mollis ultricies tellus, vel vestibulum dui accumsan quis. Suspendisse in mi odio. Donec ultricies justo id sem eleifend, et interdum turpis accumsan. Vestibulum adipiscing at magna id lobortis. Quisque sed fermentum lacus. Suspendisse dui dui, ultricies ac malesuada at, egestas vel sapien. Donec ac tristique ipsum. Morbi est dolor, commodo ac sem a, eleifend varius justo. In id condimentum lorem. Sed sit amet lorem a nisl adipiscing consectetur eget in orci. Aenean et mauris tempor, sagittis dui nec, consequat turpis.</p> 

     <p>Maecenas diam erat, tincidunt eu elit sed, ultrices commodo erat. Sed at lectus accumsan, eleifend mi non, gravida eros. Quisque eget odio augue. Donec suscipit nibh sapien, nec ullamcorper est ullamcorper non. Donec congue, risus vitae mattis auctor, justo augue molestie sapien, laoreet pharetra urna lectus vitae libero. Vestibulum vel tellus eget mauris euismod suscipit. Ut eleifend lectus sed ipsum pharetra ornare. Vestibulum lacinia lectus vitae est ultricies hendrerit. Duis vitae facilisis diam.</p> 

     <p>Etiam ut justo non arcu sodales sagittis. Morbi dictum lorem at quam fermentum sollicitudin. In aliquet eget massa sed condimentum. In et scelerisque leo, sit amet fermentum urna. Quisque sit amet ipsum mi. Cras id tempus tellus. Nullam accumsan adipiscing arcu ut suscipit. Sed non varius augue. Quisque vehicula viverra elit, eget egestas erat vulputate lobortis. Sed ornare facilisis mollis. Aliquam est purus, posuere in faucibus feugiat, pellentesque non leo. Pellentesque viverra pellentesque fringilla.</p> 

     <p>Quisque commodo velit ac nisi vehicula sodales. Phasellus laoreet nisl nec tellus dapibus, eu accumsan dui interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare ipsum eu lacus accumsan consectetur. Suspendisse potenti. Donec convallis elit ac dui fermentum, in consequat ipsum rhoncus. Nunc id sagittis quam. Mauris nec metus ac est sodales malesuada. Duis luctus tortor at tellus suscipit porttitor. Vestibulum vitae facilisis ante. Proin ut nisi quis mi sodales dignissim id nec urna. Suspendisse molestie tortor non arcu convallis feugiat. Etiam ac volutpat nisi, a pharetra neque.</p> 

     <p>Curabitur luctus, nisl ut hendrerit tempus, enim turpis tristique enim, sit amet auctor sem purus ac risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum tincidunt ante et sollicitudin. Nullam iaculis tortor at eros sodales interdum vitae quis libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sit amet lacus quam. Nam mollis arcu arcu, at tempor ligula rutrum eget. Praesent sodales libero neque. Vestibulum commodo magna sit amet elit pretium mollis. Sed enim diam, aliquet sed volutpat eu, dictum ut nisl. Phasellus volutpat, nisi sit amet rutrum elementum, turpis nunc fringilla purus, consectetur pretium nunc tortor elementum erat.</p> 
    </div> 
</body> 
</html>

그리고 내 CSS :

header { 
      height: 44px; 
      padding: 4px 7px 0px 7px; 
      background: lightgrey; 
      position: fixed; 
      top: 0; 
      left: 0; 
      right: 0; 
      z-index: 5;  
     } 
     .content { 
      margin-top: 60px; 
      position: relative; 
      z-index: -1; 
     }

어떤 생각

내 HTML을 단순화 할 수있다?

출처

2014-03-04 jribeiro

죄송합니다.하지만 iOS7에서는 그렇게 할 수 없습니다. 상단 및 하단 30px (또는 그 이상)의 탭은 브라우저 크롬 (navbar, 하단 막대)을 트리거합니다. 고정 위치 콘텐츠를 여기에 배치 할 수 없습니다. 콘텐츠를 비공개로 설정하거나 30pxs 공간을 남겨 두십시오. - /.

출처

2014-03-06 09:44:39 mikaraento

예 ... 이전 버전을 사용했습니다. 애플은 3 월 중순에 iOS 7.1을 발표 할 예정이다. 이것은 이것을 해결하는 '최소 UI'뷰포트 태그를 도입 할 것입니다. 또한 나는 당신이 사파리가 아니라 크롬이 아니라고 생각한다. – jribeiro

iOS 7 Safari 상태 표시 줄 오버레이 콘텐츠

답변

관련 문제