Fatal编程技术网
  • css/
  • 使用CSS检测不同的设备平台

使用CSS检测不同的设备平台

css

使用CSS检测不同的设备平台,css,mobile-devices,platform-detection,Css,Mobile Devices,Platform Detection,我想说的是，我已经阅读并尝试了许多不同的说明： 我想让我的页面根据所使用的设备使用不同的CSS文件。我已经看到了许多解决方案，都使用了上述的某种形式 然而，当在HTC Desire上进行测试时，我总是得到iPad的预期输出或完全未过滤的输出。目前，我的测试代码基于： http://www.cloudfour.com/ipad-css/ 这是我的HTML文件： <html> <head> <title>orientation and

我想说的是，我已经阅读并尝试了许多不同的说明：

我想让我的页面根据所使用的设备使用不同的CSS文件。我已经看到了许多解决方案，都使用了上述的某种形式

然而，当在HTC Desire上进行测试时，我总是得到iPad的预期输出或完全未过滤的输出。目前，我的测试代码基于：

http://www.cloudfour.com/ipad-css/
这是我的HTML文件：

<html>
<head>
    <title>orientation and device detection in css3</title>

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />

    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />

    <link rel="stylesheet" media="all and (device-width: 480px) and (device-height: 800px) and (orientation:landscape)" href="htcdesire-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 480px) and (device-height: 800px) and (orientation:portrait)" href="htcdesire-portrait.css" />

    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />
</head>
<body>
    <div id="iphonelandscape">iphone landscape</div>
    <div id="iphoneportrait">iphone portrait</div>
    <div id="ipadlandscape">ipad landscape</div>
    <div id="ipadportrait">ipad portrait</div>
    <div id="htcdesirelandscape">htc desire landscape</div>
    <div id="htcdesireportrait">htc desire portrait</div>
    <div id="desktop">desktop</div>
</body>
</html>
我想知道对link元素做了哪些修改，以确保ipad只获得其样式表，iphone获得其自己的样式表，并且（在本例中）htc desire（或相同的分辨率/外观设备）获得该样式表。

好吧，在进行了一些（更多）游戏并添加了一些javascript之后，我找到了解决方案-droid设备没有使用我认为是的分辨率：

<html>
<head>
    <title>orientation and device detection in css3</title>

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />

</head>
<body>
    <div id="iphonelandscape">iphone landscape</div>
    <div id="iphoneportrait">iphone portrait</div>
    <div id="ipadlandscape">ipad landscape</div>
    <div id="ipadportrait">ipad portrait</div>
    <div id="htcdesirelandscape">htc desire landscape</div>
    <div id="htcdesireportrait">htc desire portrait</div>
    <div id="desktop">desktop</div>
    <script type="text/javascript">
        function res() { document.write(screen.width + ', ' + screen.height); }
        res();
    </script>
</body>
</html>


css3中的定位和设备检测
iphone环境
iphone人像
ipad环境
ipad人像
htc欲望景观
htc欲望肖像
桌面
函数res（）{document.write（screen.width+，'+screen.height）；}
res（）；
你是个救生员。。。一直在寻找针对iPad的媒体查询。你的例子很好用！谢谢请注意，
设备宽度
和
设备高度
说明仅在屏幕大小与给定数字完全匹配时才起作用。请注意，此代码不适用于其他大小类似的设备，因此该网站看起来完全不适合它们！如果您想支持所有其他设备（也将在将来生产），您应该为它们包含一个使用
min-
和
max-
前缀的代码。我知道这有点旧，但我尝试过，并且成功了，只不过它在左上角给了我屏幕尺寸。代码需要更改吗？像Galaxy s4和Nexus 4这样的新安卓设备现在通过了iPad的检查，因为它们有1024 x 768个显示器。 
<html>
<head>
    <title>orientation and device detection in css3</title>

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />

</head>
<body>
    <div id="iphonelandscape">iphone landscape</div>
    <div id="iphoneportrait">iphone portrait</div>
    <div id="ipadlandscape">ipad landscape</div>
    <div id="ipadportrait">ipad portrait</div>
    <div id="htcdesirelandscape">htc desire landscape</div>
    <div id="htcdesireportrait">htc desire portrait</div>
    <div id="desktop">desktop</div>
    <script type="text/javascript">
        function res() { document.write(screen.width + ', ' + screen.height); }
        res();
    </script>
</body>
</html>