Question

尝试根据通过读取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/';   
}





?>

Answer 1

以下这一行设置了cookie。

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

这个php文件是你检查这个cookie的地方，决定你将从哪个文件夹提供图像。

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

看着你的代码，你似乎就是这么想的。

首先运行脚本标记并设置cookie
然后你的PHP使用上一步中设置的cookie进行一些进动

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

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

正确读取Cookie值的问题 - php

1 个答案: