有没有办法检测用户是否在jQuery中使用移动设备?类似于CSS@media属性?如果浏览器在手持设备上,我希望运行不同的脚本。
jQuery$.browser函数不是我想要的。
有没有办法检测用户是否在jQuery中使用移动设备?类似于CSS@media属性?如果浏览器在手持设备上,我希望运行不同的脚本。
jQuery$.browser函数不是我想要的。
当前回答
你需要控制大小
var is_mobile = false;
$(window).resize(function() {
if ($('#mobileNav').css('display') == 'block') {
is_mobile = true;
}
if (is_mobile == true) {
console.log('is_mobile')
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu("#mainMenu", {
"offCanvas": {
"position": "right-front"
}
});
}
);
}
}).resize();
其他回答
对我来说,小是美丽的,所以我使用这种技巧:
在CSS文件中:
/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
#some-element { display: none; }
}
在jQuery/JavaScript文件中:
$( document ).ready(function() {
var is_mobile = false;
if( $('#some-element').css('display')=='none') {
is_mobile = true;
}
// now I can use is_mobile to run javascript conditionally
if (is_mobile == true) {
//Conditional script here
}
});
我的目标是让我的网站“移动友好”。所以我使用CSS媒体查询根据屏幕大小显示/隐藏元素。
例如,在我的移动版本中,我不想激活Facebook Like Box,因为它会加载所有的个人资料图片和内容。这对移动访客来说并不好。因此,除了隐藏容器元素之外,我还在jQuery代码块(上面)中执行此操作:
if(!is_mobile) {
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
你可以在http://lisboaautentica.com
我仍在开发手机版,所以在写这篇文章时,它仍然看起来不像应该的样子。
由dekin88更新
有一个内置的JavaScript API用于检测媒体。不使用上述解决方案,只需使用以下方法:
$(function() {
let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
if (isMobile) {
//Conditional script here
}
});
浏览器支持:http://caniuse.com/#feat=matchmedia
这种方法的优点是,它不仅简单、更短,而且如果需要,您可以有条件地分别针对不同的设备,如智能手机和平板电脑,而无需在DOM中添加任何虚拟元素。
我为.NET应用程序执行此操作。
在共享的_Layout.cshtml页面中,我添加了这个。
@{
var isMobileDevice = HttpContext.Current.Request.Browser.IsMobileDevice;
}
<html lang="en" class="@((isMobileDevice)?"ismobiledevice":"")">
然后检查站点中的任何页面(jQuery):
<script>
var isMobile = $('html').hasClass('ismobiledevice');
</script>
我知道这个老问题,有很多答案,但我认为这个功能很简单,将有助于检测所有移动设备、平板电脑和计算机浏览器,它就像一个魅力。
function Device_Type()
{
var Return_Device;
if(/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|iemobile|w3c|acs\-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd\-|dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg\-c|lg\-d|lg\-g|lge\-|maui|maxo|midp|mits|mmef|mobi|mot\-|moto|mwbp|nec\-|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch\-|sec\-|send|seri|sgh\-|shar|sie\-|siem|smal|smar|sony|sph\-|symb|t\-mo|teli|tim\-|tosh|tsm\-|upg1|upsi|vk\-v|voda|wap\-|wapa|wapi|wapp|wapr|webc|winw|winw|xda|xda\-) /i.test(navigator.userAgent))
{
if(/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent))
{
Return_Device = 'Tablet';
}
else
{
Return_Device = 'Mobile';
}
}
else if(/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent))
{
Return_Device = 'Tablet';
}
else
{
Return_Device = 'Desktop';
}
return Return_Device;
}
MDN建议使用Navigator.maxTouchPoints检查可用的可触摸点。如果>0,则设备是可触摸的,很可能是手机或平板电脑。https://developer.mozilla.org/en-US/docs/Web/API/Navigator/maxTouchPoints
你会做太多的工作。
if (window.screen.availWidth <= 425) {
// do something
}
您可以通过JS在页面加载时执行此操作。无需编写长字符串列表来尝试捕获所有内容。哇,你错过了一个!然后你必须回去改变它/添加它。更流行的手机尺寸约为425英寸或更小(在纵向模式下),平板电脑约为700英寸,任何更大的都可能是笔记本电脑、台式机或其他更大的设备。如果你需要移动风景模式,也许你应该在Swift或Android工作室工作,而不是传统的网络编码。
附带说明:发布时,这可能不是一个可用的解决方案,但现在可以使用了。