首先，如果有更好的方法，我愿意接受建议。我可以更改前端，但不能更改后端（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 解决这个问题（我需要整个代码，因为我很笨，无法理解其他人的互联网答案叹息）或者是否有更好的选择。
2 回答
杨魅力
TA贡献1811条经验 获得超6个赞
在 PHP 中执行此操作是不必要的麻烦，而不是推荐或适合的方式。
在 HTTP GET 请求上获取视口几乎是不可能的。有一些 hacky 方法可以实现这一点，但它们需要通过 JS 进行某种额外的请求。
您最好的选择是使用HTML。
srcset 将为您提供保障！
我会建议类似：
<img srcset="/image.jpg 640w" sizes="100vw" src="/image.mob.jpg" alt="Alt attribute. Fill me!">
默认情况下，这将加载您的image.mob.jpg图像，然后将其作为高性能基础图像提供，如果您的浏览器支持 srcset 并且视口大于640px，您将获得/image.mob.jpg图像。
假设您想要更多尺寸，那么您所要做的就是将它们添加到 srcset 属性并指定不同的尺寸：
<img srcset="/image-huge.jpg 1990w, /image-big.jpg 1440w, /image.jpg 640w" sizes="100vw" src="/image.mob.jpg" alt="Alt attribute. Fill me!">
三国纷争
TA贡献1804条经验 获得超7个赞
虽然@avcajaraville 的答案通常非常有用，但@Paflow 的评论帮助我找到了解决方案。不涉及 JavaScript。
HTML
<?php
...
while ($row = mysqli_fetch_array($result)) {
$mobile_image_path = substr($row['image'], 0, -4).".mob".substr($row['image'], -4);
$image_id = "banner-image-" . $row['id_banner']; ?>
<style>
#<?=$image_id?> {
background-image: url('<?=$row['image']?>');
}
@media (max-width: 640px) {
#<?=$image_id?> {
background-image: url('<?=$mobile_image_path?>');
}
}
</style>
<div class="image" id="<?=$image_id?>"> ... </div>
我第一次使用<style type="text/css" scoped>，但后来我阅读scoped已弃用，只允许<style>在内部使用。<body>
不是最花哨的方式，但它的工作原理！
- 2 回答
- 0 关注
- 196 浏览
添加回答
举报
0/150
提交
取消