Answers:
像大多数其他人一样,我强烈建议使用WPTouch。但是,它比其他网站格式更多地支持博客,因此我知道它不是移动解决方案的灵丹妙药(我在WordPress和博客上都运行我的产品组合,而我的产品组合看起来像****
在WPTouch中)。
因此,我确实看了一下代码,以找到复制移动浏览器检测所需的相关部分。首先,正如Jan Fabry所提到的,是移动浏览器用户代理的列表。WPTouch包括默认列表,而且还允许您添加自定义用户代理与设置或使用名为过滤器wptouch_user_agents
:
function bnc_wptouch_get_user_agents() {
$useragents = array(
"iPhone", // Apple iPhone
"iPod", // Apple iPod touch
"Android", // 1.5+ Android
"dream", // Pre 1.5 Android
"CUPCAKE", // 1.5+ Android
"blackberry9500", // Storm
"blackberry9530", // Storm
"blackberry9520", // Storm v2
"blackberry9550", // Storm v2
"blackberry9800", // Torch
"webOS", // Palm Pre Experimental
"incognito", // Other iPhone browser
"webmate", // Other iPhone browser
"s8000", // Samsung Dolphin browser
"bada" // Samsung Dolphin browser
);
$settings = bnc_wptouch_get_settings();
if ( isset( $settings['custom-user-agents'] ) ) {
foreach( $settings['custom-user-agents'] as $agent ) {
if ( !strlen( $agent ) ) continue;
$useragents[] = $agent;
}
}
asort( $useragents );
// WPtouch User Agent Filter
$useragents = apply_filters( 'wptouch_user_agents', $useragents );
return $useragents;
}
插件的实质是一个类:
class WPtouchPlugin {
var $applemobile;
var $desired_view;
var $output_started;
var $prowl_output;
var $prowl_success;
...
插件的构造函数(function WPtouchPlugin()
)首先向plugins_loaded
钩子添加一个操作,以检测移动浏览器的用户代理并将其设置$applemobile
为true。具体功能如下:
function detectAppleMobile($query = '') {
$container = $_SERVER['HTTP_USER_AGENT'];
$this->applemobile = false;
$useragents = bnc_wptouch_get_user_agents();
$devfile = compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode';
foreach ( $useragents as $useragent ) {
if ( preg_match( "#$useragent#i", $container ) || file_exists( $devfile ) ) {
$this->applemobile = true;
}
}
}
现在,插件知道您正在使用移动浏览器(根据浏览器的用户代理)。插件的下一个实质部分是一组过滤器:
if ( strpos( $_SERVER['REQUEST_URI'], '/wp-admin' ) === false ) {
add_filter( 'stylesheet', array(&$this, 'get_stylesheet') );
add_filter( 'theme_root', array(&$this, 'theme_root') );
add_filter( 'theme_root_uri', array(&$this, 'theme_root_uri') );
add_filter( 'template', array(&$this, 'get_template') );
}
这些过滤器中的每一个都调用一个检查是否$applemoble
设置为true的方法。如果是这样,WordPress将使用您的移动样式表,移动主题和移动帖子/页面模板,而不是主题的默认模板。基本上,您将根据使用的浏览器是否具有与您的“移动浏览器”列表匹配的用户代理来覆盖WordPress的默认行为。
WPTouch还具有关闭移动主题的功能-当您在iPhone上访问WPTouch网站时,底部的按钮可让您正常查看该网站。在构建自己的解决方案时,您可能需要考虑这一点。
免责声明: 以上所有代码均已从WPTouch 1.9.19.4版的源代码中复制并受GPL保护。如果您重复使用该代码,则您的系统还必须遵守GPL的条款。 我没有写这段代码。
您可能想看看非常流行的WPtouch插件如何做到这一点。它为“ iPhone,iPod touch,Android,Opera Mini,Palm Pre,Samsung touch和BlackBerry Storm / Torch移动设备”提供了不同的主题。我在其源代码中看到了用户代理列表,这可能是关键。
另一个插件WP-Wurfled使用了广泛的无线通用资源文件数据库。这个不断更新的移动设备数据库还包含许多功能信息,因此您知道服务器端设备的屏幕分辨率,无论它是否支持Flash,...
该template_redirect
动作钩子通常用来加载自定义主题,因为它几乎是一个真正的模板文件前的最后一刻被包括(template_include
是最后钩,但是这是一个过滤器)。
冒着不回答问题的风险,我建议不要这样做。
我使用iOS设备已经有几个月了,而当我购买iPad时,我做的第一件事就是尝试根据自己使用的设备(以及最初的屏幕方向)提出CSS布局来更改其行为)。
在撰写本文时,它正在我的开发站点(http://dev.semiologic.com/)上运行。如果在iOS设备上进行测试,您会注意到布局从iPad上带有侧边栏的一列切换到基于iPhone的只有一列的一列。(侧栏分为两列,而底部的框则位于底下的两列中。)您可以使用Safari通过减小浏览器的宽度来重现效果。
无论如何,就像编程一样有趣,最终我想到,至少在iOS设备上,针对移动设备进行了优化的布局使情况变得更糟,而不是更好。Safari mobile的内置缩放功能使您只要主栏宽为480px,您的网站就已经针对移动应用进行了优化。添加一个240像素宽的边栏,以获得720像素宽的版式,您的网站适合所有情况,看起来也很棒:
如果您将Safari移动设备的内置缩放比例考虑在内,则希望总计750px,则500px + 250px也可以使用。该网站仍然看起来不错,并且在横向和纵向模式下都可以在iPhone上完美读取。
无论如何,回到您的问题,测试表明您不应该做的一件事就是使用具有灵活宽度的布局。(顺便说一下,除非我误会,否则WP-touch会这样做。)这样做会导致次佳缩放。在iPad上,您可以放大限制在480像素宽的列中的内容,以允许更大的文本尺寸;会“调整”到屏幕宽度的内容会迫使您阅读细小的文本,或者如果文本太小而无法舒适地阅读,则水平滚动...
如果要自定义脚本,这是一个非常不错的脚本,可以轻松集成到wordpress中。 http://detectmobilebrowsers.mobi/
需要注意的一件事是,大多数具有本机浏览器支持的iphone,andriod或移动电话用户都不希望自动重定向!
这是不好的做法,请通过移动版本的链接为他们提供一个选项,而在移动版本中,可以给他们提供返回原始站点的选项。
重复一遍,除非您针对移动设备构建了非常特定的功能,或者您的流量来自不支持本机浏览器的旧手机(不太可能),否则请不要自动重定向用户。
我将添加另一种方法。
也许您想根据非常特定的需求来手工和微调所有样式和行为。
我最近不得不:如果是IE9,如果是iPhone,则为第二,如果是iPad,则为第三,依此类推...并使用Chris Schuld的Browser.php类获得了不错的结果。
我提出的功能和用法示例:
require_once('Browser.php');
$browser_check = new Browser();
$browser_agent = $browser_check->getBrowser();
$browser_version = $browser_check->getVersion();
function browser_check($what) {
global $browser_agent, $browser_version;
switch ($what) {
case 'version':
return $browser_version;
break;
case 'ie':
if ($browser_agent==Browser::BROWSER_IE) return true;
else return false;
break;
case 'mobile':
if ($browser_agent==Browser::BROWSER_ANDROID || $browser_agent==Browser::BROWSER_IPOD || $browser_agent==Browser::BROWSER_IPHONE) return true;
else return false;
break;
case 'ipad':
if ($browser_agent==Browser::BROWSER_IPAD) return true;
else return false;
break;
default:
return false;
break;
}
}
echo "Browser Version: " . browser_check('version');
if ( browser_check('ie') ) echo "Using Internet Explorer - print proper CSS";
if ( browser_check('mobile') ) echo "Using iPhone, iPod or Android - print proper JAVASCRIPT";
if ( browser_check('ipad') ) echo "Using iPad - print proper PHP";