Onload JavaScript 有时无法执行

Question

我的JavaScript遇到了一个问题。有时，代码根本不执行，我无法将其与特定的事情联系起来，比如抛出错误并停止代码或类似的事情。我打算做的是根据设备的分辨率更改图片(徽标(。

	function logo_change() {
		if ( document.body.clientWidth < 390 ) {
			document.getElementById('logo').style.display = 'none';
			document.getElementById('logo-m').style.display = 'block';
		}
		else {
			document.getElementById('logo-m').style.display = 'none';
			document.getElementById('logo').style.display = 'block';
		}
	}
	window.onresize = function() {
		logo_change();
	};
	window.onload  = function() {
		logo_change();
	};

#logo {
max-width: 20%;
min-width: 185px;
float: left; 
margin-top: 17px;
}
#logo-m {
width: 50px;
float: left;
margin-top: 17px;
display: none;
}

<a id='logo-l' class="logo-l" href="index.php">
	<img src="https://d1afx9quaogywf.cloudfront.net/sites/default/files/Logos/facebook-logo_0.png" id='logo' class="logo" name="logo" height="60"></img>
	<img src="https://www.ricksdailytips.com/wp-content/uploads/2016/08/f.png" id='logo-m' class="logo-m" height="50"></img>
</a>

我试过用媒体查询做基本上相同的事情(有显示块，没有(，但链接会崩溃等等。

此外，如果我调整页面大小，代码就会执行，徽标也会更改。因此，i事物是window.onload事物。

感谢您的回复。

Answer 1

要使用CSS媒体查询：

#logo, #logo-m {
display: none;
/* other common properties */
}
@media screen and (max-width: 389px) {
#logo-m { display: block; }
}
@media screen and (min-width: 390px) {
#logo { display: block; }
}