Làm cách nào để đặt meta viewport cho iPhone xử lý xoay đúng cách?

Vì vậy, tôi đã sử dụng:

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

để nội dung HTML của tôi hiển thị đẹp trên iPhone. Nó hoạt động tuyệt vời cho đến khi người dùng xoay thiết bị sang chế độ ngang, nơi màn hình vẫn bị giới hạn ở 320px.

Có cách nào đơn giản để chỉ định một chế độ xem thay đổi để đáp ứng với việc người dùng thay đổi hướng thiết bị không? Hay tôi phải dùng đến Javascript để xử lý điều đó?

Tôi chỉ đang cố gắng tự giải quyết vấn đề này và giải pháp tôi nghĩ ra là:

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

Điều này dường như khóa thiết bị vào tỷ lệ 1,0 bất kể hướng của nó. Như một tác dụng phụ, tuy nhiên, nó vô hiệu hóa hoàn toàn việc mở rộng quy mô người dùng (thu phóng chụm, v.v.).

Đối với bất kỳ ai vẫn quan tâm:

http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Application

Từ trang:

<meta name="viewport" content="user-scalable=no,width=device-width" />

Điều này hướng dẫn Safari ngăn người dùng phóng to trang bằng cử chỉ "véo" và cố định chiều rộng của cổng xem thành chiều rộng của màn hình, nơi luôn hướng iPhone vào.

Bạn không muốn mất tùy chọn chia tỷ lệ người dùng nếu bạn có thể giúp nó. Tôi thích giải pháp JS này từ đây .

<script type="text/javascript">
(function(doc) {

    var addEvent = 'addEventListener',
        type = 'gesturestart',
        qsa = 'querySelectorAll',
        scales = [1, 1],
        meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

    function fix() {
        meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
        doc.removeEventListener(type, fix, true);
    }

    if ((meta = meta[meta.length - 1]) && addEvent in doc) {
        fix();
        scales = [.25, 1.6];
        doc[addEvent](type, fix, true);
    }

}(document));
</script>

Bạn đang đặt nó để không thể mở rộng quy mô (tối đa tỷ lệ = quy mô ban đầu), vì vậy nó không thể mở rộng quy mô khi bạn xoay sang chế độ ngang. Đặt tỷ lệ tối đa = 1,6 và tỷ lệ này sẽ chia tỷ lệ thích hợp để phù hợp với chế độ ngang.

Tôi đã nghĩ ra một cách tiếp cận khác biệt rõ ràng sẽ hoạt động trên nhiều nền tảng

http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/

Cho đến nay tôi đã thử nghiệm trên

Thiên hà Samsun 2

• Samsung galaxy s
• Điện thoại samsung galaxy s2
• Samsung galaxy Note (nhưng đã phải thay đổi css thành 800px [xem bên dưới] *)
• Motorola

• Iphone 4

  • @media screen and (max-width:800px) {

Đây là một bước tiến lớn với sự phát triển di động ...

Bản thân tôi đã gặp sự cố này và tôi muốn vừa có thể đặt chiều rộng, vừa cập nhật nó khi xoay và cho phép người dùng mở rộng và thu phóng trang (câu trả lời hiện tại cung cấp câu trả lời đầu tiên nhưng ngăn chặn phần sau như một tác dụng phụ ) .. vì vậy tôi đã nghĩ ra một bản sửa lỗi giữ cho chiều rộng của khung nhìn đúng với hướng, nhưng vẫn cho phép phóng to, mặc dù nó không phải là siêu thẳng về phía trước.

Đầu tiên, hãy thêm đoạn mã Javascript sau vào trang web bạn đang hiển thị:

 <script type='text/javascript'>
 function setViewPortWidth(width) {
  var metatags = document.getElementsByTagName('meta');
  for(cnt = 0; cnt < metatags.length; cnt++) { 
   var element = metatags[cnt];
   if(element.getAttribute('name') == 'viewport') {

    element.setAttribute('content','width = '+width+'; maximum-scale = 5; user-scalable = yes');
    document.body.style['max-width'] = width+'px';
   }
  }
 }
 </script>

Sau đó, trong - (void) didRotateFromInterfaceOrientation: (UIInterfaceOrientation) fromInterfaceOrientation phương thức của bạn, hãy thêm:

float availableWidth = [EmailVC webViewWidth];
NSString *stringJS;

stringJS = [NSString stringWithFormat:@"document.body.offsetWidth"];
float documentWidth = [[_webView stringByEvaluatingJavaScriptFromString:stringJS] floatValue];

if(documentWidth > availableWidth) return; // Don't perform if the document width is larger then available (allow auto-scale)

// Function setViewPortWidth defined in EmailBodyProtocolHandler prepend
stringJS = [NSString stringWithFormat:@"setViewPortWidth(%f);",availableWidth];
[_webView stringByEvaluatingJavaScriptFromString:stringJS];

Có thể thực hiện tinh chỉnh bổ sung bằng cách sửa đổi nhiều cài đặt nội dung cửa sổ xem:

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags .htm

Ngoài ra, tôi hiểu rằng bạn có thể đặt trình nghe JS cho kích thước lớn hoặc thứ gì đó tương tự để kích hoạt thay đổi tỷ lệ, nhưng điều này đã hiệu quả với tôi khi tôi đang làm điều đó từ các khung giao diện người dùng Cocoa Touch.

Hy vọng điều này sẽ giúp ai đó :)

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

suport tất cả điện thoại, tất cả ipad, tất cả android.

chỉ muốn chia sẻ, tôi đã thử với cài đặt chế độ xem cho thiết kế đáp ứng của mình, nếu tôi đặt Tỷ lệ tối đa thành 0,8, tỷ lệ ban đầu thành 1 và có thể mở rộng thành không thì tôi sẽ có chế độ xem nhỏ nhất ở chế độ dọc và chế độ xem iPad cho phong cảnh: D ... đây đúng là một bản hack xấu xí nhưng nó có vẻ hoạt động, tôi không biết tại sao nên tôi sẽ không sử dụng nó, nhưng kết quả thú vị

<meta name="viewport" content="user-scalable=no, initial-scale = 1.0,maximum-scale = 0.8,width=device-width" />

thưởng thức :)

Tại sao không chỉ tải lại trang khi người dùng xoay màn hình bằng javascript

function doOnOrientationChange()
{
location.reload();
}

window.addEventListener('orientationchange', doOnOrientationChange);