PHP中的图像旋转，带有基于设备显示大小的链接

Question

我正在寻找基于设备的图像旋转。例如，如果网站在桌面上加载，它应该加载 desktop.png，如果相同的网站在移动设备上加载，它应该加载 mobile.png

我的 JS 代码：

<script type="text/javascript">
    if (screen.width <= 720) {
     document.write('<a href="http://example.com/mobile"><img src="mobile.png"></a>');
    } else {
     document.write('<a href="http://example.com/desktop"><img src="desktop.png"></a>');
    }
</script>

我已将 JS 代码重写为 PHP 代码：

if (get($screen, "width") <= 720.0) {
  echo "<a href=\"http://example.com/mobile\"><img src=\"mobile.png\"></a>";
} else {
  echo "<a href=\"http://example.com/desktop\"><img src=\"desktop.png\"></a>";
}

上述 JavaScript 代码运行良好，但我的 PHP 代码出错。谁能帮忙解决一下？

Answer 1

答案是否定的。您无法使用 php 在 web 上实现图像旋转，因为 php 是一种服务器端语言，并且要在 web 上创建任何 效果，您需要 css（简单效果）或 javascript（复杂效果）

使用服务器端渲染 (php)，您只能使用一种模板或绑定变量在服务器中创建所需的 javascript 标记作为字符串并将其返回给 Web 浏览器。 至少在这一代，你不能在服务器端创建或不存在一种可以替代经典javascript的技术或框架。

ssr : 服务器端渲染

PHP 是一种用于开发后端程序的服务器语言。从 Web 开发的早期开始，php 和其他语言（java、python、c#、ruby 等）已被用于创建网页。在技​​术上，服务器端负责创建 html，所以当用户进入 acme.com 时，服务器端会创建 html 并将其返回，并准备好显示的内容。

在这些框架中是经典的使用库，它们能够使用模板创建 html，就好像它是一个简单的字符串一样。

<? if ($condition): ?>
  <p>Content</p>
<? elseif ($other_condition): ?>
  <img src="other-content.png" alt=""/>
<? else: ?>
  <script type="text/javascript">
     document.write('<a><img src="$SOME_VAR.png"></a>');
  </script>
<? endif; ?>

如您所见，在服务器 (php) 中，您只需将 html 或 javascript 创建为简单的字符串。最终，这些内容会被网页浏览器评估，而网页浏览器只会理解html、javascript、css、字体等。浏览器不会不在乎是谁在服务器中创建了 html/javascript（java、c#、php、python、ruby 等）。

csr : 客户端渲染

基本上和ssr相反。内容是在广告客户端创建的，更具体地说是网络浏览器。所以当用户进入 acme.com 时，服务器只返回一个最小的 index.html 和一个大的 javascript 文件。此 javascript 文件负责使用 javascript 和 ajax 呈现或创建整个网页。

在这一层，技术（javascript）能够访问一些设备信息或资源，如屏幕尺寸、摄像头等。您无法在服务器端获取这些值（php、 java、c#等）

这里有更多细节

• https://stackoverflow.com/a/69511019/3957754

Answer 2

PHP 对客户端的屏幕大小一无所知。最好的解决方案是基于屏幕大小更改内容的 JavaScript。

使用<picture> 元素，您可以使用媒体查询根据屏幕尺寸确定要显示的图像。

在下面的示例中，mobile.png 将针对宽度不超过 720 像素的屏幕显示，desktop.png 图像将针对其上方的所有尺寸显示。

<a id="dynamic-link" href="">
  <picture>
    <source srcset="mobile.png" media="(max-width: 720px)">
    <img src="desktop.png" alt=""/>
  </picture>
</a>

锚标签没有这种功能。但是我们可以使用window.matchMedia() 来添加它，并在屏幕尺寸发生变化时使用相同的媒体查询来更改锚点的href 值。

// Select the link element.
const dynamicLink = document.getElementById('dynamic-link');

// If the link exists on the page, continue.
if (dynamicLink !== null) {
  // Observe a media query.
  const mediaQuery = window.matchMedia('(max-width: 720px)');
  mediaQuery.addEventListener('change', event => {
    // If the screen in 720px or less.
    if (event.matches) {
      dynamicLink.href = 'http://example.com/mobile';
    // All sizes above.
    } else {
      dynamicLink.href = 'http://example.com/desktop';
    }
  });
}