如何尽快将屏幕宽度（或 windows 宽度）设置为 PHP？

Question

首先，如果有更好的方法，我愿意接受建议。

我可以更改前端，但不能更改后端（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 并重新加载了 URL 中具有$_GET可变宽度的页面。 除第一次访问外的所有访问都已将宽度存储在 session 中，因此 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 解决这个问题（我需要整个代码，因为我很笨，无法理解其他人的互联网答案叹息）或者是否有更好的选择。

先感谢您。

Answer 1

正如@Paflow 指出的那样，在 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!">

MDN 响应式图片

Answer 2

虽然@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已被弃用，只允许在<body>内使用<style> 。

不是最花哨的方式，但它的工作原理！

如何尽快将屏幕宽度（或 windows 宽度）设置为 PHP？

问题描述

2 个解决方案

解决方案1
2 2019-09-24 08:11:28

解决方案2
0 已采纳 2019-09-24 08:50:55

如何尽快将屏幕宽度（或 windows 宽度）设置为 PHP？

问题描述

2 个解决方案

解决方案1 2 2019-09-24 08:11:28

解决方案2 0 已采纳 2019-09-24 08:50:55

解决方案1
2 2019-09-24 08:11:28

解决方案2
0 已采纳 2019-09-24 08:50:55