我有一个响应性很强的网站,它可以很好地处理@媒体查询,除了嵌入在iframe中的1或2个地图,并使用html5覆盖图显示位置标记。
一般来说,在查看网站时,@media查询可以正常工作,但在不同的设备上查看特定的地图页面会导致不同的成功率-例如,iphone retina显示的覆盖图完全位于错误的位置,ipad也一样,而安卓看起来很好。
与其尝试为不同的设备创建不同的css@媒体查询,我决定最简单的解决方案是将任何移动用户重定向到可缩放的替代全尺寸地图(一个包含在根文件夹中但在WP之外的html文件)。
然而,我尝试了各种条件语句来实现这一点,最有效的似乎是全局WP变量$is_iphone。
这适用于iphone和android,但我无法确定该变量返回true的确切屏幕大小/设备响应。是否有显示控制器的列表或某些规格?例如,Galaxy tab 10.1不响应此变量,ipad也不响应。
所以,我的问题是,我可以利用什么php函数来最好地针对最流行的设备?我尝试添加各种功能来检测用户代理,但成功率很低。
我不想要一个移动插件,因为这只是一个页面-所以请不要建议wptouch!目前我在页面模板中使用此语句,但如上所述,它不是很准确;
<?php if ($is_iphone) : ?>
<script type="text/javascript">
<!--
var answer = confirm ("Mobile device detected.\\nClick OK to view a larger, zoomable map or click Cancel to stay on this page.")
if (answer)
window.location="../map1-full.html"
else
alert ("Redirect cancelled.\\nReload the page to display this option again.")
// -->
</script>
<?php endif; ?>