답변:
페이지의 픽셀 너비와 높이는 지정된 경우 메타 뷰포트 태그뿐만 아니라 방향에 따라 달라집니다. 다음은 iPad 1 브라우저에서 jquery의 $ (window) .width () 및 $ (window) .height ()를 실행 한 결과입니다.
페이지에 메타 표시 영역 태그가없는 경우 :
페이지에 다음 두 메타 태그 중 하나가있는 경우 :
<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">
와 함께 <meta name="viewport" content="width=device-width">:
와 함께 <meta name="viewport" content="height=device-height">:
와 함께 <meta name="viewport" content="height=device-height,width=device-width">:
와 <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">
와 <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">
이 질문에 대한 간단한 답은 없습니다. 아이폰, 아이팟 터치, 아이 패드에서 사용되는 애플의 웹킷 모바일 버전은 사용자가 자유롭게 확대 / 축소 할 수있는 화면에 맞게 페이지를 확장 할 것이다.
즉, 필요한 확대 / 축소 정도를 최소화하도록 페이지를 디자인 할 수 있습니다. 가장 좋은 방법은 너비와 높이를 iPad의 낮은 해상도와 동일하게 만드는 것입니다. 방향을 알 수 없기 때문입니다. 즉, 페이지 방향이 1024x768이든 768x1024이든 iPad 화면에 잘 맞도록 페이지를 768x768로 만들 것입니다.
더 중요한 것은 엄지 손가락으로 치기 쉬운 많은 공간이있는 큰 컨트롤로 페이지를 디자인하고 싶을 것입니다. 매우 어수선해서 많은 확대 / 축소가 필요한 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{
}
}