iPad 브라우저 너비 및 높이 표준

iPad 브라우저 너비 및 높이 표준

---

누구든지 iPad에서 웹 페이지를 볼 때 BODY의 가장 안전한 너비와 높이를 알고 있습니까? 스크롤 막대를 최대한 피하고 싶습니다.

감사합니다.

에릭

---

페이지의 픽셀 너비와 높이는 지정된 경우 메타 뷰포트 태그와 방향에 따라 달라집니다. 다음은 iPad 1 브라우저에서 jquery의 $ (window) .width () 및 $ (window) .height ()를 실행 한 결과입니다.

페이지에 메타 뷰포트 태그가없는 경우 :

• 세로 : 980x1208
• 풍경 : 980x661

페이지에 다음 두 메타 태그 중 하나가있는 경우 :

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

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1">

• 세로 : 768x946
• 가로 : 1024x690

로 <meta name="viewport" content="width=device-width">:

• 세로 : 768x946
• 풍경 : 768x518

로 <meta name="viewport" content="height=device-height">:

• 세로 : 980x1024
• 풍경 : 980x1024

로 <meta name="viewport" content="height=device-height,width=device-width">:

• 세로 : 768x1024
• 가로 : 768x1024

와 <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">

• 세로 : 768x1024
• 가로 : 1024x1024

와 <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">

• 세로 : 831x1024
• 풍경 : 1520x1024

---

이 질문에 대한 간단한 대답은 없습니다. iPhone, iPod Touch 및 iPad에 사용되는 Apple의 모바일 버전 WebKit은 화면에 맞게 페이지를 확장하여 사용자가 자유롭게 확대 및 축소 할 수 있습니다.

즉, 필요한 확대 / 축소 양을 최소화하도록 페이지를 디자인 할 수 있습니다. 가장 좋은 방법은 너비와 높이를 iPad의 낮은 해상도와 동일하게 만드는 것입니다. 다시 말해, 페이지를 768x768로 설정하면 1024x768 또는 768x1024 중 어느 방향이든 iPad의 화면에 잘 맞습니다.

더 중요한 것은 엄지 손가락으로 맞추기 쉬운 공간이 많은 큰 컨트롤을 사용하여 페이지를 디자인하려는 경우 매우 복잡하고 확대 / 축소가 필요한 768x768 페이지를 쉽게 디자인 할 수있는 것입니다. 이를 위해 컨트롤을 여러 웹 페이지로 나누고 싶을 것입니다.

반면에 가장 가치있는 곳이 아닙니다. 디자인하는 동안 페이지를 "손님"으로 만들 수있는 기회를 찾으면 가십시오 ...하지만 iPad 사용자는 페이지를 둘러보고 확대 / 축소하는 매우 한 대부분의 웹 사이트에서 필요합니다. 무엇이든 그 유형의 탐색에 도움이됩니다.

집중하기 위해 쉽게 두 번 탭할 수있는 관련 그룹화 된 데이터로 상자를 만들고 관련 컨트롤을 서로 가깝게 유지하십시오. iPad 사용자는 기능이 필요하지 않은 페이지보다 익숙한 확대 / 축소 및 탐색을 용이하게하는 페이지를 가장 잘 알고 제어 할 수 있습니다.

---

당신은 시도 할 수 있습니다 :

    /*iPad landscape oriented styles */

    @media only screen and (device-width:768px)and (orientation:landscape){
        .yourstyle{

        }

    }

    /*iPad Portrait oriented styles */

    @media only screen and (device-width:768px)and (orientation:portrait){
        .yourstyle{

        }
    }

참고 URL : https://stackoverflow.com/questions/3375706/ipad-browser-width-height-standard