আমি কি ফ্লাইতে মোবাইল সাফারিতে ভিউপোর্ট মেটা ট্যাগটি পরিবর্তন করতে পারি?

Question 1

আমার কাছে মোবাইল সাফারি ব্রাউজারের জন্য তৈরি একটি এজেএক্স অ্যাপ্লিকেশন রয়েছে যাতে বিভিন্ন ধরণের সামগ্রী প্রদর্শন করা দরকার।

কিছু সামগ্রীর user-scalable=1জন্য আমার প্রয়োজন এবং অন্যান্যগুলির জন্যও আমার প্রয়োজন user-scalable=0।

পৃষ্ঠাটি রিফ্রেশ না করে কন্টেন্ট অ্যাট্রিবিটের মানটি সংশোধন করার কোনও উপায় আছে?

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

Question 2

আমি বুঝতে পারি এটি কিছুটা পুরানো, তবে, হ্যাঁ এটি করা যেতে পারে। আপনাকে শুরু করতে কিছু জাভাস্ক্রিপ্ট:

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

আপনার প্রয়োজনীয় অংশগুলি কেবল পরিবর্তন করুন এবং মোবাইল সাফারি নতুন সেটিংসকে সম্মান করবে।

হালনাগাদ:

উত্সটিতে ইতিমধ্যে যদি আপনার কাছে মেটা ভিউপোর্ট ট্যাগ না থাকে তবে আপনি এ জাতীয় কিছু দিয়ে সরাসরি এ্যাপেন্ড করতে পারেন:

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

Question 3

আপনার মধ্যে <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;");

... তবে আপনার ডিভাইসের জন্য এটি টুইট করে ঘন্টার পর ঘন্টা ফিড করে শুভকামনা ... এবং আমি এখনও সেখানে নেই!

সূত্র

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

ধাপ ২

ভিউপোর্ট ট্যাগ আপডেট হবে, তবে চিমটি জুম এখনও সক্রিয় ছিল !! পরিবর্তনগুলি বেছে নেওয়ার জন্য আমাকে একটি পৃষ্ঠা খুঁজে পেতে হয়েছিল ...

এটি একটি হ্যাক সমাধান, তবে শরীরের অস্বচ্ছতা টগল করে কৌশলটি করেছে। আমি নিশ্চিত যে এটি সম্পাদন করার অন্যান্য উপায় আছে তবে আমার জন্য কী কাজ করেছে তা এখানে।

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

আমি এই কারো সাহায্য করে আশা করি। সমাধান পাওয়ার আগে আমি কয়েক ঘন্টা আমার মাউসকে বেঁধেছি spent