Javascript 在教程中未声明窗口大小

Question

我正在学习有关响应式网络体验的 Lynda.com 教程。我的 Javascript 大部分工作正常。从讲师看来，JS 的目标是“我们根据窗口的外部宽度确定窗口宽度”。然后我们输出该信息以及屏幕是小、中还是大(@media 断点)。

如“945 (931+14) 很大”。 My work so far与它共存。

问题是，随着窗口宽度的变化，“大”不会变为“中”，然后变为“小”。

谢谢!

如果有帮助，这里有 codepen包含所有 HTML/CSS 代码。这是 JS。

/* JavaScript Document */

var windowSize = '';
var windowWidth = 0;
var actualSize = 0;

$(document).ready(function () {
	
	checkBrowserSize();
	loadHero();

});	

function checkBrowserSize() {
	windowWidth = window.outerWidth;
	var contentWidth = $('body').width();
	var sizeDiff = windowWidth - contentWidth;
	actualSize = windowWidth - sizeDiff;
	
	if (actualSize > 800) { newWindowSize = 'large'; }
	if (actualSize <= 800 && actualSize > 500) {newWindowSize = 'medium'; }
	if (actualSize <= 500){ newWindowSize = 'small'; }
	$('h1').html(windowWidth +' ('+contentWidth+'+'+sizeDiff+')'+' is '+newWindowSize);

	
}

function loadHero() {
	
	$('#hero').load('content/hero_content_large.html');
	
}

Answer 1

您的问题是该函数仅在文档就绪时运行一次。您必须将函数绑定(bind)到 onresize 事件，以便每次触发 resize 事件时该函数都会运行(阅读有关事件处理程序的信息)

这是一个 JavaScript 示例:http://www.w3schools.com/jsref/event_onresize.asp

这是一个 jQuery 示例: http://www.w3schools.com/jquery/event_resize.asp