Menggunakan jQuery Untuk Mendapatkan Ukuran Viewport

308

Bagaimana cara menggunakan jQuery untuk menentukan ukuran viewport browser, dan untuk mengaktifkan kembali ini jika halaman diubah ukurannya? Saya perlu membuat ukuran IFRAME ke dalam ruang ini (datang sedikit di setiap margin).

Bagi mereka yang tidak tahu, viewport browser bukan ukuran dokumen / halaman. Ini adalah ukuran jendela Anda yang terlihat sebelum gulir.

jquery resize size viewport Volomike
sumber
Adakah yang tahu cara mendapatkan area yang terlihat di layar perangkat, bukan hanya apa yang dapat digulir? Saya melihat $ (jendela) .tinggi () mengembalikan lebar penuh dokumen, bukan bagian yang diperbesar. Saya ingin tahu berapa banyak yang terlihat setelah zoom diterapkan.
Frank Schwieterman
appelsiini.net/projects/viewport Ini seharusnya melakukannya! :)
Mackelito
1
Ini bukan jawaban langsung untuk pertanyaan, tetapi dapat berguna bagi mereka yang ingin memanipulasi pemilih berdasarkan posisi & visibilitas mereka relatif terhadap viewport: appelsiini.net/projects/viewport (plugin)
Wallace Sidhrée

Jawaban:

484

Untuk mendapatkan lebar dan tinggi viewport:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

mengubah ukuran acara halaman:

$(window).resize(function() {

});
SimaWB
sumber
18
Saya menguji ini pada Windows IE6, IE8, FF3.6.3, Google Chrome 5.0.375.70, Opera 10.53, dan Safari 5.0 (7533.16). Ini bekerja secara konsisten pada semua ini. Saya juga menguji FF3.6.3 di Ubuntu dan juga berfungsi di sana. Saya pikir saya menggunakan jQuery 1.3 dengan WordPress 2.9.2, di situlah saya membutuhkan ini untuk bekerja.
Volomike
48
Adakah yang tahu cara mendapatkan area yang terlihat di layar perangkat, bukan hanya apa yang dapat digulir? Saya melihat $ (jendela) .tinggi () mengembalikan lebar penuh dokumen, bukan bagian yang diperbesar. Saya ingin tahu berapa banyak yang terlihat setelah zoom diterapkan.
Frank Schwieterman
9
Sebenarnya, innerWidth/ innerHeightlebih tepat digunakan (mencakup zooming).
18
@FrankSchwieterman Mungkin browser Anda tidak berlaku seperti yang Anda inginkan: mungkin Anda mengalami masalah ini: stackoverflow.com/q/12103208/923560 . Pastikan file HTML Anda menyertakan DOCTYPEdeklarasi yang tepat , mis <!DOCTYPE html>.
Abdull
21
Ini sepenuhnya salah. Ini memberi Anda ukuran dokumen, bukan viewport (ukuran jendela ke dokumen).
Mike Bethany
26

1. Respon terhadap pertanyaan utama

Script $(window).height()berfungsi dengan baik (menunjukkan ketinggian viewport dan bukan dokumen dengan tinggi gulir), TETAPI perlu Anda menempatkan tag doctype dengan benar dalam dokumen Anda, misalnya doctypes ini:

Untuk HTML 5:

<!DOCTYPE html>

Untuk HTML4 transisi:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Mungkin doctype default yang diasumsikan oleh beberapa browser adalah seperti itu, yang $(window).height()mengambil tinggi dokumen dan bukan tinggi browser. Dengan spesifikasi DOCTYPE, itu diselesaikan dengan memuaskan, dan saya cukup yakin kalian akan menghindari "mengubah scroll-overflow menjadi tersembunyi dan kemudian kembali", yang, maaf, trik yang sedikit kotor, khususnya jika Anda tidak t mendokumentasikannya pada kode untuk penggunaan programmer masa depan.

2. Kiat TAMBAHAN, singkirkan: Selain itu, jika Anda membuat skrip, Anda dapat membuat tes untuk membantu programmer dalam menggunakan pustaka Anda, izinkan saya membuat pasangan:

$ (dokumen) .ready (function () {

      if(typeof $=='undefined') {
        alert("PROGRAMMER'S Error: you haven't called JQuery library");
      } else if (typeof $.ui=='undefined') {
        alert("PROGRAMMER'S Error: you haven't installed the UI Jquery library");
      }
      if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
      }

});

EDIT: tentang bagian 2, "Kiat TAMBAHAN, singkirkan catatan": @Machiel, dalam komentar kemarin (2014-09-04), BENAR-BENAR benar: cek $ tidak dapat berada dalam acara siap Jquery, karena kita, seperti yang dia tunjukkan, dengan asumsi $ sudah didefinisikan. TERIMA KASIH UNTUK MENITIKKAN BAHWA KELUAR, dan tolong pembaca lainnya memperbaikinya, jika Anda menggunakannya dalam skrip Anda. Saran saya adalah: di perpustakaan Anda letakkan fungsi "install_script ()" yang menginisialisasi perpustakaan (masukkan referensi ke $ di dalam fungsi init tersebut, termasuk deklarasi ready ()) dan DI AWAL fungsi "install_script ()" tersebut , periksa apakah $ didefinisikan, tetapi jadikan semuanya independen dari JQuery, sehingga pustaka Anda dapat "mendiagnosis dirinya sendiri" ketika JQuery belum didefinisikan. Saya lebih suka metode ini daripada memaksa penciptaan otomatis JQuery membawanya dari CDN. Itu adalah catatan kecil disamping untuk membantu programmer lain. Saya pikir orang yang membuat perpustakaan harus lebih kaya dalam umpan balik terhadap kesalahan programmer potensial. Misalnya, Google Apis memerlukan manual samping untuk memahami pesan kesalahan. Itu tidak masuk akal, membutuhkan dokumentasi eksternal untuk beberapa kesalahan kecil yang tidak mengharuskan Anda untuk pergi dan mencari manual atau spesifikasi. Perpustakaan harus DOKUMEN DIRI. Saya menulis kode bahkan menangani kesalahan yang mungkin saya lakukan bahkan enam bulan dari sekarang, dan itu masih mencoba untuk menjadi kode yang bersih dan tidak berulang, sudah ditulis untuk mencegah-masa depan-kesalahan pengembang. Saya pikir orang yang membuat perpustakaan harus lebih kaya dalam umpan balik terhadap kesalahan programmer potensial. Misalnya, Google Apis memerlukan manual samping untuk memahami pesan kesalahan. Itu tidak masuk akal, membutuhkan dokumentasi eksternal untuk beberapa kesalahan kecil yang tidak mengharuskan Anda untuk pergi dan mencari manual atau spesifikasi. Perpustakaan harus DOKUMEN DIRI. Saya menulis kode bahkan menangani kesalahan yang mungkin saya lakukan bahkan enam bulan dari sekarang, dan itu masih mencoba untuk menjadi kode yang bersih dan tidak berulang, sudah ditulis untuk mencegah-masa depan-kesalahan pengembang. Saya pikir orang yang membuat perpustakaan harus lebih kaya dalam umpan balik terhadap kesalahan programmer potensial. Misalnya, Google Apis memerlukan manual samping untuk memahami pesan kesalahan. Itu tidak masuk akal, membutuhkan dokumentasi eksternal untuk beberapa kesalahan kecil yang tidak mengharuskan Anda untuk pergi dan mencari manual atau spesifikasi. Perpustakaan harus DOKUMEN DIRI. Saya menulis kode bahkan menangani kesalahan yang mungkin saya lakukan bahkan enam bulan dari sekarang, dan itu masih mencoba untuk menjadi kode yang bersih dan tidak berulang, sudah ditulis untuk mencegah-masa depan-kesalahan pengembang. Anda tidak perlu pergi dan mencari manual atau spesifikasi. Perpustakaan harus DOKUMEN DIRI. Saya menulis kode bahkan menangani kesalahan yang mungkin saya lakukan bahkan enam bulan dari sekarang, dan itu masih mencoba untuk menjadi kode yang bersih dan tidak berulang, sudah ditulis untuk mencegah-masa depan-kesalahan pengembang. Anda tidak perlu pergi dan mencari manual atau spesifikasi. Perpustakaan harus DOKUMEN DIRI. Saya menulis kode bahkan menangani kesalahan yang mungkin saya lakukan bahkan enam bulan dari sekarang, dan itu masih mencoba untuk menjadi kode yang bersih dan tidak berulang, sudah ditulis untuk mencegah-masa depan-kesalahan pengembang.

David L.
sumber
2
Sangat sulit untuk membaca posting Anda. Silakan ulangi posting Anda sehingga Anda terbiasa dengan StackExchange Markdown seperti orang lain. Ada alasan mengapa situs StackExchange tidak menggunakan TinyMCE , tetapi jika Anda memiliki keluhan tentang itu, terlibatlah dalam Meta .
Volomike
Agak aneh bahwa Anda memeriksa ketersediaan $setelah Anda sudah menggunakan $untuk menelepon $(document).ready(function() { } );. Baik jika Anda memeriksa apakah jQuery tersedia, tetapi pada saat ini sudah terlambat.
Machiel
@Machiel, kamu BENAR-BENAR BENAR. Untungnya saya hanya pergi untuk memeriksa skrip saya, dan mereka tidak menggunakan acara siap. Ya, terima kasih, saya merasa bodoh ketika Anda mengatakan ini, tetapi untungnya saya baru saja memeriksa bahwa dalam skrip saya pemeriksaan berada di dalam fungsi yang disebut "install_this_script ()", dan dalam instalasi seperti itu saya memanggil fungsi init dari perpustakaan, tetapi sebelum itu, saya memeriksa (OUTSIDE JQUERY) apakah $ object didefinisikan atau tidak. TERIMA KASIH PULA, bro, Anda benar-benar membuatku takut! Saya khawatir posting ini ada di sini terlalu lama, saya berharap kesalahan ini tidak banyak merugikan pembaca lainnya. Saya memperbaiki pos.
David L
Ini harus menjadi jawaban nyata! Terima kasih!
Justin T. Watts
6

Anda dapat menggunakan $ (window) .resize () untuk mendeteksi jika viewport diubah ukurannya.

jQuery tidak memiliki fungsi untuk secara konsisten mendeteksi lebar dan tinggi viewport yang benar [1] ketika ada bilah gulir.

Saya menemukan solusi yang menggunakan perpustakaan Modernizr dan secara khusus fungsi mq yang membuka kueri media untuk javascript.

Ini solusinya:

// A function for detecting the viewport minimum width.
// You could use a similar function for minimum height if you wish.
var min_width;
if (Modernizr.mq('(min-width: 0px)')) {
    // Browsers that support media queries
    min_width = function (width) {
        return Modernizr.mq('(min-width: ' + width + ')');
    };
}
else {
    // Fallback for browsers that does not support media queries
    min_width = function (width) {
        return $(window).width() >= width;
    };
}

var resize = function() {
    if (min_width('768px')) {
        // Do some magic
    }
};

$(window).resize(resize);
resize();

Jawaban saya mungkin tidak akan membantu mengubah ukuran iframe menjadi 100% lebar viewport dengan margin di setiap sisi, tapi saya harap itu akan memberikan penghiburan bagi pengembang web yang frustrasi dengan ketidakcocokan browser lebar javascript viewport dan perhitungan tinggi.

Mungkin ini bisa membantu sehubungan dengan iframe:

$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');

[1] Anda dapat menggunakan $ (window) .width () dan $ (window) .height () untuk mendapatkan nomor yang benar di beberapa browser, tetapi salah di yang lain. Di browser tersebut Anda dapat mencoba menggunakan window.innerWidth dan window.innerHeight untuk mendapatkan lebar dan tinggi yang benar, tetapi saya akan menyarankan metode ini karena akan bergantung pada agen pengguna sniffing.

Biasanya browser yang berbeda tidak konsisten tentang apakah mereka memasukkan scrollbar sebagai bagian dari lebar dan tinggi jendela.

Catatan: $ (window) .width () dan window.innerWidth bervariasi antara sistem operasi yang menggunakan browser yang sama. Lihat: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238

forsvunnet
sumber
4 
function showViewPortSize(display) {
    if (display) {
        var height = window.innerHeight;
        var width = window.innerWidth;
        jQuery('body')
            .prepend('<div id="viewportsize" style="z-index:9999;position:fixed;bottom:0px;left:0px;color:#fff;background:#000;padding:10px">Height: ' + height + '<br>Width: ' + width + '</div>');
        jQuery(window)
            .resize(function() {
                height = window.innerHeight;
                width = window.innerWidth;
                jQuery('#viewportsize')
                    .html('Height: ' + height + '<br>Width: ' + width);
            });
    }
}
$(document)
    .ready(function() {
        showViewPortSize(true);
    });
AnuRaj
sumber
Menggunakan $ (window) .height () tidak akan memberi Anda ukuran viewport itu akan memberi Anda ukuran seluruh jendela, yang biasanya ukuran seluruh dokumen meskipun dokumen itu bisa lebih besar.
AnuRaj
bagus untuk lebar!
Marc
2

Untuk mendapatkan ukuran viewport saat memuat dan menyesuaikan ukuran (berdasarkan respons SimaWB):

function getViewport() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}

getViewport();

$(window).resize(function() {
    getViewport()
});
SandroMarques
sumber
1

Harap dicatat bahwa unit viewport CSS3 (vh, vw) tidak akan berfungsi dengan baik di iOS Ketika Anda menggulir halaman, ukuran viewport entah bagaimana dihitung ulang dan ukuran elemen Anda yang menggunakan unit viewport juga meningkat. Jadi, sebenarnya beberapa javascript diperlukan.

DAH
sumber