Đặt lại tỷ lệ/chiều rộng/thu phóng của Safari trên iPhone bằng JavaScript/onorientationchange

Question

Tôi đang hiển thị nội dung khác nhau tùy thuộc vào cách người dùng đang cầm/điện thoại của mình bằng cách sử dụng lệnh gọi onorientationchange trong thẻ body. Điều này làm việc tuyệt vời - Tôi ẩn một div trong khi làm cho một khác có thể nhìn thấy.

Div trong chế độ dọc sẽ trông tuyệt vời khi tải đầu tiên. Tôi sử dụng này để có được quy mô phải/zoom:

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

Thậm chí nếu nội dung ở chế độ dọc chạy qua, chiều rộng là đúng và người dùng có thể di chuyển xuống. Màn hình ở chế độ ngang cũng hoàn hảo. Tuy nhiên, nếu nội dung ở chế độ ngang yêu cầu người dùng cuộn xuống, khi người dùng quay lại chế độ dọc, màn hình sẽ "thu nhỏ" để nói. Điều này xảy ra cho dù người dùng có cuộn xuống khi ở chế độ ngang hay không.

Tôi đã thử nhiều thứ khác nhau để cố gắng thu phóng tỷ lệ/thu phóng/chiều rộng của màn hình, nhưng không may mắn. Có cách nào để làm điều này không?

Cảm ơn trước!

Answer 1

Đây là những gì tôi sử dụng để đối phó với zoom trên phương tiện truyền thông truy vấn của tôi:

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

Quy mô tối đa là thứ đã bán cho tôi. Nó có nghĩa là sự chuyển đổi từ chân dung sang phong cảnh trên iphone thực sự trơn tru mà không có vấn đề zoom nào cả ...

Answer 2

Điều này sẽ không hoạt động nếu bạn đang chạy một ứng dụng web trong safari, nhưng tôi nghĩ rằng nó sẽ hoạt động nếu bạn đang sử dụng một UIWebView bên trong ứng dụng của riêng bạn.

Tôi chưa thử nghiệm điều này, nhưng có một cách dễ dàng để javascript của bạn nói chuyện với phía khách quan c của mã mà tại đó bạn sẽ có quyền truy cập vào những thứ như phóng to chế độ xem web.

Answer 3

Bạn có thể đặt thuộc tính user-scalable trong thuộc tính nội dung. Hãy thử điều này:

<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no;"> 

Từ this answer:

Nhưng nếu bạn gán người dùng khả năng mở rộng = không có trang web phương tiện của nó không cho phép để phóng to hoặc thu nhỏ.

Answer 4

Tôi cũng gặp vấn đề này. Thử đặt "thang tỷ lệ tối đa = 1.0" (và có thể là "minumum-scale = 1.0" nếu bạn cảm thấy thích) trong thẻ khung nhìn của mình. này giả định bạn không muốn người dùng có quy mô có thể mặc dù (mà tôi không)

Answer 5

Tôi gặp một số vấn đề với mức thu phóng thay đổi từ ngang sang dọc, khi nội dung lớn hơn khung nhìn. Đặt "quy mô tối thiểu = 1.0", đã giải quyết vấn đề này cho tôi.

Answer 6

"Câu trả lời" được chấp nhận ở trên không thực sự là câu trả lời, trong đó không cho phép thu phóng bất kỳ điều gì xấu như yêu cầu người dùng IE chuyển sang trình duyệt khác. Đó là khủng khiếp cho khả năng tiếp cận. Bạn muốn thiết kế của bạn không làm những điều phóng to sôi nổi mà Apple đã coi là lý tưởng khi chuyển hướng xem, nhưng bạn đang rời khỏi người dùng bị vô hiệu hóa trong bụi. Rất không khuyến khích.

Thử sử dụng truy vấn phương tiện hoặc móc js (màn hình.chiều rộng, vv) để điều chỉnh thiết kế của bạn tự động khi thay đổi hướng. Đó là lý do tại sao các thuộc tính này được tiếp xúc với chúng tôi với tư cách là nhà phát triển.

Answer 7

Sử dụng thẻ meta cho tính năng này không hoạt động. Tôi đã thử mọi sự kết hợp của thẻ meta và orientationchange và gesturechange sự kiện có thể, tôi cố gắng timeouts và tất cả các loại javascript ưa thích, sau đó tôi thấy điều này: https://github.com/scottjehl/iOS-Orientationchange-Fix

qua câu hỏi có liên quan này: How do I reset the scale/zoom of a web app on an orientation change on the iPhone?

Mở bài mà Andrew Ashbacher đăng tải một liên kết đến mã được viết bởi Scott Jehl:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this); 

Đó là một giải pháp bọc độc đáo trong một IIFE do đó bạn không phải lo lắng về vấn đề tên-không gian.

Chỉ cần thả nó vào kịch bản của bạn (không phải vào document.ready() nếu bạn đang sử dụng jQuery) và viola!

Tất cả điều đó là vô hiệu hóa thu phóng trên devicemotion sự kiện cho biết rằng orientationchange sắp xảy ra. Đó là giải pháp tốt nhất tôi đã nhìn thấy bởi vì nó thực sự hoạt động và không vô hiệu hóa zoom.

CHỈNH SỬA: cách tiếp cận này không phải lúc nào cũng đáng tin cậy, đặc biệt khi bạn đang giữ ipad ở một góc. Ngoài ra, tôi không nghĩ rằng sự kiện này có sẵn cho gen 1 ipad