不同的行为取决于移动

Question

我正在制作一个有角度的客户/订单管理应用程序，并希望有来自angularstrap的popovers和modals，如果它是一个大屏幕/桌面，并且如果它是一个小屏幕/移动设备就会路由。

我想我需要一个自定义指令，但我不知道如何。

任何提示？

Answer 1

我最近使用全局JS函数取得了成功：

window.myapp = window.myapp || {};

window.myapp.isMobile = function() {
    return ($(window).width() <= 600);
};

然后，在您的控制器中，只要您需要根据显示大小应用某些不同的行为，您就可以简单地调用此函数：

if (myapp.isMobile()){
    //do mobile stuff        
}
else{
    //do desktop stuff
}

我发现这是一个实用的＆amp;用于现代移动设备的坚如磐石的方法，以及firefox，chrome，IE8 +和safari。

您可以更进一步，并利用自适应设计并使用媒体查询加载自定义移动设备样式表：

<link href="<your path here>/mobile.css" rel="stylesheet" media="screen and (max-width: 600px)" />