Responsive design not working for some reasons

Question

I am trying to show a different image on my website when its seen on computers and on phones, but for some reasons it just doesn't work

<!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>

I am quite sure that what I did wrong is extremely stupid, but I just can't find it, if you can help me, I'd be very grateful

Answer 1

You can do it with css as well.

  .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>

Yes, Martin has right, this is not the best of with 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);

Answer 2

tbh i dont see the problem either. I think, Instead of using that if statement, just use @mediaquery and image as background image?

.image{
    @media screen and (max-width: 700px) {   
        background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png);
    }
}

Responsive design not working for some reasons

Question

2 answers

solution1
3 2021-10-25 08:28:32

solution2
1 2021-10-25 08:35:48

Responsive design not working for some reasons

Question

2 answers

solution1 3 2021-10-25 08:28:32

solution2 1 2021-10-25 08:35:48

solution1
3 2021-10-25 08:28:32

solution2
1 2021-10-25 08:35:48