响应式主题设计：桌面/平板电脑上的幻灯片放映和移动设备上的静态照片如何使用相同的模板？

时间：2012-04-25 作者：PVA

我正在用我自己的自定义WP主题构建我的第一个响应性WP站点。主要模板是零件流体、零件固定。这使我只能创建3个“版本”，即台式机、平板电脑和移动版。所有更改都是由于媒体查询而发生的。（台式机尺寸为768至1200像素，平板电脑尺寸为530至767像素，移动设备尺寸为300至529像素。）

主页（有自己的模板）将显示幻灯片。这张幻灯片声称反应灵敏（我还没有设置好），我期待它能适应平板电脑的大小。但当我达到手机尺寸时，我只想拍一张静态照片。

我不想只在幻灯片中使用“显示：无”，因为它仍然会占用手机的空间/电源。我确实希望所有版本都保持在相同的模板上，所以我想我需要一些php或javascript来实现这一点。（除非有其他方法，我很高兴听到！）

有人能帮我写代码吗？我在CSS中有一个幻灯片分区：

#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页面已经启动，内容正在加载。

非常感谢您的帮助！

2 个回复
最合适的回答,由SO网友:fuxia 整理而成

不要使用服务器端浏览器嗅探。It will fail:

这里的问题是，如何可靠地检测移动浏览器以重定向它们？事实是：你不能。大多数人都试图通过浏览器嗅探来做到这一点，即检查浏览器随每个请求发送给服务器的用户代理字符串。然而，这些在浏览器中很容易被欺骗，因此它们不可靠，而且无论如何，它们也不会说出真相。“浏览器嗅探”有着无可非议的坏名声，因此最近经常被改名为“设备检测”，但这是同样有缺陷的概念。

这个$is_iphone @kaiser建议的变量有缺陷（抱歉，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>

SO网友:kaiser

这个答案只是出于历史原因（并且因为@toschos答案中提到了它）。tl;dr 不要依赖下面你能读到的东西。不要使用wp_is_mobile().

具有核心全局的交换机：

if ( $is_iphone ) 
    // do stuff for mobile
else
    // do stuff for non-mobile.
基本上，这是用户代理嗅探的简化版本

结束
标签： responsive   小码农  

相关推荐