0

我正在尝试根据通过读取 window.innerWidth 的 cookie 确定的 php 变量设置要更改的图像的路径（在文件头部设置）

问题是浏览器在第一次渲染时没有正确读取 cookie，我必须刷新浏览器 x 2 才能获得正确的图像。

有人能指出我正确的方向吗？php 中是否有一种方法可以让 cookie 始终在第一次被正确读取 - 目前看起来它正在被缓存，或者类似的东西。

谢谢

这里的例子：http: //markaprice.co.uk/2012dev/r-img-set/image-test-ht.php

html如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>document.cookie = "device_dimensions=" + window.innerWidth;</script>


<link rel="stylesheet" type="text/css" href="css/img-styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>Untitled Document</title>

</head>
<body>
<?php require_once('deliver-images.php'); ?>

<img class="ri" src="<?php echo $imgPath ?>the-landscape.jpg" alt="the landscape">

<img class="ri" src="<?php echo $imgPath ?>the-landscape-b.jpg" alt="the landscape">

php 脚本（deliver-images.php）如下：

<?php


$device_width = 0;
$imgPath='';

// Read the device viewport dimensions
    if (isset($_COOKIE['device_dimensions'])) {

        $device_width = $_COOKIE['device_dimensions'];
        echo($device_width);
    }

if ($device_width > 0) {

            // Low resolution image
      if ($device_width <= 480) {

        $imgPath = 'images/mobile/';

      } 

      // Medium resolution image
      else if ($device_width <= 1024 && $device_width > 480) {

        $imgPath = 'images/tablet/';
      }

      else {

        $imgPath = 'images/desktop/';  
      }
    } else {

    $imgPath = 'images/desktop/';   
}





?>
4

1 回答 1

0

您的以下行设置了 cookie。

<script>document.cookie = "device_dimensions=" + window.innerWidth;</script>

这个 php 文件是您检查此 cookie 以决定您将从哪个文件夹提供图像的位置。

<?php require_once('deliver-images.php'); ?>

查看您的代码，您似乎是这样想的。

  1. 首先你的脚本标签运行并设置了cookie
  2. 然后你的 PHP 使用上一步中设置的 cookie 进行一些处理

但这是错误的 PHP 首先在服务器上处理，然后将该页面发送到浏览器并运行您的脚本。

结论：当您第一次打开页面时，您的 cookie 没有设置，因为脚本将在 php 代码运行后运行。

于 2012-05-25T10:58:49.810 回答