使用相同分辨率的Phonegap检测平板电脑或智能手机答案

【问题标题】：Phonegap detecting tablet or smartphone using the same resolution使用相同分辨率的Phonegap检测平板电脑或智能手机
【发布时间】：2015-06-24 23:05:01
【问题描述】：

我正在将 Phonegap 用于移动应用程序。现在我想检测是否有智能手机或平板电脑？

我认为是这样的：

var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);

如果我有安卓智能手机或平板电脑将无法使用。

@Media 库也不是我想要的，因为平板电脑和智能手机可以具有相同的分辨率（因此宽度 px 无法在平板电脑和智能手机之间做出决定）。

还有其他检测方法吗？非常感谢您的帮助。

【问题讨论】：

使用设备宽度和高度。平板电脑宽度为 600px(~590px)。

标签： android css cordova responsive-design

【解决方案1】：

您有一个 cordova 插件来确定设备是否是 Android 和 iOS 上的平板电脑。你可以在这里找到这个插件：istablet

【讨论】：

谢谢！我是否也可以根据真/假决定采用不同的 css 文件，还是您会建议其他方法？我的意思是：window.isTablet== True，取tablet.css 否则：取smartphone.css。这可能吗？
是的，你可以添加一个 css 宽度 jquery $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"styles. css"}) 但 mediaQueries 可以成为减少加载时间并避免使用 javascript 的解决方案。

【解决方案2】：

最好的方法是创建一个 js 文件并编写条件以检查 js 中的设备，然后像这样动态加载样式表

在您的 html (index.html) 中

<head>
   //headers.............
   <script type="text/javascript" src="js/styles.js"></script>
  //headers..............
</head>

在styles.js中

if ((navigator.platform=="iPhone"))
    { 
        document.write('<link href="css/iphone.css" type="text/css" rel="stylesheet" />');
    }
    else
    { 
        document.write('<link href="css/ipad.css" type="text/css" rel="stylesheet" />');
    }

像这样，iphone.css 和 ipad.css 是你的不同样式表

【讨论】：