Làm cách nào để đặt siêu dữ liệu chế độ xem cho iPhone xử lý xoay đúng cách?

Question

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 quay thiết bị sang chế độ nằm 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 chế độ xem thay đổi theo phản hồi cho người dùng đang thay đổi hướng thiết bị không? Hay tôi phải sử dụng Javascript để xử lý điều đó?

Answer 1

Được chỉ cố gắng làm việc này ra bản thân mình, 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ị vào 1.0 quy mô bất kể đó là định hướng. 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).

Answer 2

Bạn đang thiết lập để không thể mở rộng tỷ lệ (tỷ lệ tối đa = thang tỷ lệ ban đầu), do đó, nó không thể mở rộng 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.

Answer 3

Đối với bất cứ ai vẫn quan tâm:

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

Từ trang này:

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

này ra lệnh cho Safari để ngăn chặn người dùng từ phóng to vào trang với "pinch" cử chỉ và sửa lại chiều rộng của cổng xem với chiều rộng là màn hình, bao giờ hướng iPhone đang ở.

Answer 4

Tôi có vấn đề này, và tôi muốn cả hai có thể đặt chiều rộng và cập nhật xoay vòng và cho phép người dùng chia tỷ lệ và thu phóng trang (hiện tại câu trả lời cung cấp đầu tiên nhưng ngăn cản sau này như là một 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 bạn - (void) didRotateFromInterfaceOrientation: (UIInterfaceOrientation) phương pháp fromInterfaceOrientation, 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]; 

Tweaking bổ sung có thể được thực hiện bằng cách sửa đổi nhiều 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.htmNgoà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 đó :)

Answer 5

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ể trợ giúp. Tôi thích giải pháp JS này từ here.

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

Answer 6

tôi đã đưa ra một cách tiếp cận slighly khác nhau 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
• Samsung galaxy s2
• Samsung Galaxy Note (nhưng đã phải thay đổi css để 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 ...

Answer 7

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 thang 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 có chế độ xem nhỏ nhất ở chế độ dọc và xem iPad cho cảnh quan: D ... đây là đúng một hack xấu xí nhưng có vẻ như để 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 :)

Answer 8

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

hỗ trợ tất cả các điện thoại, tất cả ipad, tất cả android.

Answer 9

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

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

window.addEventListener('orientationchange', doOnOrientationChange);