2个CSS文件，1个用于移动设备，1个用于计算机

Question

我有2个CSS文件，1个用于移动设备，1个用于计算机，笔记本电脑.. 见下文：

http://www.townhouseistanbul.com/skin/kevintimmer/css/tablet.css http://www.townhouseistanbul.com/skin/kevintimmer/css/large.css

仅在移动设备上加载tablet.css是否可行，而不是在用户在计算机上缩小屏幕时。

以下代码对我无效：

<link rel="stylesheet" href="http://www.townhouseistanbul.com/skin/kevintimmer/css/large.css" type="text/css" media="Screen" />
        <link rel="stylesheet" href="http://www.townhouseistanbul.com/skin/kevintimmer/css/tablet.css" type="text/css" media="handheld" />

有什么想法吗？

谢谢！

Answer 1

试试这个

<link id="stylesheet-tablet" media="(min-width: 480px) and (max-width: 979px)" href="tablet.css" type="text/css" rel="stylesheet">
<link id="stylesheet-mobile" media="(min-width: 0px) and (max-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet">

并使用此元标记

<meta name="viewport" content="width=device-width, height=device-height" />

Answer 2

您可以使用库detect mobile browsers并加载正确的CSS

Answer 3

我找到了解决方案，

使用

max-device-width

而不是

(max-width: 480px)

感谢您的帮助