ฉันสามารถเปลี่ยนเมตาแท็กของวิวพอร์ตในซาฟารีมือถือได้ทันทีหรือไม่


98

ฉันมีแอป 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;" />

คำตอบ:


148

ฉันรู้ว่ามันเก่าไปหน่อย แต่ใช่มันสามารถทำได้ จาวาสคริปต์เพื่อช่วยคุณเริ่มต้น:

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">');

2
ดี! น่าเสียดายที่ดูเหมือนว่าฉันไม่สามารถใช้งานได้ สถานการณ์ของฉันแตกต่างไปเล็กน้อย: ฉันกำลังทำงานกับไซต์ที่มีความกว้าง 980px เนื้อหาไปถึงขอบของการออกแบบดังนั้นบน iPad จึงดูอึดอัด ฉันคิดว่าฉันจะตั้งวิวพอร์ตให้มีความกว้าง 1020px เพื่อให้มีระยะขอบ 20px ที่ด้านใดด้านหนึ่ง ... แต่ไม่มีโชค: viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=1020'); (สำหรับบริบทบางอย่าง: ฉันวางสิ่งนี้ไว้ในอินสแตนซ์ Drupal ที่ค่อนข้างล็อค ... ดังนั้นฉันจึงไม่สามารถเข้าถึงพื้นที่ส่วนหัวได้โดยตรงและจำเป็นต้องใช้ Javascript)
แซม

7
นี่ควรจะง่ายพอ เพียงเขียนลงในโดยตรง หากคุณใช้ jQuery มันจะเป็นแบบนี้$('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( ... );
markquezada

3
สำหรับแอตทริบิวต์เนื้อหาตัวตรวจสอบเว็บของซาฟารีมือถือกำลังแสดงข้อผิดพลาดที่อัฒภาค สิ่งนี้ดูเหมือนจะถูกต้องมากกว่า:viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
jfroom

1
@the_nuts คุณพูดถูก appendChild คาดว่าโหนดไม่ใช่สตริง อัปเดตแล้ว ขอบคุณ.
markquezada

1
@basZero: คุณสามารถใช้ตัวแทนผู้ใช้เพื่อตรวจสอบว่าอุปกรณ์ใดที่สคริปต์ทำงานอยู่ก่อนที่จะรันโค้ดด้านบน แต่โดยทั่วไปฉันคิดว่านั่นเป็นความคิดที่ไม่ดี พยายามสรุปโดยอิงตามคุณสมบัติของอุปกรณ์ (หรือขนาดหน้าจอหากคุณต้องการ) ไม่ใช่อุปกรณ์จริง ตัวอย่างเช่นคุณสามารถตรวจจับได้ว่าอุปกรณ์รองรับเหตุการณ์การสัมผัสหรือไม่ ฯลฯ (เช่นกับmodernizr ) ขึ้นอยู่กับสิ่งที่คุณกำลังพยายามทำ
markquezada

8

ในไฟล์ <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;");

... แต่ขอให้โชคดีกับการปรับแต่งอุปกรณ์ของคุณเล่นซอหลายชั่วโมง ... และฉันก็ยังไม่อยู่!

แหล่งที่มา


4

ส่วนใหญ่มีคำตอบ แต่จะขยายความ ...

ขั้นตอนที่ 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;

ฉันหวังว่านี่จะช่วยใครสักคน ฉันใช้เวลาหลายชั่วโมงในการกระแทกเมาส์ก่อนที่จะหาวิธีแก้ปัญหา


สิ่งนี้ช่วยชีวิตฉันได้ แต่ฉันมีปัญหาเล็กน้อยคือสมมติว่าคุณแสดงภาพใน div ซ้อนทับที่ 100% และซูมเข้าไปในอุปกรณ์มือถือคุณจะซูมโดยใช้การใช้งานการซูมเบราว์เซอร์ดั้งเดิมซึ่งโดยปกติจะปรับขนาดการมองเห็น พื้นที่โดยไม่มีการเรนเดอร์ไฟล์ต้นฉบับ ในอีกด้านหนึ่งถ้าฉันลบ "width = device-width" สำหรับสถานะการซูมที่ปิดใช้งานมันจะแสดงภาพได้ดีในขณะที่ซูม แต่ฉันหลุดตำแหน่งหน้าสุดท้ายเมื่อปิด div 100% ...
Stefan Müller
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.