首先，如果有更好的方法，我愿意接受建議。我可以更改前端，但不能更改后端（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 關注
- 236 瀏覽
添加回答
舉報
0/150
提交
取消