首先，如果有更好的方法，我愿意接受建议。
我可以更改前端，但不能更改后端（CMS 代码）。网站的每个子页面都有一个加载在页面顶部的图像，就在导航栏下方（在 header.php 之后）。我可以在 CMS 中选择图像，它的路径存储在数据库中。
因此，假设图像（1920x1080）被命名为“image.jpg”。当图像加载到移动设备上时（真的是当屏幕宽度小于或等于 640 像素 - 我选择了数字，也许使用 480 像素或 360 像素会更好）。
我目前在做什么
HTML
<body>
...
<?php
...
while ($row = mysqli_fetch_array($result)) {
if (isset($_SESSION['screen_width']) && ($_SESSION['screen_width'] <= 640)) {
// change "path/to/image.jpg" to "path/to/image.mob.jpg"
$row['image'] = substr($row['image'], 0, -4).".mob".substr($row['image'], -4);
} ?>
<div class="image" style="background-image: url('<?=$row['image']?>)"> ... </div>
...
<?php
if (isset($_SESSION['screen_width']) AND isset($_SESSION['screen_height'])) {
// echo 'Screen width: ' . $_SESSION['screen_width'];
} else if (isset($_REQUEST['width'])) {
$_SESSION['screen_width'] = $_REQUEST['width'];
header('Location: ' . $_SERVER['PHP_SELF']);
} else {
echo '<script type="text/javascript">window.location.href = window.location.href+"?width="+screen.width;</script>';
}
// echo $_SESSION['screen_width'] = "<script>document.write(screen.width)</script>"; ?>
</body>
这有点简化，但基本上发生的事情就是这样。第一次访问时，没有存储宽度，$_SESSION因此它加载了大的“image.jpg”。但在实际加载之前，它已经执行了 javascript 并重新加载$_GET了 URL 中宽度可变的页面。除了第一次访问之外的所有访问都已经在会话中存储了宽度，因此 URL 总是再次对 SEO 友好。如果屏幕宽度最多为 640 像素，图像路径也会被重命名，并且网站会加载“image.mob.jpg”。
这完美地工作。
问题是我需要始终让所有网站 URL 对 SEO 友好，因此不允许使用“ https://seo-friendly.url?=width= {screen.width}”，即使只有一次。
正如您在最后评论的行中看到的那样，我也尝试过使用echo $_SESSION['screen_width'] = "<script>document.write(screen.width)</script>";，但显然它不适用于第一页加载，因为所有 PHP 都在任何 JavaScript 之前执行。
我如何用 AJAX 解决这个问题（我需要整个代码，因为我很笨，无法理解其他人的互联网答案叹息）或者是否有更好的选择。
杨魅力
三国纷争