Question

我正在使用angularjs和离子框架处理移动应用程序。我的应用程序适用于android和ios设备。但我需要为ios和Android设备提供两种不同的CSS样式。有没有办法检测操作系统并相应地更改CSS。

我在stackoverflow中发现了一个与此类似的问题。但是我不确定这是否是这样做的。

Detect device and swap the CSS file - jQuery

我是否可以逐步说明如何执行此操作？在此先感谢：）

Answer 1

这是您可能正在寻找的解决方案。只需使用此代码

// This script sets OSName variable as follows:
// "Windows"    for all versions of Windows
// "MacOS"      for all versions of Macintosh OS
// "Linux"      for all versions of Linux
// "UNIX"       for all other UNIX flavors 
// "Unknown OS" indicates failure to detect the OS

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

if (OSName == "Windows"){$(document.body).append("<link rel='stylesheet' type='text/css' href='this.css'>")}

// etc...

Reference

您还可以use userAgent too

Answer 2

Ionic拥有检测设备ionic.Platform.isAndroid()，ionic.Platform.isIOS()的方法。

您可以在index.html中使用此代码加载设备特定的样式：

`

  <!-- Load platform specific styles -->
    <script>
      // Utilize Ionic’s methods for determining platform
      if (ionic.Platform.isAndroid()) {
        // Android styles
        document.write('<link href="css/ionic.android.app.css"  rel="stylesheet">');
      } else if (ionic.Platform.isIOS()) {
       // iOS Styles
       document.write('<link href="css/ionic.ios.app.css" rel="stylesheet">');
      } else {
       // Browser development styles (use Android)
       document.write('<link href="css/ionic.android.app.css"  rel="stylesheet">');
      }
    </script>

`

Answer 3

使用设备插件。

http://docs.phonegap.com/en/3.0.0/cordova_device_device.md.html

然后，您可以使用var thisDevice = device.platform访问操作系统，并且可以使用选择器（如if / else语句）来加载不同的样式表。

Answer 4

整体指南说

没有 - 根据设备检测更改外观不再被认为是非常好的编码习惯。
是 - 根据检测设备功能更改外观是良好的编码习惯。

有关进一步的讨论，请参阅HTML Goodies: Targeting Specific Devices in your Style Sheets，特别是Modernizr: the feature detection library for HTML5/CSS3。

但是，如果设备检测使您的工作更简单并为最终用户带来更多可用性，请阅读HTML5ROCKS: A non-responsive approach to building cross-device webapps以获取选项列表和优缺点。

如果你仍然希望采用客户端设备检测的方式，那么文章Stack Overflow: Add a CSS stylesheet only for iOS devices包含一些“一步一步”的具体编码示例

根据angularjs中的操作系统更改CSS

4 个答案: