如何通过JavaScript设置PHP变量以隐藏特定视口宽度的图像

<div id="imageContainer">
  <img src="image.jpg" alt="Image">
</div>

var viewportWidth = window.innerWidth || document.documentElement.clientWidth;

var xhr = new XMLHttpRequest();
xhr.open("POST", "set_variable.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("viewportWidth=" + viewportWidth);

<?php
if(isset($_POST['viewportWidth'])){
  $viewportWidth = $_POST['viewportWidth'];
  
  // 根据视口宽度设置PHP变量
  if($viewportWidth < 768){
    $hideImage = true;
  }else{
    $hideImage = false;
  }
  
  // 将PHP变量存储在会话中，以便在其他页面中使用
  session_start();
  $_SESSION['hideImage'] = $hideImage;
}
?>

<?php
session_start();
if(isset($_SESSION['hideImage']) && $_SESSION['hideImage']){
  echo '<style>#imageContainer { display: none; }</style>';
}
?>