如何使用jQuery确定浏览器视口的大小,并在调整页面大小后重新检测到它?我需要在该空间中放入一个IFRAME大小(每个边距都略有间隔)。
对于那些不知道的人,浏览器视口不是文档/页面的大小。它是滚动前窗口的可见大小。
如何使用jQuery确定浏览器视口的大小,并在调整页面大小后重新检测到它?我需要在该空间中放入一个IFRAME大小(每个边距都略有间隔)。
对于那些不知道的人,浏览器视口不是文档/页面的大小。它是滚动前窗口的可见大小。
Answers:
获取视口的宽度和高度:
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
调整页面大小的事件:
$(window).resize(function() {
});
DOCTYPE
声明,例如<!DOCTYPE html>
。
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">
某些浏览器假定的默认文档类型可能是这样的, $(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需要一本备用手册来理解错误消息。这是荒谬的,需要外部文档来解决一些小错误,这些小错误不需要您去搜索手册或规范。该库必须是自存档的。我编写代码甚至是为了照顾甚至六个月后可能会犯的错误,而且它仍然试图成为干净且不重复的代码,已经写成可以防止将来的开发者错误。不需要您去搜索手册或规格。该库必须是自存档的。我编写代码甚至是为了照顾甚至六个月后可能会犯的错误,而且它仍然试图成为干净且不重复的代码,已经写成可以防止将来的开发者错误。不需要您去搜索手册或规格。该库必须是自存档的。我编写代码甚至是为了照顾甚至六个月后可能会犯的错误,而且它仍然试图成为干净且不重复的代码,已经写成可以防止将来的开发者错误。
$
在您已经使用过$
调用之后,检查可用性是否有些奇怪$(document).ready(function() { } );
。如果您检查jQuery是否可用,那将是很好的选择,但现在已经为时已晚。
您可以使用$(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);
});