如何为移动设备加载一个样式表，并为桌面加载一个样式表？ [英] How do I load one style sheet for mobile devices and one for desktops?

问题描述

我想这样做的原因是我们在我想要隐藏的桌面版上有下拉菜单（因为它们在触摸屏设备上无法正常工作），并显示简化的菜单

The reason I'd like to do this is we have dropdown menues on our "desktop version" that i'd like to hide (because they don't work very well on a touch screen device) and show a simplified menu with just the "basic" links.

我无法使媒体查询在检测到设备时工作，因为其中一些设备的分辨率过高（Samsung Galaxy S3 for示例）。

I can't make Media Queries work when detecting a device because the resolution is too high on some of them (Samsung Galaxy S3 for example).

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

Is there a Javascript or something I can use? Something like (I don't know Javascript so this is just the idea):

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

只是基本想法： - ）

Just the basic idea :-)

推荐答案

使用媒体特定于

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

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

And for handheld devices you can use this

<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查询来指定特定的屏幕分辨率，如果你想要的话，只要有一个样式表，您可以为这样的不同屏幕定义样式

Or use @media queries to target specific screen resolutions if you want than you can simply have 1 stylesheet but you can define styles for different screens like this

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

这篇关于如何为移动设备加载一个样式表，并为桌面加载一个样式表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！