Trình duyệt iPad WIDTH & HEIGHT standard

Question

Có ai biết chiều rộng và chiều cao an toàn nhất cho BODY khi xem bất kỳ trang web nào trên iPad không? Tôi muốn tránh thanh cuộn càng nhiều càng tốt.

Cảm ơn.

Erik

Answer 1

Chiều rộng và chiều cao pixel của trang sẽ tùy thuộc vào hướng cũng như thẻ meta viewport, nếu được chỉ định. Đây là kết quả của việc chạy jquery's $ (window) .width() và $ (window) .height() trên trình duyệt iPad 1.

Khi trang web không có thẻ meta viewport:

• Portrait: 980x1208
• Cảnh: 980x661

Khi trang web có một trong hai thẻ meta:

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

• Portrait: 768x946
• Cảnh: 1024x690

Với <meta name="viewport" content="width=device-width">:

• Portrait: 768x946
• Cảnh: 768x518

Với <meta name="viewport" content="height=device-height">:

• Portrait: 980x1024
• Cảnh: 980x1024

Với <meta name="viewport" content="height=device-height,width=device-width">:

• Portrait: 768x1024 dành
• Cảnh: 768x1024 dành

.210

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

• Portrait: 768x1024 dành
• Cảnh: 1024x1024

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

• Portrait: 831x1024
• Cảnh: 1520x1024

Answer 2

Không có câu trả lời đơn giản cho câu hỏi này. Phiên bản WebKit di động của Apple, được sử dụng trong iPhone, iPod Touch và iPad, sẽ mở rộng trang để vừa với màn hình, tại thời điểm đó người dùng có thể phóng to và thu nhỏ tự do.

Điều đó nói rằng, bạn có thể thiết kế trang của mình để giảm thiểu số lượng thu phóng cần thiết. Đặt cược tốt nhất của bạn là làm cho chiều rộng và chiều cao giống như độ phân giải thấp hơn của iPad, vì bạn không biết nó theo định hướng nào; nói cách khác, bạn sẽ làm cho trang của bạn 768x768, vì vậy nó sẽ phù hợp tốt trên màn hình của iPad cho dù đó là định hướng là 1024x768 hoặc 768x1024.

Quan trọng hơn, bạn muốn thiết kế trang của mình với các điều khiển lớn với nhiều không gian dễ dàng chạm ngón tay cái - bạn có thể dễ dàng thiết kế trang 768x768 rất lộn xộn và do đó yêu cầu thu phóng rất nhiều. Để thực hiện điều này, bạn có thể muốn chia các điều khiển của mình cho một số trang web.

Mặt khác, nó không phải là việc theo đuổi đáng giá nhất. Nếu trong khi thiết kế bạn tìm thấy cơ hội để làm cho trang của bạn "thân thiện với ngón tay" hơn, thì hãy tiếp tục ... nhưng thực tế là người dùng iPad rất thoải mái khi di chuyển xung quanh và phóng to và thu nhỏ trang nó là cần thiết trên hầu hết các trang web. Nếu có, bạn có thể muốn thiết kế nó để nó có lợi cho loại điều hướng này.

Tạo các hộp có dữ liệu được nhóm có liên quan có thể dễ dàng nhấn đúp để tập trung vào và giữ các điều khiển liên quan gần nhau. Người dùng iPad rất có thể sẽ đánh giá cao một trang tạo điều kiện cho việc điều hướng thu phóng và quen thuộc quen thuộc với nhiều trang hơn một trang có ít điều khiển hơn để họ không phải làm như vậy.

Answer 3

Bạn có thể thử này:

/*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{ 

     } 
    }