2012-07-03 4 views
1

안녕하세요 저는 ipad에서 사파리를 중심으로하는 방법을 찾는 데 많은 어려움을 겪고 있습니다 ...이 기능은 ipad의 Chrome에서 작동하지만 사파리는 가로 형식으로 확장되지 않습니다 ... 왼쪽과 오른쪽의 여백은 있지만 나는 온통 스크롤해야 해. 두 브라우저 모두에서이 작업을 수행 할 수있는 아이디어는 무엇입니까? 크롬 및 사파리는 무엇입니까?여백 자동 0은 ipad safari에서 작동하지 않습니까?

는 HTML :

<html> 
     <head> 
      <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> 

    </head> 
    <body> 
     <div id="wrapper"> 

      </div> 

    </body> 
</html> 

CSS는 :

#wrapper{ 
    margin: 0 auto; 
    width:90%; 
    height:90%; 
    background-color: black; 
} 
html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 

답변

2

설정할 수있을 것입니다 width 어떻게 이걸 할거야.

<div id="wrapper"> 
    <div class="outer"> 
     <div class="inner"> 
      <div class="content"> 

      </div> 
     </div>     
    </div>  
</div>​​​​​​​​​​​​​​​​​​ 

CSS :

#wrapper{ 
    position: absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
} 

.outer{ 
    display:table; 
    table-layout:fixed; 
    height:100%; 
    width:100%; 
} 

.inner{ 
    display:table-cell; 
    text-align:center; 
    vertical-align:middle; 
    width:100%; 
    position:relative; 
} 

​.content{ 
    width:90%; 
    height:90%; 
    background:red; 
    display:inline-block;  
}​ 
+0

당신이 당신의 아이 패드에 그것을 시도 않았다 전에처럼 더 ... 여기 example

HTML입니다 내 경우에는 여전히 상자에 너무 커서 오른쪽 여백으로 스크롤해야합니다 ... – Jurudocs

+0

나는 그것을 시도 ipad 사파리 http://jsfiddle.net/9PGhg/4/show/를 사용하여 작동합니다 풍경과 초상화 모두. 그리고 나는 그것이 크롬에서도 작동 할 것이라고 확신합니다. – jamcoupe

+0

이상한 ... 제 사파리가 초기 스케일을 잘못된 방식으로 설정합니다 ... – Jurudocs

0

당신이 정의이라면 이것은 90%, 당신은 문제를 방지하고 단순히 margin: 0 5%;

+0

sorrry 편집 : 블랙 박스가 나타나기는하지만 스케일링 – Jurudocs

관련 문제