Question

正在试图根据按 php 变量修改图像的路径, 该变量通过读取 window.innerWidth 的 cookie 来确定。 InnerWidth (位于文件首端)

问题在于浏览器第一次翻譯时 Cookie 没有被正确读取, 我必须刷新浏览器 x 2 才能获得正确的图像。

有没有人指示我正确方向? php中是否有一种方法让饼干第一次被正确读取? 目前它似乎被缓存了,或类似的东西。

谢谢

这里的例子:http://marmaprice.co.uk/2012/dev/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

你下面的这条线决定了曲奇

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

此 php 文件是您检查此 cookie 以决定您要从哪个文件夹中服务图像。

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

看你的代码看起来你的想法是这样的

First your script tag run and cookie got set
And then your PHP who use that cookie set in previous step to do some precessing

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

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

友情链接