Görünüm Boyutunu Almak için jQuery Kullanma

308

Tarayıcı görünüm penceresinin boyutunu belirlemek ve sayfa yeniden boyutlandırılırsa bunu yeniden belirlemek için jQuery'yi nasıl kullanabilirim? Bu alana bir IFRAME boyutu yapmam gerekiyor (her kenarda biraz geliyor).

Bilmeyenler için tarayıcı görünüm penceresi belgenin / sayfanın boyutu değildir. Kaydırma işleminden önce pencerenizin görünür boyutudur.

— Volomike
kaynak

Sadece neye kaydırılabileceği değil, cihaz ekranında görünen alanın nasıl elde edileceği hakkında bir fikriniz var mı? $ (Window) .height () öğesinin, yakınlaştırılan kısmı değil, belgenin tam genişliğini döndürdüğünü görüyorum. Zoom uygulandıktan sonra ne kadar görünür olduğunu bilmek istiyorum.

— Frank Schwieterman

appelsiini.net/projects/viewport Bunu yapmalı! :)

— Mackelito

1

Bu soruya doğrudan bir cevap değildir, ancak seçiciyi manzaraya göre konumlarına ve görünürlüklerine göre değiştirmek isteyenler için kullanışlı olabilir: appelsiini.net/projects/viewport (eklenti)

— Wallace Sidhrée

484

Görünüm penceresinin genişliğini ve yüksekliğini almak için:

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

sayfanın yeniden boyutlandırma etkinliği:

$(window).resize(function() {

});

— SimaWB
kaynak

18

Bunu Windows IE6, IE8, FF3.6.3, Google Chrome 5.0.375.70, Opera 10.53 ve Safari 5.0'da (7533.16) test ettim. Bu, tüm bunlar üzerinde tutarlı bir şekilde çalışır. Ayrıca Ubuntu üzerinde FF3.6.3'ü test ettim ve orada da çalışıyor. Ben jQuery 1.3 WordPress 2.9.2 ile kullanıyorum düşünüyorum, bu nerede çalışmak için gerekli.

— Volomike

48

Sadece neye kaydırılabileceği değil, cihaz ekranında görünen alanın nasıl elde edileceği hakkında bir fikriniz var mı? $ (Window) .height () öğesinin, yakınlaştırılan kısmı değil, belgenin tam genişliğini döndürdüğünü görüyorum. Zoom uygulandıktan sonra ne kadar görünür olduğunu bilmek istiyorum.

— Frank Schwieterman

9

Aslında, innerWidth/ innerHeightkullanımı daha doğru (yakınlaştırmayı kapsayan).

18

@FrankSchwieterman Tarayıcınız istediğiniz şekilde davranmıyor olabilir: belki bu sorunla karşılaşıyorsunuz: stackoverflow.com/q/12103208/923560 . HTML dosyanızın uygun bir DOCTYPEbildirim içerdiğinden emin olun , örn <!DOCTYPE html>.

— Abdull

21

Bu tamamen yanlış. Bu, görünüm penceresini değil, belgenin boyutunu verir (pencerenin belgeye boyutu).

— Mike Bethany

39

Görüntü birimi birimlerini (CSS3) deneyebilirsiniz :

div { 
  height: 95vh; 
  width: 95vw; 
}

Tarayıcı desteği

— Vitalii Fedorenko
kaynak

26

1. Ana soruya cevap

Komut dosyası $(window).height()iyi çalışıyor (kaydırma yüksekliğine sahip belgeyi değil, görünümün yüksekliğini gösteren), ancak belgenize doctype etiketini doğru bir şekilde koymanız gerekir, örneğin bu dokümanlar:

HTML 5 için:

<!DOCTYPE html>

Geçici HTML4 için:

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

Muhtemelen bazı tarayıcılar tarafından varsayılan belge türü $(window).height(), tarayıcının yüksekliğini değil belgenin yüksekliğini alır. Doctype spesifikasyonu ile tatmin edici bir şekilde çözüldü ve eminim ki pepseler "kaydırma taşmasını gizli ve sonra geri değiştirmek" ten kaçınacağından eminim. t Gelecekteki programcıların kullanımı için kod üzerinde belgelemek.

2. İLAVE bir ipucu, bir kenara not edin: Ayrıca, bir komut dosyası kullanıyorsanız, programcıların kütüphanelerinizi kullanmasına yardımcı olmak için testler icat edebilirsiniz, bir çift icat etmeme izin verin:

~~$ (belge) .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");
      }

~~});~~

DÜZENLEME: bölüm 2 hakkında, "EK bir ipucu, bir kenara not": @Machiel, dünkü yorumunda (2014-09-04), tamamen haklıydı: $ kontrol Jquery hazır olay içinde olamaz, çünkü işaret ettiği gibi, $ 'ın zaten tanımlanmış olduğunu varsayıyoruz. BUNU GÖNDERMEK İÇİN TEŞEKKÜRLER ve lütfen komut dosyalarınızda kullandıysanız geri kalan okuyucularınızın bunu düzeltin. Benim önerim: kütüphanelerinize kütüphaneyi başlatan bir "install_script ()" fonksiyonu koymak (ready () bildirimi ve böyle "install_script ()" fonksiyonunun BAŞLANGISI dahil olmak üzere böyle bir init fonksiyonunun içine $ herhangi bir referans koymak) , $ öğesinin tanımlanıp tanımlanmadığını kontrol edin, ancak her şeyi JQuery'den bağımsız yapın, böylece JQuery henüz tanımlanmadığında kitaplığınız "kendini tanılayabilir". Bu yöntemi bir CDN'den getiren bir JQuery otomatik oluşturma zorlamak yerine tercih ederim. Bunlar diğer programcılara yardım etmek için küçük notlar. Kütüphane yapan insanların potansiyel programcının hatalarına verilen geri bildirimlerde daha zengin olması gerektiğini düşünüyorum. Örneğin, Google Apis'in hata mesajlarını anlamak için bir kenara el kitabına ihtiyacı vardır. Bu, bir el kitabında veya teknik özelliklerde arama yapmanıza gerek olmayan bazı küçük hatalar için harici belgelere ihtiyaç duymanız saçmadır. Kütüphane KENDİ BELGELİ olmalıdır. Bundan altı ay sonra bile yapabileceğim hatalara dikkat ederek kod yazıyorum ve hala temiz ve tekrar etmeyen bir kod olmaya çalışıyor, gelecekteki geliştirici hatalarını önceden yazmış. Kütüphane yapan insanların potansiyel programcının hatalarına verilen geri bildirimlerde daha zengin olması gerektiğini düşünüyorum. Örneğin, Google Apis'in hata mesajlarını anlamak için bir kenara el kitabına ihtiyacı vardır. Bu, bir el kitabında veya teknik özelliklerde arama yapmanıza gerek olmayan bazı küçük hatalar için harici belgelere ihtiyaç duymanız saçmadır. Kütüphane KENDİ BELGELİ olmalıdır. Bundan altı ay sonra bile yapabileceğim hatalara dikkat ederek kod yazıyorum ve hala temiz ve tekrar etmeyen bir kod olmaya çalışıyor, gelecekteki geliştirici hatalarını önceden yazmış. Kütüphane yapan insanların potansiyel programcının hatalarına verilen geri bildirimlerde daha zengin olması gerektiğini düşünüyorum. Örneğin, Google Apis'in hata mesajlarını anlamak için bir kenara el kitabına ihtiyacı vardır. Bu, bir el kitabında veya teknik özelliklerde arama yapmanıza gerek olmayan bazı küçük hatalar için harici belgelere ihtiyaç duymanız saçmadır. Kütüphane KENDİ BELGELİ olmalıdır. Bundan altı ay sonra bile yapabileceğim hatalara dikkat ederek kod yazıyorum ve hala temiz ve tekrar etmeyen bir kod olmaya çalışıyor, gelecekteki geliştirici hatalarını önceden yazmış. t Bir kılavuzu veya teknik özellikleri aramanıza gerek yoktur. Kütüphane KENDİ BELGELİ olmalıdır. Bundan altı ay sonra bile yapabileceğim hatalara dikkat ederek kod yazıyorum ve hala temiz ve tekrar etmeyen bir kod olmaya çalışıyor, gelecekteki geliştirici hatalarını önceden yazmış. t Bir kılavuzu veya teknik özellikleri aramanıza gerek yoktur. Kütüphane KENDİ BELGELİ olmalıdır. Bundan altı ay sonra bile yapabileceğim hatalara dikkat ederek kod yazıyorum ve hala temiz ve tekrar etmeyen bir kod olmaya çalışıyor, gelecekteki geliştirici hatalarını önceden yazmış.

— David L
kaynak

2

Gönderinizi okumak çok zor. Herkes gibi StackExchange Markdown'a alışmak için lütfen yayınınızı tekrar yapın . Orada Stack Exchange siteleri TinyMCE kullanmayın bir nedeni , ama onunla bir yakınma varsa, yer almak Meta .

— Volomike

Aramak için $zaten kullandıktan sonra kullanılabilirliğini kontrol etmeniz biraz garip . JQuery'nin kullanılabilir olup olmadığını kontrol etmek iyidir, ancak bu noktada zaten çok geç. $$(document).ready(function() { } );

— Machiel

@Machiel, sen tamamen haklısın. Neyse ki senaryolarımı kontrol etmeye gittim ve hazır etkinliği kullanmıyorlar. Evet, teşekkürler, bunu söylediğin zaman kendimi aptal hissettim, ama neyse ki sadece komut dosyalarında kontrolün "install_this_script ()" adlı bir fonksiyonun içinde olduğunu kontrol ettim ve bu kurulumda kütüphanenin init fonksiyonunu çağırıyorum, ama Bundan önce, $ nesne tanımlanmış olup olmadığını (OUTSIDE JQUERY) kontrol ediyorum. HER ZAMAN TEŞEKKÜRLER kardeşim, beni gerçekten korkuttun! Korkarım bu yazı çok uzun sürdü, umarım bu hata diğer okuyuculara çok fazla zarar vermez. Gönderiyi düzelttim.

— David L

Bu gerçek cevap olmalı! Teşekkürler!

— Justin

6

Görünüm penceresinin yeniden boyutlandırılıp boyutlandırılmadığını algılamak için $ (window) .resize () kullanabilirsiniz.

jQuery, bir kaydırma çubuğu olduğunda vizörün [1] doğru genişliğini ve yüksekliğini sürekli olarak tespit etmek için herhangi bir işleve sahip değildir.

Modernizr kütüphanesini ve özellikle javascript için medya sorgularını açan mq işlevini kullanan bir çözüm buldum.

İşte benim çözümüm:

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

Cevabım muhtemelen bir iframe'i her iki tarafta bir kenar boşluğu ile% 100 görünüm alanı genişliğine yeniden boyutlandırmaya yardımcı olmayacak, ancak umarım javascript görünüm alanı genişliği ve yükseklik hesaplamasının tarayıcı tutarsızlığıyla sinirli web geliştiricileri için teselli sağlayacaktır.

Belki bu iframe ile ilgili olarak yardımcı olabilir:

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

[1] $ (window) .width () ve $ (window) .height () yöntemini kullanarak bazı tarayıcılarda doğru, diğerlerinde yanlış bir sayı elde edebilirsiniz. Bu tarayıcılarda doğru genişlik ve yüksekliği elde etmek için window.innerWidth ve window.innerHeight'ı kullanmayı deneyebilirsiniz, ancak kullanıcı aracısı koklamasına bağlı olacağı için bu yönteme karşı tavsiye ederim.

Genellikle farklı tarayıcılar, kaydırma çubuğunu pencere genişliği ve yüksekliğinin bir parçası olarak dahil edip etmemeleri konusunda tutarsızdır.

Not: Hem $ (window) .width () hem de window.innerWidth, aynı tarayıcıyı kullanan işletim sistemleri arasında değişiklik gösterir. Bkz. Https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238

— forsvunnet
kaynak

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
kaynak

$ (Window) .height () öğesi size görünüm penceresi boyutunu vermeyecektir, bu da size tüm pencerenin boyutunu verecektir; bu da belgenin daha da büyük olabilmesine rağmen genellikle belgenin tamamının boyutudur.

— AnuRaj

genişlik için harika!

— Marc

2

Yük ve yeniden boyutlandırmada görünüm alanının boyutunu almak için (SimaWB yanıtına dayalı olarak):

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

getViewport();

$(window).resize(function() {
    getViewport()
});

— SandroMarques
kaynak

1

CSS3 görünüm alanı birimlerinin (vh, vw) iOS'ta iyi oynatılamayacağını lütfen unutmayın. Sayfayı kaydırdığınızda, görünüm alanı boyutu bir şekilde yeniden hesaplanır ve görünüm alanı birimleri kullanan öğe boyutunuz da artar. Yani, aslında bazı javascript gereklidir.

— DAH
kaynak