ฉันมีแอป AJAX ที่สร้างขึ้นสำหรับเบราว์เซอร์ Safari บนมือถือที่ต้องการแสดงเนื้อหาประเภทต่างๆ
สำหรับเนื้อหาบางอย่างที่ฉันต้องการuser-scalable=1และสำหรับคนอื่น ๆ user-scalable=0ที่ฉันต้องการ
มีวิธีแก้ไขค่าของแอตทริบิวต์เนื้อหาโดยไม่ต้องรีเฟรชหน้าหรือไม่
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
คำตอบ:
ฉันรู้ว่ามันเก่าไปหน่อย แต่ใช่มันสามารถทำได้ จาวาสคริปต์เพื่อช่วยคุณเริ่มต้น:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
เพียงแค่เปลี่ยนชิ้นส่วนที่คุณต้องการและ Mobile Safari จะเคารพการตั้งค่าใหม่
อัปเดต:
หากคุณยังไม่มีเมตาแท็กวิวพอร์ตในแหล่งที่มาคุณสามารถต่อท้ายโดยตรงด้วยสิ่งต่อไปนี้:
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);
หรือถ้าคุณใช้ 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;">'); หรือถ้าไม่มี jQuery:document.getElementsByTagName('head')[0].appendChild( ... );
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
ในไฟล์ <head>
<meta id="viewport"
name="viewport"
content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />
ที่ไหนสักแห่งในจาวาสคริปต์ของคุณ
document.getElementById("viewport").setAttribute("content",
"initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");
... แต่ขอให้โชคดีกับการปรับแต่งอุปกรณ์ของคุณเล่นซอหลายชั่วโมง ... และฉันก็ยังไม่อยู่!
ส่วนใหญ่มีคำตอบ แต่จะขยายความ ...
ขั้นตอนที่ 1
เป้าหมายของฉันคือเปิดใช้งานการซูมในบางช่วงเวลาและปิดการใช้งานที่คนอื่น ๆ
// 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');
ขั้นตอนที่ 2
แท็กวิวพอร์ตจะอัปเดต แต่การซูมด้วยนิ้วยังคงทำงานอยู่ !! ฉันต้องหาวิธีเพื่อให้หน้าเว็บรับการเปลี่ยนแปลง ...
เป็นวิธีการแฮ็ก แต่การสลับความทึบของร่างกายเป็นเคล็ดลับ ฉันแน่ใจว่ามีวิธีอื่นในการทำให้สำเร็จ แต่นี่คือสิ่งที่ได้ผลสำหรับฉัน
// after updating viewport tag, force the page to pick up changes
document.body.style.opacity = .9999;
setTimeout(function(){
document.body.style.opacity = 1;
}, 1);
ขั้นตอนที่ 3
ปัญหาของฉันส่วนใหญ่ได้รับการแก้ไข ณ จุดนี้ แต่ก็ไม่มากนัก ฉันจำเป็นต้องทราบระดับการซูมปัจจุบันของหน้าเพื่อที่ฉันจะได้ปรับขนาดองค์ประกอบบางอย่างให้พอดีกับหน้า (นึกถึงเครื่องหมายบนแผนที่)
// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;
ฉันหวังว่านี่จะช่วยใครสักคน ฉันใช้เวลาหลายชั่วโมงในการกระแทกเมาส์ก่อนที่จะหาวิธีแก้ปัญหา
viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=1020');(สำหรับบริบทบางอย่าง: ฉันวางสิ่งนี้ไว้ในอินสแตนซ์ Drupal ที่ค่อนข้างล็อค ... ดังนั้นฉันจึงไม่สามารถเข้าถึงพื้นที่ส่วนหัวได้โดยตรงและจำเป็นต้องใช้ Javascript)