Tôi có một ứng dụng AJAX được xây dựng cho trình duyệt Safari di động cần hiển thị các loại nội dung khác nhau.
Đối với một số nội dung, tôi cần user-scalable=1và đối với những nội dung khác, tôi cần user-scalable=0.
Có cách nào để sửa đổi giá trị của thuộc tính nội dung mà không làm mới trang không?
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />Câu trả lời:
Tôi nhận ra điều này hơi cũ, nhưng, có thể làm được. Một số javascript để giúp bạn bắt đầu:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');Chỉ cần thay đổi các phần bạn cần và Mobile Safari sẽ tôn trọng các cài đặt mới.
Cập nhật:
Nếu bạn chưa có thẻ meta viewport trong nguồn, bạn có thể nối nó trực tiếp với một cái gì đó như sau:
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);Hoặc nếu bạn đang sử dụng jQuery:
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');$('head').append('<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">'); hoặc, không có jQuery:document.getElementsByTagName('head')[0].appendChild( ... );
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
trong của bạn <head>
<meta id="viewport"
name="viewport"
content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />ở đâu đó trong javascript của bạn
document.getElementById("viewport").setAttribute("content",
"initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");... nhưng chúc may mắn với việc chỉnh sửa nó cho thiết bị của bạn, loay hoay hàng giờ đồng hồ ... và tôi vẫn chưa hoàn thành!
Điều này đã được trả lời cho hầu hết các phần, nhưng tôi sẽ mở rộng ...
Bước 1
Mục tiêu của tôi là bật tính năng thu phóng tại một số thời điểm nhất định và tắt tính năng này ở những thời điểm khác.
// enable pinch zoom
var $viewport = $('head meta[name="viewport"]');
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=4');
// ...later...
// disable pinch zoom
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no');Bước 2
Thẻ khung nhìn sẽ cập nhật, nhưng thu phóng chụm vẫn hoạt động !! Tôi phải tìm cách để trang tiếp nhận các thay đổi ...
Đó là một giải pháp hack, nhưng việc chuyển đổi độ mờ của cơ thể đã thực hiện một mẹo nhỏ. Tôi chắc chắn rằng có những cách khác để thực hiện điều này, nhưng đây là những gì hiệu quả với tôi.
// after updating viewport tag, force the page to pick up changes
document.body.style.opacity = .9999;
setTimeout(function(){
document.body.style.opacity = 1;
}, 1);Bước 3
Vấn đề của tôi hầu như đã được giải quyết tại thời điểm này, nhưng không hoàn toàn. Tôi cần biết mức thu phóng hiện tại của trang để có thể thay đổi kích thước một số yếu tố cho vừa với trang (hãy nghĩ đến các điểm đánh dấu trên bản đồ).
// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;Tôi hi vọng nó sẽ giúp ích cho mọi người. Tôi đã dành vài giờ để đập chuột trước khi tìm ra giải pháp.
viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=1020');(Chỉ vì một số ngữ cảnh: Tôi đang đặt nó trong một phiên bản Drupal bị khóa ... vì vậy tôi không có quyền truy cập trực tiếp vào vùng đầu và cần sử dụng Javascript)