WordPress 响应主题设计：桌面/平板电脑上的幻灯片以及使用相同模板的手机上的静态照片？

问题描述

我正在使用自己的 WP 主题构建我的第一个响应式 WP 站点。主要模板是部分流体，部分固定。这使我只能创建 3 个”versions”，一个桌面，平板电脑和移动版本。所有更改均由于媒体查询而发生。 (桌面尺寸为 768 至 1200 像素，平板电脑为 530 到 767，移动设备为 300 到 529)

主页 (拥有自己的模板) 将显示幻灯片。幻灯片声称响应 (我还没有设置)，我预计它通过平板电脑的大小。但是当我到达移动大小时，我只想要一张静态照片。

我不想仅仅使用”display:none” 进行幻灯片放映，因为它仍然会占用手机的空间/电力。我想保留所有的版本在相同的模板，所以我想我将需要一些 php 或 javascript 来实现这一点。 (除非有其他方式，我会很高兴听到！)

任何人都可以帮助代码吗？我在 CSS 中有一个幻灯片 div：

#slideshow {
height: 296px;
margin: 20px 20px 10px 20px;
padding: 0;
background-color: #f00;
}/*by not setting a width the sshow box fills the space minus the margins*/

并且在模板中，幻灯片短代码或模板代码将在打开和关闭幻灯片 div 标签之间。但是我也想在那里放置一个照片到手机版。所以我想我需要一些「如果 529px 或更多，获得幻灯片; 如果少，得到照片」对吗？我不是 php 或 javascript 程序员，我很好的剪切和粘贴！

该网站在 http://66.147.244.110/~rdbikeco/可以看到 – 我们现在正在添加页面内容的阶段，博客需要注意，侧边栏需要工作等。但是，shell 页面正在加载，内容正在加载。

帮助非常感谢！

最佳解决方案

不要使用服务器端浏览器嗅探。它会失败：

The question here is how can you reliably detect mobile browsers in order to redirect them? The fact is: you can』t. Most people attempt to do this with browser sniffing—checking the User Agent string that the browser sends to the server with every request. However, these are easily spoofed in browsers, so they can』t be relied upon, and they don』t tell the truth, anyways. 「Browser sniffing」 has a justifiably bad reputation, so is often renamed 「device detection」 these days, but it』s the same flawed concept.

$is_iphone 变量 @kaiser 推荐是有缺陷的 (对不起，凯撒，希望你不介意:)) 。

让浏览器决定，使用真正可用的空间。首先在文档头中添加一个 meta 元素，以确保可见宽度与设备宽度匹配：

<head>
    <!-- other stuff -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,target-densitydpi=device-dpi">
</head>

然后设置滑块内容的目标：

<div id="dynamicimgaes">
    <img id="slideshow" src="path/to/default/image" alt="" />
</div>

在 JavaScript 中，现在可以使用设备宽度来决定是否显示滑块。

这是一个 jQuery 示例 (未经测试，随时可以编辑，直到它工作)：

<script type='text/javascript'>
if ( 480 < jQuery( window ).width() )
{
    jQuery(document).ready( function()
    {
        jQuery.get(
            'http://path/to/slider/content',
            function( data )
            {
                jQuery( "#slideshow" ).replaceWith( data );
            }
        );
    });
}
</script>

参考文献

Responsive Theme Design: how have slideshow on desktops/tablets and static photo on mobile using same template?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

WordPress 响应主题设计：桌面/平板电脑上的幻灯片以及使用相同模板的手机上的静态照片？