Css 如何加载一个用于移动设备的样式表和一个用于台式机的样式表？

我之所以想这样做，是因为我们的“桌面版”上有下拉菜单，我想隐藏它们（因为它们在触摸屏设备上工作不太好），并显示一个简单的菜单，其中只有“基本”链接

在检测设备时，我无法使媒体查询工作，因为某些设备的分辨率太高（例如三星Galaxy S3）

有Javascript或我可以使用的东西吗？类似（我不懂Javascript，所以这只是个想法）：

---

只是基本的想法：-）

使用

媒体

特定于以下屏幕的属性

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />

---

试试这个：

<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld"/>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen"/>

我发现了几个代码“片段”，我想知道它们是否可以组合成一个工作脚本

if(Browser.Platform.name == 'android' || Browser.Platform.name == 'ios') window.location = dir+mobileFolder+"/index.html"+page;

//*** Could the above be combined with the below in some way? ***

function loadcssfile(filename, filetype){
// if (filetype=="css"){
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
//}

loadcssfile("stylesheet.css", "css")

---

你不能只使用用户代理吗？这可以为设备而不仅仅是浏览器实现吗？例如，我希望桌面计算机上的Safari加载desktop.css，iPhone上的Safari加载mobile.css。我很确定计算机上Safari的用户代理与iPhone上的Safari不同。据我所知，大多数主要移动设备都不支持media=“掌上型”这一功能。否则这将是一个很好的解决方案。问题是，例如三星Galaxy S3的分辨率为1280X720，将加载“desktop.css”@user1823082 ya，那么为什么要加载desktop.css呢？只需为这个特定的屏幕分辨率制作另一个样式表好吧，有些计算机的屏幕分辨率与S3相同，我不希望它们加载mobile.css。

screen

：用于计算机屏幕、平板电脑、智能手机等。

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="handheld" />

@media screen {
      /* Styles for screen goes here */
}

@media print {
      /* Styles for print goes here */
}

@media all and (min-width: 600px) {
  /* Styles for specific screen resolutions */
}

<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld"/>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen"/>

if(Browser.Platform.name == 'android' || Browser.Platform.name == 'ios') window.location = dir+mobileFolder+"/index.html"+page;

//*** Could the above be combined with the below in some way? ***

function loadcssfile(filename, filetype){
// if (filetype=="css"){
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
//}

loadcssfile("stylesheet.css", "css")