使用jQuery获取视口大小

2020/10/31 23:51 · jquery ·  · 0评论

如何使用jQuery确定浏览器视口的大小,并在调整页面大小后重新检测到它?我需要在该空间中放入一个IFRAME大小(每个边距都略有间隔)。

对于那些不知道的人,浏览器视口不是文档/页面的大小。它是滚动前窗口的可见大小。

获取视口的宽度和高度:

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

调整页面大小的事件:

$(window).resize(function() {

});

您可以尝试视口单位(CSS3):

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

浏览器支持

1.回答主要问题

该脚本运行$(window).height()良好(显示视口的高度,而不显示滚动高度的文档),但它需要您在文档中正确放置doctype标记,例如以下doctype:

对于HTML 5:

<!DOCTYPE html>

对于过渡HTML4:

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

某些浏览器假定的默认doctype可能是这样,它$(window).height()采用文档的高度而不是浏览器的高度。使用doctype规范,可以令人满意地解决该问题,并且我敢肯定,您会避免出现“将滚动溢出更改为隐藏然后再返回”的情况,这很抱歉,这是一个肮脏的把戏,特别是如果您不这样做,将其记录在代码上,以备将来程序员使用。

2.另外,请注意:
另外,如果您正在编写脚本,则可以发明一些测试以帮助程序员使用您的库,让我发明一些:

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

});


编辑:关于第2部分,“其他提示,请留在一边”:@Machiel在昨天的评论(2014-09-04)中完全正确:$的检查不能放在Jquery的ready事件中,因为正如他指出的那样,我们假设$已经定义。谢谢您指出这一点,如果您在脚本中使用过,请其他读者更正。我的建议是:在您的库中放置一个“ install_script()”函数,该函数初始化库(将对$的任何引用放入此类init函数中,包括ready()的声明),并在该“ install_script()”函数的开始处,请检查$是否已定义,但要使所有内容都独立于JQuery,以便在尚未定义JQuery时库可以“自我诊断”。我更喜欢这种方法,而不是强行自动创建从CDN带走的JQuery。除了帮助其他程序员之外,这些笔记很少。我认为,制作库的人必须对潜在的程序员错误提供更丰富的反馈。例如,Google Apis需要一本备用手册来理解错误消息。这是荒谬的,需要外部文档来解决一些小错误,这些小错误不需要您去搜索手册或规范。该库必须是自存档的。我编写代码甚至是为了照顾甚至六个月后可能会犯的错误,而且它仍然试图成为干净且不重复的代码,已经写成可以防止将来的开发者错误。我认为,制作库的人必须对潜在的程序员错误提供更丰富的反馈。例如,Google Apis需要一本备用手册来理解错误消息。这是荒谬的,需要外部文档来解决一些小错误,这些小错误不需要您去搜索手册或规范。该库必须是自存档的。我编写代码甚至是为了照顾甚至六个月后可能会犯的错误,而且它仍然试图成为干净且不重复的代码,已经写成可以防止将来的开发者错误。我认为,制作库的人必须对潜在的程序员错误提供更丰富的反馈。例如,Google Apis需要一本备用手册来理解错误消息。荒谬的是,需要外部文档来解决一些小错误,这些小错误不需要您去搜索手册或规范。该库必须是自文件的。我编写代码甚至是为了照顾甚至六个月后可能会犯的错误,而且它仍然试图成为干净且不重复的代码,已经写成可以防止将来的开发者错误。不需要您去搜索手册或规格。该库必须是自文件的。我编写代码甚至是为了照顾甚至六个月后可能会犯的错误,而且它仍然试图成为干净且不重复的代码,已经写成可以防止将来的开发者错误。不需要您去搜索手册或规格。该库必须是自文件的。我编写代码甚至是为了照顾甚至六个月后可能会犯的错误,而且它仍然试图成为干净且不重复的代码,已经写成可以防止将来的开发者错误。

您可以使用$(window).resize()来检测视口是否已调整大小。

当存在滚动条时,jQuery没有任何功能可以一致地正确检测视口[1]的宽度和高度。

我找到了使用Modernizr库,特别是mq函数的解决方案,该函数打开javascript的媒体查询。

这是我的解决方案:

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

我的回答可能不会帮助将iframe的大小调整为100%视口宽度,并在每侧留有边距,但是我希望它能为因浏览器对JavaScript视口宽度和高度计算不连贯而感到沮丧的Web开发人员提供安慰。

也许这可以对iframe有所帮助:

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

[1]您可以使用$(window).width()和$(window).height()获得一个数字,该数字在某些浏览器中将是正确的,但在其他浏览器中将是错误的。在这些浏览器中,您可以尝试使用window.innerWidth和window.innerHeight来获取正确的宽度和高度,但是我建议您反对这种方法,因为它依赖于用户代理嗅探。

通常,不同的浏览器对于它们是否将滚动条作为窗口宽度和高度的一部分不一致。

注意:$(window).width()和window.innerWidth在使用同一浏览器的操作系统之间都不同。参见:https : //github.com/eddiemachado/bones/issues/468#issuecomment-23626238

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

要在加载调整大小时获得视口的大小(基于SimaWB响应):

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

getViewport();

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

请注意,CSS3视口单位(vh,vw)在iOS上无法正常播放。滚动页面时,将以某种方式重新计算视口大小,并且使用视口单位的元素的大小也会增加。因此,实际上需要一些JavaScript。

本文地址:http://jquery.askforanswer.com/shiyongjqueryhuoqushikoudaxiao.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!