我正在尝试设置我的标志,以显示更大的标志用于桌面设备,而对于像智能手机这样的较小设备则使用较小的图像...
到目前为止,这是我尝试过的内容,但它无法正常工作。
有人可以帮帮我吗?我的代码有什么问题吗?
<html>
<head>
<script type="text/javascript">
function load(){
document.getElementById('logo').src = displaylogo();
}
function displaylogo(){
if ($(window).width() < 1024) {// code for small viewports
return "http://i.imgur.com/ozYV740.png"; // small logo
}
else {// code for large viewports
return "http://i.imgur.com/RMV6Af0.png"; //big logo
}
}
</script>
</head>
<body onload="load()">
<img src="http://i.imgur.com/RMV6Af0.png" id="logo" name="logo" title="The original logo is the big logo"/>
</body>
</html>
@media
相关内容。 - jdepyperewindow.innerWidth < 1024
。 - PlantTheIdea