如何尽快将屏幕宽度(或窗口宽度)转换为 PHP?

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


我可以更改前端,但不能更改后端(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 解决这个问题(我需要整个代码,因为我很笨,无法理解其他人的互联网答案叹息)或者是否有更好的选择。


潇潇雨雨
浏览 200回答 2
2回答

杨魅力

在 PHP 中执行此操作是不必要的麻烦,而不是推荐或适合的方式。在 HTTP GET 请求上获取视口几乎是不可能的。有一些 hacky 方法可以实现这一点,但它们需要通过 JS 进行某种额外的请求。您最好的选择是使用HTML。srcset&nbsp;将为您提供保障!我会建议类似:<img&nbsp;srcset="/image.jpg&nbsp;640w"&nbsp;sizes="100vw"&nbsp;src="/image.mob.jpg"&nbsp;alt="Alt&nbsp;attribute.&nbsp;Fill&nbsp;me!">默认情况下,这将加载您的image.mob.jpg图像,然后将其作为高性能基础图像提供,如果您的浏览器支持 srcset 并且视口大于640px,您将获得/image.mob.jpg图像。假设您想要更多尺寸,那么您所要做的就是将它们添加到 srcset 属性并指定不同的尺寸:<img&nbsp;srcset="/image-huge.jpg&nbsp;1990w,&nbsp;/image-big.jpg&nbsp;1440w,&nbsp;/image.jpg&nbsp;640w"&nbsp;sizes="100vw"&nbsp;src="/image.mob.jpg"&nbsp;alt="Alt&nbsp;attribute.&nbsp;Fill&nbsp;me!">MDN 响应式图片

三国纷争

虽然@avcajaraville 的答案通常非常有用,但@Paflow 的评论帮助我找到了解决方案。不涉及 JavaScript。HTML<?php&nbsp; &nbsp; ...&nbsp; &nbsp; while ($row = mysqli_fetch_array($result)) {&nbsp; &nbsp; &nbsp; &nbsp; $mobile_image_path = substr($row['image'], 0, -4).".mob".substr($row['image'], -4);&nbsp; &nbsp; &nbsp; &nbsp; $image_id = "banner-image-" . $row['id_banner']; ?><style>&nbsp; &nbsp; #<?=$image_id?> {&nbsp; &nbsp; &nbsp; &nbsp; background-image: url('<?=$row['image']?>');&nbsp; &nbsp; }&nbsp; &nbsp; @media (max-width: 640px) {&nbsp; &nbsp; &nbsp; &nbsp; #<?=$image_id?> {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image: url('<?=$mobile_image_path?>');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }</style><div class="image" id="<?=$image_id?>"> ... </div>我第一次使用<style type="text/css" scoped>,但后来我阅读scoped已弃用,只允许<style>在内部使用。<body>不是最花哨的方式,但它的工作原理!
打开App,查看更多内容
随时随地看视频慕课网APP