blocks|key|624930|text|一个非常简单的解决方案是检查屏幕宽度。由于几乎所有移动设备的最大屏幕宽度都是480px+(目前)，所以它是相当可靠的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|624931|if(+screen.width+<=+480+)+{
++++location.href+=+'/mobile.html';
}|code-block|syntax|javascript|624932|用户代理字符串也是一个需要查找的地方。然而，前一种解决方案仍然更好，因为即使某些该死的设备不能正确响应用户代理，屏幕宽度也不会说谎。|624933|唯一的例外是像ipad这样的平板电脑。这些设备的屏幕宽度比智能手机高，我可能会使用user-agent-string。|624934|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

A pretty simple solution is to check for the screen width. Since almost all mobile devices have a max screen width of 480px (at present), it's pretty reliable:

<pre><code>if( screen.width &lt;= 480 ) {
 location.href = '/mobile.html';
}
</code></pre>

The user-agent string is also a place to look. However, the former solution is still better since even if some freaking device does not respond correctly for the user-agent, the screen width doesn't lie.

The only exception here are tablet pc's like the ipad. Those devices have a higher screen width than smartphones and I would probably go with the user-agent-string for those.

blocks|key|840919|text|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+
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|840920|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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 
}
</code></pre>

blocks|key|840851|text|var+isMobileDevice+=+navigator.userAgent.match(/iPad%7CiPhone%7CiPod/i)+!=+null+
++++%7C%7C+screen.width+<=+480;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|840852|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var isMobileDevice = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null 
 || screen.width &lt;= 480;
</code></pre>

blocks|key|625093|text|一个简单的解决方案可以是纯css。您可以在样式表中设置样式，然后在其底部进行调整。现代智能手机看起来只有480px宽，但实际上要宽得多。在css中检测较小屏幕的代码是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|625094|@media+handheld,+only+screen+and+(max-width:+560px),+only+screen+and+(max-device-width:+480px)++{
++++#hoofdcollumn+{margin:+10px+5%25;+width:90%25}
}|code-block|syntax|javascript|625095|希望这能有所帮助！|625096|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

A simple solution could be css-only. You can set styles in your stylesheet, and then adjust them on the bottom of it. Modern smartphones act like they are just 480px wide, while they are actually a lot more. The code to detect a smaller screen in css is

<pre><code>@media handheld, only screen and (max-width: 560px), only screen and (max-device-width: 480px) {
 #hoofdcollumn {margin: 10px 5%; width:90%}
}
</code></pre>

Hope this helps!

blocks|key|841020|text|我使用mobile+=+/Android%7CwebOS%7CiPhone%7CiPad%7CiPod%7CBlackBerry/i.test(navigator.userAgent)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|841021|entityMap^0|3|27|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

blocks|key|841237|text|所以我就这么做了。谢谢大家！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|841238|<head>
<script+type="text/javascript">
++++function+DetectTheThing()
++++{
+++++++var+uagent+=+navigator.userAgent.toLowerCase();
+++++++if+(uagent.search("iphone")+>+-1+%7C%7C+uagent.search("ipad")+>+-1+
+++++++%7C%7C+uagent.search("android")+>+-1+%7C%7C+uagent.search("blackberry")+>+-1
+++++++%7C%7C+uagent.search("webos")+>+-1)
++++++++++window.location.href+="otherindex.html";
++++}
</script>

</head>

<body+onload="DetectTheThing()">
VIEW+NORMAL+SITE
</body>

</html>|code-block|syntax|javascript|841239|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

So I did this. Thank you all!

<pre><code>&lt;head&gt;
&lt;script type="text/javascript"&gt;
 function DetectTheThing()
 {
 var uagent = navigator.userAgent.toLowerCase();
 if (uagent.search("iphone") &gt; -1 || uagent.search("ipad") &gt; -1 
 || uagent.search("android") &gt; -1 || uagent.search("blackberry") &gt; -1
 || uagent.search("webos") &gt; -1)
 window.location.href ="otherindex.html";
 }
&lt;/script&gt;

&lt;/head&gt;

&lt;body onload="DetectTheThing()"&gt;
VIEW NORMAL SITE
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

blocks|key|625580|text|既然现在是2015年了，如果你偶然发现了这个问题，那么你可能应该使用window.matchMedia+(如果还是2015年，那么针对旧浏览器的polyfilling+)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|625581|if+(matchMedia('handheld').matches)+{
++++//...
}+else+{
++++//...
}|code-block|syntax|javascript|625582|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia|1|https://github.com/paulirish/matchMedia.js/^0|Y|H|0|20|B|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

Since it's now 2015, if you stumbled across this question then you should probably be using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia" rel="noreferrer">window.matchMedia</a> (and, if it's still 2015, <a href="https://github.com/paulirish/matchMedia.js/" rel="noreferrer">polyfilling</a> for older browsers):

<pre><code>if (matchMedia('handheld').matches) {
 //...
} else {
 //...
}
</code></pre>

blocks|key|840841|text|您可以使用user-agent字符串来检测这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|840842|var+useragent+=+navigator.userAgent.toLowerCase();

if(+useragent.search("iphone")+)
++++;+//+iphone
else+if(+useragent.search("ipod")+)
++++;+//+ipod
else+if(+useragent.search("android")+)
++++;+//+android
etc|code-block|syntax|javascript|840843|您可以在http://www.useragentstring.com/pages/useragentstring.php中找到用户代理字符串的列表|offset|length|840844|entityMap|0|LINK|mutability|MUTABLE|url|http://www.useragentstring.com/pages/useragentstring.php^0|0|0|4|1K|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You can use the user-agent string to detect this.

<pre><code>var useragent = navigator.userAgent.toLowerCase();

if( useragent.search("iphone") )
 ; // iphone
else if( useragent.search("ipod") )
 ; // ipod
else if( useragent.search("android") )
 ; // android
etc
</code></pre>

You can find a list of useragent strings here <a href="http://www.useragentstring.com/pages/useragentstring.php" rel="nofollow">http://www.useragentstring.com/pages/useragentstring.php</a>

blocks|key|625196|text|我建议你去看看http://wurfl.io/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|625197|简而言之，如果您导入一个很小的JS文件：|625198|<script+type='text/javascript'+src="//wurfl.io/wurfl.js"></script>|code-block|syntax|javascript|625199|您将得到一个JSON对象，如下所示：|625200|{
+"complete_device_name":"Google+Nexus+7",
+"is_mobile":true,
+"form_factor":"Tablet"
}|625201|(当然，假设您使用的是Nexus+7+)，并且您将能够执行以下操作：|625202|WURFL.complete_device_name|625203|这就是你要找的。|625204|免责声明:我为提供这项免费服务的公司工作。谢谢。|625205|entityMap|0|LINK|mutability|MUTABLE|url|http://wurfl.io/^0|7|G|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1B|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|1D|8|@]|9|@]|C|$I|J]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|C|$]]|$1|U|3|V|5|6|7|1F|8|@]|9|@]|C|$]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|X|$Y|$5|Z|10|11|C|$12|13]]]]

I advise you check out <a href="http://wurfl.io/" rel="nofollow">http://wurfl.io/</a>

In a nutshell, if you import a tiny JS file:

<pre><code>&lt;script type='text/javascript' src="//wurfl.io/wurfl.js"&gt;&lt;/script&gt;
</code></pre>

you will be left with a JSON object that looks like:

<pre><code>{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}
</code></pre>

(that's assuming you are using a Nexus 7, of course) and you will be able to do things like:

<pre><code>WURFL.complete_device_name
</code></pre>

This is what you are looking for.

Disclaimer: I work for the company that offers this free service. Thanks.

blocks|key|841447|text|这是一个如何检查桌面或移动应用程序中是否加载了网页的示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|841448|JS将在页面加载时执行，您可以在页面加载时执行桌面特定的事情，例如隐藏条形码扫描仪。|841449|+++<!DOCTYPE+html>
++++<html>
++++<head>
+++++<script+type="text/javascript">

++++++++++++/*
++++++++++++*+Hide+Scan+button+if+Page+is+loaded+in+Desktop+Browser
++++++++++++*/
++++++++++++function+hideScanButtonForDesktop()+{

++++++++++++++++if+(!(/Android%7CwebOS%7CiPhone%7CiPad%7CiPod%7CBlackBerry%7CBB%7CPlayBook%7CIEMobile%7CWindows+Phone%7CKindle%7CSilk%7COpera+Mini/i.test(navigator.userAgent)))+{

++++++++++++++++++++//+Hide+scan+button+for+Desktop
++++++++++++++++++++document.getElementById('btnLinkModelScan').style.display+=+"none";
++++++++++++++++}+++++++++
++++++++++++}

++++++++++++//toggle+scanButton+for+Desktop+on+page+load
++++++++++++window.onload+=+hideScanButtonForDesktop;
++++++++</script>
++++</head>|code-block|syntax|javascript|841450|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is an example of how to check if webpage is loaded in Desktop or mobile app.

JS will execute on page load and you can do Desktop specific things on page load eg hide barcode scanner.

<pre><code> &lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;

 /*
 * Hide Scan button if Page is loaded in Desktop Browser
 */
 function hideScanButtonForDesktop() {

 if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent))) {

 // Hide scan button for Desktop
 document.getElementById('btnLinkModelScan').style.display = "none";
 } 
 }

 //toggle scanButton for Desktop on page load
 window.onload = hideScanButtonForDesktop;
 &lt;/script&gt;
 &lt;/head&gt;
</code></pre>

blocks|key|624987|text|确定您需要模拟的设备的User+Agent是什么，然后根据它测试一个变量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|624988|例如：|624989|//+var+userAgent+=+navigator.userAgent.toLowerCase();+//+this+would+actually+get+the+user+agent

var+userAgent+=+"iphone";+/*+Simulates+User+Agent+for+iPhone+*/
if+(userAgent.indexOf('iphone')+!=+-1)+{
+++//+some+code+here
}|code-block|syntax|javascript|624990|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Determine what the User Agent is for the devices that you need to simulate and then test a variable against that.

for example:

<pre><code>// var userAgent = navigator.userAgent.toLowerCase(); // this would actually get the user agent

var userAgent = "iphone"; /* Simulates User Agent for iPhone */
if (userAgent.indexOf('iphone') != -1) {
 // some code here
}
</code></pre>

blocks|key|841086|text|基于用户代理的设备检测并不是很好的解决方案，更好的解决方案是检测像触摸设备这样的功能(在新的jQuery中，他们删除了$.browser，转而使用$.support+)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|841087|要检测移动设备，您可以检查触摸事件：|841088|function+is_touch_device()+{
++return+'ontouchstart'+in+window+//+works+on+most+browsers+
++++++%7C%7C+'onmsgesturechange'+in+window;+//+works+on+ie10
}|code-block|syntax|javascript|841089|摘自What's+the+best+way+to+detect+a+'touch+screen'+device+using+JavaScript?|841090|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript#answer-4819886^0|1N|9|21|9|0|0|0|2|1Z|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

Device detection based on user-agent is not very good solution, better is to detect features like touch device (in new jQuery they remove <code>$.browser</code> and use <code>$.support</code> instead).

To detect mobile you can check for touch events:

<pre><code>function is_touch_device() {
 return 'ontouchstart' in window // works on most browsers 
 || 'onmsgesturechange' in window; // works on ie10
}
</code></pre>

Taken from <a href="https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript#answer-4819886">What&#39;s the best way to detect a &#39;touch screen&#39; device using JavaScript?</a>

blocks|key|626047|text|查找设备类型的最简洁方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|626048|if+(navigator.userAgentData.mobile)+{+//+do+something+}|code-block|syntax|javascript|626049|(尽管Safari还不支持它)|626050|更多信息：https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/mobile|offset|length|626051|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/mobile^0|0|0|0|5|1Z|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

The cleanest way of finding device type is:
<pre><code>if (navigator.userAgentData.mobile) { // do something }
</code></pre>
(although it isn't yet supported on Safari)
More info: <a href="https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/mobile" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/mobile</a>

blocks|key|840956|text|这是我的版本，与上面的版本很相似，但我认为很有参考价值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|840957|if+(mob_url+==+"")+{
++lt_url+=+desk_url;
}+else+if+((useragent.indexOf("iPhone")+!=+-1+%7C%7C+useragent.indexOf("Android")+!=+-1+%7C%7C+useragent.indexOf("Blackberry")+!=+-1+%7C%7C+useragent.indexOf("Mobile")+!=+-1)+&&+useragent.indexOf("iPad")+==+-1+&&+mob_url+!=+"")+{
++lt_url+=+mob_url;
}+else+{
++lt_url+=+desk_url;
}|code-block|syntax|javascript|840958|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is my version, quite similar to the upper one, but I think good for reference.

<pre><code>if (mob_url == "") {
 lt_url = desk_url;
} else if ((useragent.indexOf("iPhone") != -1 || useragent.indexOf("Android") != -1 || useragent.indexOf("Blackberry") != -1 || useragent.indexOf("Mobile") != -1) &amp;&amp; useragent.indexOf("iPad") == -1 &amp;&amp; mob_url != "") {
 lt_url = mob_url;
} else {
 lt_url = desk_url;
}
</code></pre>

blocks|key|625310|text|只需使用DeviceDetection|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|625311|deviceDetection.deviceType+//+phone+%7C+tablet+according+to+device|code-block|syntax|javascript|625312|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/danielpoe/DeviceDetection/blob/master/src/devicedetection.js^0|4|F|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Simply use <a href="https://github.com/danielpoe/DeviceDetection/blob/master/src/devicedetection.js" rel="nofollow">DeviceDetection</a>

<pre><code>deviceDetection.deviceType // phone | tablet according to device
</code></pre>

blocks|key|625627|text|另一种可能性是使用mobile-detect.js。试试demo吧。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|625628|浏览器使用情况：|625629|<script+src="mobile-detect.js"></script>
<script>
++++var+md+=+new+MobileDetect(window.navigator.userAgent);
++++//+...+see+below
</script>|code-block|syntax|javascript|625630|Node.js+/+Express：|625631|var+MobileDetect+=+require('mobile-detect'),
++++md+=+new+MobileDetect(req.headers['user-agent']);
//+...+see+below|625632|示例：|625633|var+md+=+new+MobileDetect(
++++'Mozilla/5.0+(Linux;+U;+Android+4.0.3;+en-in;+SonyEricssonMT11i'+%2B
++++'+Build/4.1.A.0.562)+AppleWebKit/534.30+(KHTML,+like+Gecko)'+%2B
++++'+Version/4.0+Mobile+Safari/534.30');

//+more+typically+we+would+instantiate+with+'window.navigator.userAgent'
//+as+user-agent;+this+string+literal+is+only+for+better+understanding

console.log(+md.mobile()+);++++++++++//+'Sony'
console.log(+md.phone()+);+++++++++++//+'Sony'
console.log(+md.tablet()+);++++++++++//+null
console.log(+md.userAgent()+);+++++++//+'Safari'
console.log(+md.os()+);++++++++++++++//+'AndroidOS'
console.log(+md.is('iPhone')+);++++++//+false
console.log(+md.is('bot')+);+++++++++//+false
console.log(+md.version('Webkit')+);+++++++++//+534.3
console.log(+md.versionStr('Build')+);+++++++//+'4.1.A.0.562'
console.log(+md.match('playstation%7Cxbox')+);+//+false|625634|entityMap|0|LINK|mutability|MUTABLE|url|https://hgoebl.github.io/mobile-detect.js/|1|https://zeno.github.io/mobile-detect-demo/^0|9|G|0|S|4|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]|$A|16|B|17|1|18]]|C|$]]|$1|D|3|E|5|6|7|19|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1A|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1B|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1C|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1D|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|1E|8|@]|9|@]|C|$I|J]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]]]

Another possibility is to use <a href="https://hgoebl.github.io/mobile-detect.js/" rel="nofollow">mobile-detect.js</a>. Try the <a href="https://zeno.github.io/mobile-detect-demo/" rel="nofollow">demo</a>.

<h2>Browser usage:</h2>

<pre><code>&lt;script src="mobile-detect.js"&gt;&lt;/script&gt;
&lt;script&gt;
 var md = new MobileDetect(window.navigator.userAgent);
 // ... see below
&lt;/script&gt;
</code></pre>

<h2>Node.js / Express:</h2>

<pre><code>var MobileDetect = require('mobile-detect'),
 md = new MobileDetect(req.headers['user-agent']);
// ... see below
</code></pre>

<h2>Example:</h2>

<pre><code>var md = new MobileDetect(
 'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' +
 ' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' +
 ' Version/4.0 Mobile Safari/534.30');

// more typically we would instantiate with 'window.navigator.userAgent'
// as user-agent; this string literal is only for better understanding

console.log( md.mobile() ); // 'Sony'
console.log( md.phone() ); // 'Sony'
console.log( md.tablet() ); // null
console.log( md.userAgent() ); // 'Safari'
console.log( md.os() ); // 'AndroidOS'
console.log( md.is('iPhone') ); // false
console.log( md.is('bot') ); // false
console.log( md.version('Webkit') ); // 534.3
console.log( md.versionStr('Build') ); // '4.1.A.0.562'
console.log( md.match('playstation|xbox') ); // false
</code></pre>

blocks|key|625814|text|当我(某种程度上没有成功)为我的hack寻找合适的解决方案时，我仍然想在这里添加我的hack+:我只是简单地检查对设备定向的支持，这似乎是手机和桌面之间最重要的区别：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|625815|var+is_handheld=0；//仅全局if(window.DeviceOrientationEvent)+{is_handheld=1;}|625816|也就是说，imho页面还应该提供移动/桌面布局之间的手动选择。我得到了1920*1080，我可以放大--一个过于简化和特征减少的单词wordpressoid块并不总是一件好事。尤其是基于非工作设备检测的强制布局--这种情况时有发生。|625817|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

As I (kind of without success) searched for the proper solution for my hack, I want to add my hack here nonetheless: I simply check for support of device orientation, which seems the most significant diffrence between mobiles and desktop:

var is_handheld=0; // just a global
if(window.DeviceOrientationEvent) {is_handheld=1;}

That being said, imho a page should also offer manual choice between mobile / desktop layout. I got 1920*1080 and I can zoom in - an oversimplified and feature-reduced wordpressoid chunk is not always a good thing. Especially forcing a layout based on nonworking device detection - it happens all the time.

blocks|key|841690|text|用户代理的测试是复杂的，混乱的，并且总是失败的。我也没有发现媒体对“手持设备”的匹配对我来说是有效的。最简单的解决方案是检测鼠标是否可用。这可以像这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|841691|var+result+=+window.matchMedia("(any-pointer:coarse)").matches;|code-block|syntax|javascript|841692|这将告诉你是否需要显示悬停项目，以及需要物理指针的任何其他项目。然后，可以根据宽度对进一步的媒体查询进行大小调整。|841693|下面的小库是上面问题的带括号版本，应该涵盖大多数“你是平板电脑还是没有鼠标的手机”的场景。|841694|https://patrickhlauke.github.io/touch/touchscreen-detection/|offset|length|841695|自2015年开始支持媒体匹配，您可以在此处查看兼容性：https://caniuse.com/#search=matchMedia|841696|简而言之，您应该维护与屏幕是否为触摸屏以及屏幕大小相关的变量。理论上，我可以在鼠标操作的桌面上有一个小屏幕。|841697|entityMap|0|LINK|mutability|MUTABLE|url|1|https://caniuse.com/#search=matchMedia^0|0|0|0|0|0|1O|0|0|R|12|1|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|13|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|14|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|15|8|@]|9|@$M|16|N|17|1|18]]|A|$]]|$1|O|3|P|5|6|7|19|8|@]|9|@$M|1A|N|1B|1|1C]]|A|$]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|L]]|Z|$5|V|W|X|A|$Y|10]]]]

Testing for user agent is complex, messy and invariably fails.
I also didn't find that the media match for "handheld" worked for me. The simplest solution was to detect if the mouse was available. And that can be done like this:

<pre><code>var result = window.matchMedia("(any-pointer:coarse)").matches;
</code></pre>

That will tell you if you need to show hover items or not and anything else that requires a physical pointer. The sizing can then be done on further media queries based on width.

The following little library is a belt braces version of the query above, should cover most "are you a tablet or a phone with no mouse" scenarios.

<a href="https://patrickhlauke.github.io/touch/touchscreen-detection/" rel="nofollow noreferrer">https://patrickhlauke.github.io/touch/touchscreen-detection/</a>

Media matches have been supported since 2015 and you can check the compatibility here:
<a href="https://caniuse.com/#search=matchMedia" rel="nofollow noreferrer">https://caniuse.com/#search=matchMedia</a>

In short you should maintain variables relating to whether the screen is touch screen and also what size the screen is. In theory I could have a tiny screen on a mouse operated desktop.

blocks|key|841737|text|类似于上面的几个答案。这个简单的函数对我来说工作得很好。截止日期为2019年|type|unstyled|depth|inlineStyleRanges|entityRanges|data|841738|function+IsMobileCard()
{
var+check+=++false;

(function(a){if(/(android%7Cbb\d%2B%7Cmeego).%2Bmobile%7Cavantgo%7Cbada\/%7Cblackberry%7Cblazer%7Ccompal%7Celaine%7Cfennec%7Chiptop%7Ciemobile%7Cip(hone%7Cod)%7Ciris%7Ckindle%7Clge+%7Cmaemo%7Cmidp%7Cmmp%7Cmobile.%2Bfirefox%7Cnetfront%7Copera+m(ob%7Cin)i%7Cpalm(+os)?%7Cphone%7Cp(ixi%7Cre)\/%7Cplucker%7Cpocket%7Cpsp%7Cseries(4%7C6)0%7Csymbian%7Ctreo%7Cup\.(browser%7Clink)%7Cvodafone%7Cwap%7Cwindows+ce%7Cxda%7Cxiino/i.test(a)%7C%7C/1207%7C6310%7C6590%7C3gso%7C4thp%7C50[1-6]i%7C770s%7C802s%7Ca+wa%7Cabac%7Cac(er%7Coo%7Cs\-)%7Cai(ko%7Crn)%7Cal(av%7Cca%7Cco)%7Camoi%7Can(ex%7Cny%7Cyw)%7Captu%7Car(ch%7Cgo)%7Cas(te%7Cus)%7Cattw%7Cau(di%7C\-m%7Cr+%7Cs+)%7Cavan%7Cbe(ck%7Cll%7Cnq)%7Cbi(lb%7Crd)%7Cbl(ac%7Caz)%7Cbr(e%7Cv)w%7Cbumb%7Cbw\-(n%7Cu)%7Cc55\/%7Ccapi%7Cccwa%7Ccdm\-%7Ccell%7Cchtm%7Ccldc%7Ccmd\-%7Cco(mp%7Cnd)%7Ccraw%7Cda(it%7Cll%7Cng)%7Cdbte%7Cdc\-s%7Cdevi%7Cdica%7Cdmob%7Cdo(c%7Cp)o%7Cds(12%7C\-d)%7Cel(49%7Cai)%7Cem(l2%7Cul)%7Cer(ic%7Ck0)%7Cesl8%7Cez([4-7]0%7Cos%7Cwa%7Cze)%7Cfetc%7Cfly(\-%7C_)%7Cg1+u%7Cg560%7Cgene%7Cgf\-5%7Cg\-mo%7Cgo(\.w%7Cod)%7Cgr(ad%7Cun)%7Chaie%7Chcit%7Chd\-(m%7Cp%7Ct)%7Chei\-%7Chi(pt%7Cta)%7Chp(+i%7Cip)%7Chs\-c%7Cht(c(\-%7C+%7C_%7Ca%7Cg%7Cp%7Cs%7Ct)%7Ctp)%7Chu(aw%7Ctc)%7Ci\-(20%7Cgo%7Cma)%7Ci230%7Ciac(+%7C\-%7C\/)%7Cibro%7Cidea%7Cig01%7Cikom%7Cim1k%7Cinno%7Cipaq%7Ciris%7Cja(t%7Cv)a%7Cjbro%7Cjemu%7Cjigs%7Ckddi%7Ckeji%7Ckgt(+%7C\/)%7Cklon%7Ckpt+%7Ckwc\-%7Ckyo(c%7Ck)%7Cle(no%7Cxi)%7Clg(+g%7C\/(k%7Cl%7Cu)%7C50%7C54%7C\-[a-w])%7Clibw%7Clynx%7Cm1\-w%7Cm3ga%7Cm50\/%7Cma(te%7Cui%7Cxo)%7Cmc(01%7C21%7Cca)%7Cm\-cr%7Cme(rc%7Cri)%7Cmi(o8%7Coa%7Cts)%7Cmmef%7Cmo(01%7C02%7Cbi%7Cde%7Cdo%7Ct(\-%7C+%7Co%7Cv)%7Czz)%7Cmt(50%7Cp1%7Cv+)%7Cmwbp%7Cmywa%7Cn10[0-2]%7Cn20[2-3]%7Cn30(0%7C2)%7Cn50(0%7C2%7C5)%7Cn7(0(0%7C1)%7C10)%7Cne((c%7Cm)\-%7Con%7Ctf%7Cwf%7Cwg%7Cwt)%7Cnok(6%7Ci)%7Cnzph%7Co2im%7Cop(ti%7Cwv)%7Coran%7Cowg1%7Cp800%7Cpan(a%7Cd%7Ct)%7Cpdxg%7Cpg(13%7C\-([1-8]%7Cc))%7Cphil%7Cpire%7Cpl(ay%7Cuc)%7Cpn\-2%7Cpo(ck%7Crt%7Cse)%7Cprox%7Cpsio%7Cpt\-g%7Cqa\-a%7Cqc(07%7C12%7C21%7C32%7C60%7C\-[2-7]%7Ci\-)%7Cqtek%7Cr380%7Cr600%7Craks%7Crim9%7Cro(ve%7Czo)%7Cs55\/%7Csa(ge%7Cma%7Cmm%7Cms%7Cny%7Cva)%7Csc(01%7Ch\-%7Coo%7Cp\-)%7Csdk\/%7Cse(c(\-%7C0%7C1)%7C47%7Cmc%7Cnd%7Cri)%7Csgh\-%7Cshar%7Csie(\-%7Cm)%7Csk\-0%7Csl(45%7Cid)%7Csm(al%7Car%7Cb3%7Cit%7Ct5)%7Cso(ft%7Cny)%7Csp(01%7Ch\-%7Cv\-%7Cv+)%7Csy(01%7Cmb)%7Ct2(18%7C50)%7Ct6(00%7C10%7C18)%7Cta(gt%7Clk)%7Ctcl\-%7Ctdg\-%7Ctel(i%7Cm)%7Ctim\-%7Ct\-mo%7Cto(pl%7Csh)%7Cts(70%7Cm\-%7Cm3%7Cm5)%7Ctx\-9%7Cup(\.b%7Cg1%7Csi)%7Cutst%7Cv400%7Cv750%7Cveri%7Cvi(rg%7Cte)%7Cvk(40%7C5[0-3]%7C\-v)%7Cvm40%7Cvoda%7Cvulc%7Cvx(52%7C53%7C60%7C61%7C70%7C80%7C81%7C83%7C85%7C98)%7Cw3c(\-%7C+)%7Cwebc%7Cwhit%7Cwi(g+%7Cnc%7Cnw)%7Cwmlb%7Cwonu%7Cx700%7Cyas\-%7Cyour%7Czeto%7Czte\-/i.test(a.substr(0,4)))+check+=+true;})(navigator.userAgent%7C%7Cnavigator.vendor%7C%7Cwindow.opera);

return+check;+++
}|code-block|syntax|javascript|841739|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Similar to several of the answers above. This simple function, works very well for me. It is current as of 2019

<pre><code>function IsMobileCard()
{
var check = false;

(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);

return check; 
}
</code></pre>

I have been asked to create an actual HTML page / JavaScript to simulate detection of the mobile devices (iPhone / iPad / Android) using JavaScript code. This will then take the user to a different screen which asks them for their email address.

How to detect a mobile device with JavaScript?

Android

Windows

jQuery

Linux

JSON

我被要求创建一个实际的HTML page / JavaScript来使用JavaScript代码模拟对移动设备(iPhone / iPad / Android)的检测。这将把用户带到一个不同的屏幕，要求他们提供他们的电子邮件地址。

问如何检测带有JavaScript的移动设备？
EN

回答 19

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何检测带有JavaScript的移动设备？EN

回答 19

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何检测带有JavaScript的移动设备？
EN