Trình duyệt iPad tiêu chuẩn WIDTH & HEIGHT

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

Cảm ơn.

Erik

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

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

• Chân dung: 980x1208
• Phong cảnh: 980x661

Khi trang có một trong hai thẻ meta này:

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

• Chân dung: 768x946
• Phong cảnh: 1024x690

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

• Chân dung: 768x946
• Phong cảnh: 768x518

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

• Chân dung: 980x1024
• Phong cảnh: 980x1024

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

• Chân dung: 768x1024
• Phong cảnh: 768x1024

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

• Chân dung: 768x1024
• Phong cảnh: 1024x1024

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

• Chân dung: 831x1024
• Phong cảnh: 1520x1024

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

Điều đó nói rằng, bạn có thể thiết kế trang của mình để giảm thiểu lượng phóng to 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 với độ phân giải thấp hơn của iPad, vì bạn không biết nó được định hướng theo hướng nào; nói cách khác, bạn sẽ tạo trang 768x768 của mình để nó phù hợp với màn hình của iPad cho dù nó được định hướng là 1024x768 hay 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 khoảng trống dễ chạm bằng 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 đó cần phải phóng to rất nhiều. Để thực hiện điều này, bạn có thể muốn phâ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à sự 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 mình trở nên "thân thiện với ngón tay" hơn, thì hãy tìm nó ... nhưng thực tế là người dùng iPad rất thoải mái với việc di chuyển và phóng to và thu nhỏ trang để truy cập mọi thứ vì nó cần thiết trên hầu hết các trang web. Nếu có bất cứ điều gì, bạn có thể muốn thiết kế nó sao cho thuận lợi cho loại điều hướng này.

Tạo các hộp với dữ liệu được nhóm có liên quan có thể dễ dàng gõ hai lần để 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 điều hướng thu phóng và xoay quen thuộc mà họ quen thuộc hơn so với một trang có ít điều khiển hơn để họ không phải điều khiển.

Bạn có thể thử điều 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{

        }
    }