我试图在我的网站上显示不同的图像，当它在电脑和手机上看到时，但由于某些原因它只是不工作
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="icon" href="favicon.ico" />
<style>
.image {
display: block;
margin-left: auto;
margin-right: auto;
width: 95%;
}
body {
background-color: rgb(30, 30, 30);
}
</style>
<script>
if (screen.width < screen.height) {
document.getElementById("change").src = "phone.png";
}
</script>
</head>
<body>
<div class="image">
<img id="change" src="computer.png" class="image">
</div>
</body>
</html>
我很确定我做错了什么是极其愚蠢的，但我就是找不到它，如果你能帮助我，我将非常感激
你也可以用css来做。
.d-large {
display: block;
}
.d-small{
display:none;
}
@media only screen and (max-width: 600px) {
.d-large {
display: none;
}
.d-small{
display:block;
}
}
<div class="small">
<img id="img1" src="computer.png" class="image d-large">
<img id="img2" src="phone.png" class="image d-small">
</div>
是的，Martin说得对，这不是js最好的。
window.addEventListener('resize', function(event) {
if (window.innerWidth < window.innerHeight) {
document.getElementById("change").src = "computer.png";
}else {
document.getElementById("change").src = "phone.png";
}
}, true);
我也不觉得有什么问题。我认为，而不是使用if语句，只是使用@mediaquery和图像作为背景图像?
.image{
@media screen and (max-width: 700px) {
background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png);
}
}