如果视口大于 1024px，则使用 php 包含语义图像答案

【问题标题】：include semantic images with php if view port is larger than 1024px如果视口大于 1024px，则使用 php 包含语义图像
【发布时间】：2015-04-02 17:09:41
【问题描述】：

我一直在寻找有助于提高移动优先响应式网站性能的解决方案。

问题：

我需要为网站制作 SEO 友好的内嵌图片。我做的一件事是使用 picturefill.js 为较小的设备提供较小的图像。但是...在我从设计师那里得到的设计中，移动设备的图像较少（只有 3 个）和桌面的 9 个。这意味着，如果它们必须是内联和语义的，小型设备仍会请求其他 6 个，这对于慢速 3g 连接来说似乎很多。

那么，如果在比普通手持设备更大的屏幕上查看，是否有任何好的方法来包含图像（不是作为背景+显示：无），也许使用 php？

希望这不会被视为“黑帽”搜索引擎优化。

【问题讨论】：

标签： php html image include semantics

【解决方案1】：

最好的方法是检查发出请求的用户代理。这不是万无一失的证明，但您可以用它解决大多数用例。
来自PHP docs 的类似内容：

<?php
echo $_SERVER['HTTP_USER_AGENT'] . "\n\n";

$browser = get_browser(null, true);
print_r($browser);
?>

一旦您知道发出请求的用户代理，您就可以为该请求者提供适当的版本。

if($type_a){
//do type a stuff
}else{
//do type !a stuff 
}

一些边缘案例包括 Android 的各种屏幕尺寸。这也不是真正的“响应式”，而是解决问题的更多“mdot”方式，但坦率地说，您的设计也是如此。在我看来，真正的响应式要么依赖于基于视口的延迟加载资源，要么提供完全依赖 js、html 和 css 的相同版本来解决问题。

【讨论】：

非常感谢！因此，对于我的问题，是否有关于延迟加载或其他方法的参考，以避免在移动设备上获得更好的桌面用户体验所需的所有额外请求？
并非如此。根据定义，如果您试图避免客户端检查服务器，则需要将逻辑推送到服务器，以便客户端不必担心。通过执行上述操作，您可以创建一种方法，可以为您所服务的两种类型的客户端分支服务器端逻辑 a) 移动设备，它是配对的、优化的移动资源集和 b) 受限较少的桌面按带宽和资源。
好的 :) 非常感谢您的输入伙伴！我认为我还没有通过结构化后端提供内容的技能。将来会很好，因为我看到响应式设计在性能部分存在一些限制。