Jee*_*evs 74 html javascript mobile device
我被要求创建一个实际的HTML页面/ JavaScript来模拟使用JavaScript代码检测移动设备(iPhone/iPad/Android).然后,这将使用户进入另一个屏幕,询问他们的电子邮件地址.
Bar*_*raa 74
我知道这个答案即将到来晚了3年,但没有其他的答案确实是100%正确的.如果您想检测用户是否使用任何形式的移动设备(Android,iOS,BlackBerry,Windows Phone,Kindle等),则可以使用以下代码:
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
// Take the user to a different screen here.
}
sla*_*dau 26
您将检测请求的浏览器用户代理字符串,然后根据它是否来自移动浏览器来确定它是什么.该设备并不完美,并且永远不会因为用户代理未针对移动设备进行标准化(至少不是我所知).
该站点将帮助您创建代码:http://www.hand-interactive.com/resources/detect-mobile-javascript.htm
示例:
您可以通过以下方式在javascript中获取用户代理:
var uagent = navigator.userAgent.toLowerCase();
然后以与此相同的格式进行检查(仅使用iPhone作为快速示例,但其他人需要稍微不同)
function DetectIphone()
{
if (uagent.search("iphone") > -1)
alert('true');
else
alert('false');
}
编辑
您将创建一个简单的HTML页面,如下所示:
<html>
<head>
<title>Mobile Detection</title>
</head>
<body>
<input type="button" OnClick="DetectIphone()" value="Am I an Iphone?" />
</body>
</html>
<script>
function DetectIphone()
{
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1)
alert('true');
else
alert('false');
}
</script>
jAn*_*ndy 21
一个非常简单的解决方案是检查屏幕宽度.由于几乎所有移动设备的最大屏幕宽度均为480px(目前),因此非常可靠:
if( screen.width <= 480 ) {
location.href = '/mobile.html';
}
用户代理字符串也是一个值得关注的地方.然而,前一种解决方案仍然更好,因为即使某些吓坏设备对用户代理没有正确响应,屏幕宽度也不会存在.
这里唯一的例外是平板电脑就像ipad.这些设备的屏幕宽度比智能手机更高,我可能会使用user-agent-string.
小智 14
if(navigator.userAgent.match(/iPad/i)){
//code for iPad here
}
if(navigator.userAgent.match(/iPhone/i)){
//code for iPhone here
}
if(navigator.userAgent.match(/Android/i)){
//code for Android here
}
if(navigator.userAgent.match(/BlackBerry/i)){
//code for BlackBerry here
}
if(navigator.userAgent.match(/webOS/i)){
//code for webOS here
}
var isMobileDevice = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null
|| screen.width <= 480;
一个简单的解决方案可能只是css.您可以在样式表中设置样式,然后在其底部进行调整.现代智能手机就像它们只有480px宽,而实际上它们更多.在css中检测较小屏幕的代码是
@media handheld, only screen and (max-width: 560px), only screen and (max-device-width: 480px) {
#hoofdcollumn {margin: 10px 5%; width:90%}
}
希望这可以帮助!
小智 5
所以我做了这个。谢谢你们！
<head>
<script type="text/javascript">
function DetectTheThing()
{
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1 || uagent.search("ipad") > -1
|| uagent.search("android") > -1 || uagent.search("blackberry") > -1
|| uagent.search("webos") > -1)
window.location.href ="otherindex.html";
}
</script>
</head>
<body onload="DetectTheThing()">
VIEW NORMAL SITE
</body>
</html>
既然现在是2015年,如果您偶然发现了这个问题,那么您应该使用window.matchMedia(如果它仍然是2015年,则为旧版浏览器填充):
if (matchMedia('handheld').matches) {
//...
} else {
//...
}
| 归档时间： |
|
| 查看次数： |
178382 次 |
| 最近记录： |