Question

我正在创建一个网站的移动版本，但仅适用于智能手机。如果设备是平板电脑，笔记本电脑，上网本，台式机或任何类似设备，我希望用户自动转到完整网站。如果它是简单的CSS，我会知道如何做到这一点。但是，移动版本使用的文件和脚本与完整版网站不同，需要相应地重定向，而不是简单地使用其他样式表。

任何人都有建议或文章可以说明如何检测所述设备并相应地重定向？

Answer 1

您可以在此处找到问题的有效解决方案：https://github.com/sebarmeli/JS-Redirection-Mobile-Site

Answer 2

我能找到的唯一方法就是黑客攻击我：

使用css媒体查询来检测使用max-device-width的电话
在此基础上设置样式更改 - 我将体色从＃000000更改为＃000001
使用OnLoad调用Javascript来检查正文颜色。

在此基础上重定向。（在我自己的情况下，我实际上使用了window.confirm调用来为用户提供选择，而不是强制重定向。）

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Phone test</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
    body
    { color: rgb(0, 0, 0);}
    @media screen and (max-device-width:600px), screen and (max-width:600px)
    {
        body{ color: rgb(0, 0, 1);}
    }
</style>
<script type="text/javascript">
<!--
function doPhoneCheck()
{
    var col;
    if(document.body.currentStyle)
    {
        col = document.body.currentStyle.color; // IE
    }
    else
    {
        col = getComputedStyle(document.body).getPropertyValue("color");
    }
    if(col =="rgb(0, 0, 1)")
    {
        window.location.href="http://www.apple.com/";
    }
}
//-->
</script>

它检测到所有iPhone到6+，以及我测试过的Android和Windows手机。它歧视了所有当前的iPad以及我尝试过的笔记本电脑和台式机。

NB

（1）对于颜色，你必须使用rgb并完全按照书面形式留下空格。

（2）我发现类似的代码不会因某种未知原因检测到身体背景颜色。

（3）检测css样式的关键是使用getComputedStyle（）（或IE的currentStyle）而不是getStyle（）。

（4）即使身体颜色的变化难以察觉，也可以通过为所有css类等指定颜色来覆盖它。

检测SmartPhone不是平板电脑

2 个答案: