iPad trong chế độ phong cảnh được mở rộng quy mô trang web của tôi lên - Tôi không biết làm thế nào để sửa chữa nó

Question

trang thử nghiệm của tôi là: http://dev.my-igloo.net/ps-rwd/

Tôi đang cố gắng để có được đầu của tôi xung quanh các truy vấn phương tiện truyền thông và thay đổi trang web rộng theo với chiều rộng của trình duyệt - trang web phải hoạt động trên iPad và iPhone và tại thời điểm này, tôi đang thử nghiệm trên iPad và hơi điên rồ.

Xin lưu ý rằng thiết kế/bố cục trang web không hoàn thành vào lúc này vì tôi chỉ đang làm việc với các cài đặt ban đầu ở đây trước khi tôi nghiên cứu hoàn thiện mọi thứ. Tôi đã thiết lập một màu nền khác nhau cho mỗi biểu định kiểu để dễ dàng xem cái nào được tải.

Tôi có điều này trong thẻ đầu của tôi:

<meta name="viewport" content="initial-scale=1.0, width=device-width" /> 

và nếu tôi đặt truy vấn phương tiện truyền thông của tôi như vậy:

<!-- Main Stylesheet --> 
<link rel="stylesheet" type="text/css" href="ps-default.css" /> 

<!-- Main Stylesheet --> 
<link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 769px)" /> 
<!-- 768 wide screens --> 
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 481px) and (max-width: 768px)" /> 
<!-- 480 wide screens --> 
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 321px) and (max-width: 480px)" /> 

Khi tôi thử nghiệm trên iPad trong chế độ phong cảnh trang tải mặc định biểu định kiểu nhưng được thu nhỏ và tôi phải cuộn sang trái và phải để xem toàn bộ bố cục hoặc chụm-thu nhỏ để thu nhỏ để làm cho nó vừa với màn hình.

Làm cách nào để tránh điều này? Tôi nghĩ rằng bằng cách ban đầu quy mô thiết đến 1.0 sẽ làm cho nó load mà không phóng to

sau đó tôi đã thay đổi phương tiện truyền thông của tôi truy vấn một chút để:.

<!-- For Desktop Browsers --> 
<link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 1024px)" /> 
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 769px) and (max-width: 1024px)" /> 

<!-- 768 wide screens --> 
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (max-width: 768px) and (orientation:portrait)" /> 
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 481px) and (max-width: 767px) and (orientation:landscape)" /> 

<!-- 480 wide screens --> 
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (max-width: 480px) and (orientation:landscape)" /> 

và sau đó trên iPad ở chế độ nằm ngang các Bản định kiểu 768 đã được tải và trang được thu nhỏ - Tôi không hiểu tôi đang làm gì sai.

Tôi đang đọc qua điều này: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193 và không tìm thấy giải pháp cho vấn đề này. Các tùy chọn khác tôi đã thử đã bao gồm quy mô tối thiểu và quy mô tối đa nhưng điều này sẽ đưa ra chức năng thu nhỏ-pin không mong muốn.

Tôi đã hoàn nguyên về bộ truy vấn phương tiện ban đầu hiện tại và hy vọng ai đó có thể giúp tôi.

Answer 1

Từ những gì tôi hiểu, điều này dường như là một vấn đề gây ra bởi vì cách Safari tính toán chiều rộng thiết bị. Về cơ bản Safari luôn lấy chiều rộng thiết bị dựa trên hướng dọc. Vì vậy, khi bạn nói width = device-width, nó luôn bằng 768px bất kể định hướng.

Vì vậy, điều có vẻ xảy ra là ở chế độ ngang, chiều rộng 100% của bạn được tính là 768px, mặc dù chiều rộng có sẵn là 1024px. (Tôi đang hiển thị trang 768px trên màn hình 1024px dẫn đến kéo dài hoặc phóng to).

Giải pháp có thể được cho là đưa ra chiều rộng khung nhìn cố định.

<meta name="viewport" width="1024" /> 

Điều này có nhược điểm lớn của chế độ xem không tự động mở rộng theo thiết bị được xem. Nhưng nếu bạn thực sự cần cả hai thứ để xảy ra, có thể bạn sẽ cần phải xem xét một số loại phát hiện phía máy chủ động và có mã meta viewport khác được phân phối tới trình duyệt dựa trên phát hiện tác nhân người dùng từ yêu cầu.

Answer 2

Sau một buổi thử nghiệm, tôi đồng ý với phần còn lại - lật từ cảnh quan đến dọc sang ngang để lộ một lỗi trong Safari.Cách duy nhất tôi tìm thấy để giải quyết vấn đề này là sử dụng:

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" /> 

Điều này giữ cho từng hướng ở quy mô phù hợp. Nhược điểm duy nhất để sửa chữa này là bạn không thể phóng to. Không phải là một giải pháp tốt cho các trang web có văn bản nhỏ hoặc đối tượng lớn tuổi hơn, nhưng nếu không thì sẽ là một mẹo nhỏ.

Ngoài ra, có một bản hack JS đẹp tại đây: https://gist.github.com/901295 cho phép thu phóng. Tuy nhiên, khi đã thu phóng, nếu hướng được thay đổi cùng một bộ lỗi cũ.

Answer 3

Tìm thấy giải pháp tốt hơn. Hoạt động trên iPad và iPhone cả cảnh quan và chân dung.

<meta name="viewport" content="width=1062px, user-scaleable=yes" /> 

1062px có thể là bất kỳ điều gì cũ: 800px hoặc lớn hơn.

Answer 4

@ graham-t có giải pháp tốt nhất ở đây IMO, nhưng chỉ có một vấn đề với nó; bây giờ nó sẽ không thay đổi kích thước một cách có trách nhiệm dựa trên độ phân giải thiết bị.

này hiện các trick cho tôi ít nhất là - tôi nhận được chiều rộng và không mở rộng quy mô trên iPad ở chế độ nằm ngang, cộng với nó thay đổi kích thước đúng trên các thiết bị khác:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />