Câu hỏi Làm thế nào để thiết lập viewport meta cho iPhone mà xử lý luân phiên đú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;"/>

để có được nội dung HTML của tôi để hiển thị độc đáo trên iPhone. Nó hoạt động tốt cho đến khi người dùng chuyển thiết bị sang chế độ nằm ngang, nơi hiển thị vẫn bị giới hạn ở 320px.

Có cách nào đơn giản để chỉ định chế độ xem thay đổi để phản hồi cho người dùng thay đổi định hướng thiết bị? Hay tôi phải sử dụng Javascript để xử lý điều đó?


76
2017-08-04 21:27


gốc


Tốt đọc về nó ở đây - developer.mozilla.org/en-US/docs/Mobile/… - vsync
Chỉ cần một lưu ý - --- tách cặp khóa nên được , không phải ;--- đưa ra lỗi phân tích cú pháp trong Google Chrome (Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.) - Bill


Các câu trả lời:


Chỉ đang cố gắng giải quyết vấn đề này, và giải pháp tôi đưa 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ị ở mức 1.0 bất kể định hướng của nó là gì. Như là một tác dụng phụ, nó tuy nhiên hoàn toàn vô hiệu hóa quy mô người dùng (pinch phóng to, vv).


108
2018-06-03 04:03



Nó cũng ngăn không cho nội dung được kích cỡ chính xác trên màn hình ban đầu. Nếu bạn bỏ qua initial-scale phần tử hoàn toàn từ thẻ khung nhìn, nội dung HTML ban đầu được thu nhỏ sao cho nó hoàn toàn phù hợp với người xem; với initial-scale=1.0, nội dung thường rộng hơn hoặc hẹp hơn khung xem web. - MusiGenesis
Tôi có một cách tiếp cận khác nhẹ nhàng nên xử lý nó, với một chút tinh chỉnh miễn là bạn hiểu ý tưởng của nó, jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices - Val
Cảm ơn một tấn ... :) - Chetana Kestikar
Vui lòng không tắt thu phóng !!!! - nroose


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

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

Từ trang:

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

Lệnh này hướng dẫn Safari ngăn chặn   người dùng phóng to trang   với cử chỉ "nhúm" và sửa   chiều rộng của cổng xem theo chiều rộng của   màn hình, bao giờ định hướng   iPhone đang ở.


18
2018-01-06 07:02



Việc ngăn không cho người dùng mở rộng quy mô không làm cho safari ngừng hoạt động khi xoay vòng. - Leopd
Nhưng tại sao vô hiệu hóa zoom? - nroose
Tôi ghét những trang web trên thiết bị di động đó có thể vô hiệu hóa việc thu phóng - Aximili
@nroose để tiết kiệm 300ms trên thiết bị di động? - Guillaume Vincent
@aximili tôi quá! - nroose


Bạn không muốn mất tùy chọn mở rộng quy mô người dùng nếu bạn có thể trợ giúp. 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>

10
2017-11-14 09:29



Rực rỡ, cảm ơn! Điều này giải quyết vấn đề cho tôi. - Mikko Ohtamaa
Dope! Tôi nhận thấy rằng ban đầu tôi chỉ cần đặt thẻ meta của mình với chiều rộng = chiều rộng thiết bị và không có gì khác. Siêu ấn tượng với bản sửa lỗi này. - Shane


Tôi đã đưa ra một cách tiếp cận khác biệt nhẹ nhàng nên hoạt động trên nền tảng chéo

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

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

Samsun galaxy 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 môi lớn về phía trước với sự phát triển di động ...


2
2017-11-05 11:45





Bạn đang thiết lập nó để không thể mở rộng quy mô (tỷ lệ tối đa = quy mô ban đầu), do đó, 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à nó sẽ mở rộng phù hợp để phù hợp với chế độ ngang.


1
2017-08-07 00:24



Hmm, chỉ cần thử điều đó và nó dường như không có tác dụng gì. Nó giống như kích thước của UIWebView bằng cách nào đó được cố định ở kích thước hướng dọc của chúng. - George Armhold


Tôi đã có vấn đề này, và tôi muốn cả hai có thể thiết lập chiều rộng và cập nhật xoay vòng 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 cản sau này là tác dụng phụ ) .. Vì vậy, tôi đã đưa ra một sửa chữa mà giữ chiều rộng xem chính xác cho định 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, thê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 của bạn - (void) didRotateFromInterfaceOrientation: (UIInterfaceOrientation) từ phương thứcInterfaceOrientation, 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];

Tinh chỉnh bổ sung có thể được thực hiện bằng cách sửa đổi thêm các cài đặt nội dung khung nhìn:

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 bạn có thể đặt một người nghe JS cho onresize hoặc một cái gì đó như để kích hoạt rescaling, nhưng điều này làm việc cho tôi khi tôi đang làm nó từ Cocoa Touch UI frameworks.

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


1
2018-03-15 00:39





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

hỗ trợ tất cả các iphones, tất cả các ipad, tất cả android.


0
2018-02-11 07:38





chỉ muốn chia sẻ, tôi đã chơi xung quanh với cài đặt khung nhìn cho thiết kế đáp ứng của tôi, nếu tôi đặt tỷ lệ tối đa thành 0,8, thang 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 cảnh quan: D ... đây là một hack xấu xí nhưng nó có vẻ làm việc, tôi không biết tại sao vì vậy tôi sẽ không được 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 :)


-1
2018-04-01 14:33