[width] iPad 브라우저 WIDTH & HEIGHT 표준

Program / 글쓴이

iPad에서 웹 페이지를 볼 때 BODY의 가장 안전한 너비와 높이를 아는 사람이 있습니까? 가능한 한 스크롤바를 피하고 싶습니다.

감사.

에릭

답변

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

페이지에 메타 표시 영역 태그가없는 경우 :

  • 세로 : 980×1208
  • 가로 : 980×661

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

<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">

  • 세로 : 768×946
  • 가로 : 1024×690

와 함께 <meta name="viewport" content="width=device-width">:

  • 세로 : 768×946
  • 가로 : 768×518

와 함께 <meta name="viewport" content="height=device-height">:

  • 세로 : 980×1024
  • 가로 : 980×1024

와 함께 <meta name="viewport" content="height=device-height,width=device-width">:

  • 세로 : 768×1024
  • 가로 : 768×1024

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

  • 세로 : 768×1024
  • 가로 : 1024×1024

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

  • 세로 : 831×1024
  • 가로 : 1520×1024

답변

이 질문에 대한 간단한 답은 없습니다. 아이폰, 아이팟 터치, 아이 패드에서 사용되는 애플의 웹킷 모바일 버전은 사용자가 자유롭게 확대 / 축소 할 수있는 화면에 맞게 페이지를 확장 할 것이다.

즉, 필요한 확대 / 축소 정도를 최소화하도록 페이지를 디자인 할 수 있습니다. 가장 좋은 방법은 너비와 높이를 iPad의 낮은 해상도와 동일하게 만드는 것입니다. 방향을 알 수 없기 때문입니다. 즉, 페이지 방향이 1024×768이든 768×1024이든 iPad 화면에 잘 맞도록 페이지를 768×768로 만들 것입니다.

더 중요한 것은 엄지 손가락으로 치기 쉬운 많은 공간이있는 큰 컨트롤로 페이지를 디자인하고 싶을 것입니다. 매우 어수선해서 많은 확대 / 축소가 필요한 768×768 페이지를 쉽게 디자인 할 수 있습니다. 이를 수행하기 위해 여러 웹 페이지에 컨트롤을 나누는 것이 좋습니다.

다른 한편으로는 가장 가치있는 추구는 아닙니다. 디자인하는 동안 페이지를 “손가락 친화적”으로 만들 수있는 기회를 찾으면 시도해보십시오.하지만 현실은 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{

        }
    }

답변