2012-06-19 5 views
0

내 웹 페이지는 980px입니다. iPad의 Safari가 세로 모드에 맞지 않습니다.iPad의 Safari가 세로 모드에서 980px 너비 사이트에 맞지 않습니다.

Apple에 따르면 iPad의 모든 방향에 맞게 웹 사이트를 조정할 필요가 없습니다. 그러나 인물 모드에서 내 웹 페이지는 전혀 들어 맞지 않습니다. 뷰포트에서 약 20 % 떨어져 있습니다.

나는 실패 가능한 모든 수정을 시도 :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

또는

<meta name="viewport" content="width=980"> 

<style type="text/css"> 
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) { 
    body, #wrap{ 
     width:980px; 
    } 
} 

내 템플릿을 보여 쉽지 않다 - 조금 복잡하지만, 나는 확신 너는 그 몸에 너비가 980 픽셀 인 래퍼를 가지고있다. 다른 숨겨진 요소가 너비가 100 % 인 래퍼 옆에도 추가됩니다. 그러나 그들은 문제를 일으킬 가능성이 적습니다.

다른 아이디어는 무엇입니까? 방탄복이라면 요? 나는 아이디어가 없다. 뷰포트 설정에서

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=980, initial-scale=1, maximum-scale=1"><style type="text/css">body{background-color:grey;}#wrap{width:980px;background-color:red;margin:0 auto;}</style></head><body> <div id="wrap">My content does not fit!</div></body></html> 
+0

너비가 100 % 인 요소가 원인의 일부가 아닌 이유에 대해 궁금한가요? 우리에게 보여 줄 수있는 코드가 더 있습니까? – unfrev

+0

세로로 보면 iPad는 768 픽셀이므로 980 픽셀 너비의 웹 사이트가 완전히 적합하지는 않습니다. – MusiGenesis

+0

나는 768도 시도했다. – Vad

답변

1

봐 : 여기

텍스트의 경우 코드입니다. 세로 모드에서 iPad의 너비는 768px입니다. initial-scale=1을 설정하면 iPad가 자동으로 768px로 확대됩니다. maximum-scale=1으로 설정하면 iPad에서 원하는대로 980px로 축소 할 수 없습니다. 물론 그것은 적합하지 않을 것이다!

이제 뷰포트를 설정하지 마십시오! iPad는 사이트의 너비의 100 % 페이지를 렌더링합니다. iPad의 너비가 아니라 내가 원하는대로 맞 춥니 다.

+0

사실이지만 뷰포트를 전혀 설정하지 않고 작은 해상도 (예 : iPhone) 용 CSS가있는 경우 뷰포트를 정의하지 않으면 해당 장치의 스타일이 엉망이됩니다. – Leonidas

0

제가 만들고 있던 고정 폭 사이트에서이 함께 놀겠다는 거 :

<meta name="viewport" content="width=device-width, initial-scale=-100%" /> 

이 좋아 보인다.

관련 문제