Farklı içerik türlerini görüntülemesi gereken mobil Safari tarayıcısı için oluşturulmuş bir AJAX uygulamam var.
Bazı içerikler user-scalable=1için ihtiyacım var ve diğerleri için ihtiyacım var user-scalable=0.
Sayfayı yenilemeden içerik özniteliğinin değerini değiştirmenin bir yolu var mı?
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />Yanıtlar:
Bunun biraz eski olduğunun farkındayım, ama evet yapılabilir. Başlamanıza yardımcı olacak bazı javascript:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');İhtiyacınız olan parçaları değiştirin ve Mobile Safari yeni ayarlara saygı duysun.
Güncelleme:
Kaynakta meta görüntü alanı etiketiniz yoksa, bunu doğrudan aşağıdaki gibi bir şeyle ekleyebilirsiniz:
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);Veya jQuery kullanıyorsanız:
$('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;">'); veya jQuery olmadan:document.getElementsByTagName('head')[0].appendChild( ... );
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
senin içinde <head>
<meta id="viewport"
name="viewport"
content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />JavaScript'inizde bir yerde
document.getElementById("viewport").setAttribute("content",
"initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");... ama cihazınız için ince ayarlamalar yapmakta, saatlerce uğraşmakta iyi şanslar ... ve ben hala orada değilim!
Bu çoğunlukla cevaplandı, ama ben genişleteceğim ...
Aşama 1
Amacım yakınlaştırmayı belirli zamanlarda etkinleştirmek ve diğerlerinde devre dışı bırakmaktı.
// 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');Adım 2
Görüntü alanı etiketi güncellenecekti, ancak sıkıştırarak yakınlaştırma hala etkindi !! Değişiklikleri almak için sayfayı almanın bir yolunu bulmalıydım ...
Bu bir hack çözümü, ancak vücudun opaklığını değiştirmek hile yaptı. Eminim bunu başarmanın başka yolları da vardır, ama işte benim için işe yarayan şey.
// after updating viewport tag, force the page to pick up changes
document.body.style.opacity = .9999;
setTimeout(function(){
document.body.style.opacity = 1;
}, 1);Aşama 3
Sorunum çoğunlukla bu noktada çözüldü, ama tam olarak değil. Sayfanın mevcut yakınlaştırma seviyesini bilmem gerekiyordu, böylece bazı öğeleri sayfaya sığacak şekilde yeniden boyutlandırabilirdim (harita işaretleyicilerini düşünün).
// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;Umarım bu birisine yardımcı olur. Bir çözüm bulmadan önce birkaç saat fareme vurdum.
viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=1020');(Sadece bir bağlam için: Bunu biraz kilitlenmiş bir Drupal örneğine koyuyorum ... bu yüzden baş bölgesine doğrudan erişimim yok ve Javascript kullanmam gerekiyor)