Dapatkah saya mengubah tag meta viewport di safari seluler dengan cepat?

Saya memiliki aplikasi AJAX yang dibuat untuk browser Safari seluler yang perlu menampilkan berbagai jenis konten.

Untuk beberapa konten, saya perlu user-scalable=1dan yang lainnya, saya butuhkan user-scalable=0.

Adakah cara untuk mengubah nilai atribut konten tanpa menyegarkan halaman?

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

javascript mobile-safari viewport

— Lada
sumber

Jawaban:

148

Saya menyadari ini agak tua, tapi, ya itu bisa dilakukan. Beberapa javascript untuk Anda mulai:

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

Ubah saja bagian yang Anda butuhkan dan Mobile Safari akan mengikuti pengaturan baru.

Memperbarui:

Jika Anda belum memiliki tag meta viewport di sumbernya, Anda dapat menambahkannya langsung dengan sesuatu seperti ini:

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

Atau jika Anda menggunakan jQuery:

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');

— markquezada
sumber

Bagus! Sayangnya, saya tidak bisa membuatnya berfungsi. Situasi saya sedikit berbeda: Saya bekerja dengan situs yang memiliki lebar 980px. Kontennya langsung ke tepi desain, jadi pada iPad, tampilannya terlihat canggung. Saya pikir saya akan mengatur viewport ke lebar 1020px untuk memungkinkan margin 20px di kedua sisi ... tapi tidak berhasil: viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=1020'); (Hanya untuk beberapa konteks: Saya meletakkan ini dalam contoh Drupal yang agak terkunci ... jadi saya tidak memiliki akses langsung ke area kepala dan perlu menggunakan Javascript)

— Sam

Ini seharusnya cukup mudah. Langsung tulis saja. Jika Anda menggunakan jQuery akan menjadi seperti ini:

$('head').append('<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">');

atau, tanpa jQuery:document.getElementsByTagName('head')[0].appendChild( ... );

— markquezada

Untuk atribut konten, pemeriksa web safari seluler menampilkan kesalahan pada titik koma. Ini tampaknya lebih valid:viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

— jfroom

@the_nuts Anda benar, appendChild mengharapkan node, bukan string. Diperbarui. Terima kasih.

— markquezada

@basZero: Anda dapat menggunakan agen pengguna untuk memeriksa perangkat mana yang menjalankan skrip sebelum menjalankan kode di atas, tetapi secara umum menurut saya itu ide yang buruk. Cobalah untuk menggeneralisasi berdasarkan fitur perangkat (atau ukuran layar jika harus), bukan perangkat sebenarnya. Misalnya, Anda dapat mendeteksi apakah perangkat mendukung peristiwa sentuh, dll. (Yaitu, dengan modernizr ). Tergantung pada apa yang Anda coba lakukan.

— markquezada

di Anda <head>

<meta id="viewport"
      name="viewport"
      content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />

di suatu tempat di javascript Anda

document.getElementById("viewport").setAttribute("content",
      "initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");

... tapi semoga berhasil dengan mengutak-atiknya untuk perangkat Anda, mengutak-atik berjam-jam ... dan saya masih belum sampai!

sumber

— sonjz
sumber

Ini telah dijawab untuk sebagian besar, tetapi saya akan memperluas ...

Langkah 1

Tujuan saya adalah mengaktifkan zoom pada waktu tertentu, dan menonaktifkannya di waktu lain.

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

Langkah 2

Tag viewport akan diperbarui, tetapi pinch zoom masih aktif !! Saya harus menemukan cara untuk mendapatkan halaman untuk mengambil perubahan ...

Ini adalah solusi peretasan, tetapi mengubah opacity tubuh melakukan triknya. Saya yakin ada cara lain untuk mencapai ini, tetapi inilah yang berhasil untuk saya.

// after updating viewport tag, force the page to pick up changes           
document.body.style.opacity = .9999;
setTimeout(function(){
    document.body.style.opacity = 1;
}, 1);

LANGKAH 3

Masalah saya sebagian besar telah terpecahkan pada saat ini, tetapi tidak sepenuhnya. Saya perlu mengetahui tingkat zoom halaman saat ini sehingga saya dapat mengubah ukuran beberapa elemen agar sesuai dengan halaman (pikirkan penanda peta).

// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;

Saya harap ini membantu seseorang. Saya menghabiskan beberapa jam membenturkan mouse saya sebelum menemukan solusi.

— laboratorium posit
sumber

Ini menyelamatkan hidup saya, tetapi saya memiliki sedikit masalah dengannya: dengan asumsi Anda menampilkan gambar dalam div overlay pada 100% dan memperbesarnya pada perangkat seluler, Anda akan memperbesar menggunakan implementasi zoom browser asli yang biasanya hanya menskalakan yang terlihat area tanpa rendering ulang file asli. Di sisi lain, jika saya menghapus "width = device-width" untuk status zoom yang dinonaktifkan, itu membuat gambar menjadi bagus saat diperbesar tetapi saya kehilangan posisi halaman terakhir saya ketika div 100% ditutup ...

— Stefan Müller