هل يمكنني تغيير علامة Meta Meta Viewport في Safari المتنقل أثناء الطيران؟

StackOverflow https://stackoverflow.com/questions/3588628

سؤال

لديّ تطبيق 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;" />
هل كانت مفيدة؟

المحلول

أدرك أن هذا قديم بعض الشيء ، ولكن نعم يمكن القيام به. بعض JavaScript لتبدأ:

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

ما عليك سوى تغيير الأجزاء التي تحتاجها وسيحترم 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>

<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

سيتم تحديث علامة Viewport ، لكن Pinch Zoom كان لا يزال نشطًا !! اضطررت إلى إيجاد طريقة للحصول على الصفحة لالتقاط التغييرات ...

إنه حل اختراق ، لكن تبديل عتامة الجسم فعل الخدعة. أنا متأكد من أن هناك طرقًا أخرى لإنجاز هذا ، ولكن إليك ما نجح بالنسبة لي.

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

امل ان يساعد هذا احد ما. قضيت عدة ساعات في ضجيج الماوس قبل العثور على حل.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top