css - 如何为移动设备加载一份样式表，为台式机加载一份？

Question

我想这样做的原因是我们的“桌面版本”上有我想隐藏的下拉菜单（因为它们在触摸屏设备上不能很好地工作）并显示一个简化的菜单“基本”链接。

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

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

if mobileDevice then load mobile.css
else
load desktop.css

只是基本的想法:-)

Answer 1

使用media特定于屏幕的属性，例如

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

对于手持设备，您可以使用它

<link rel="stylesheet" media='screen and (min-width: 200px) and (max-width: 400px)' href='stylesheet.css' />

或者

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

或者，如果您愿意，可以使用@media 查询来定位特定的屏幕分辨率，而不是简单地拥有 1 个样式表，但您可以像这样为不同的屏幕定义样式

@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 */
}

Answer 2

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

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")

Answer 3

尝试这个：

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