Javascript 具有高分辨率智能手机和平板电脑的响应式CSS

当我试图使web应用程序响应屏幕大小时，我遇到了一个问题

我有用于智能手机（iPhone、Andriod、blackberry、windows phone）的css，也有用于平板电脑的css

我的测试设备是iPad3（768x1024）和黑莓10（768x1280）。宽度相同是一个问题，因为我的css以：

@media screen and (max-width:768px){
    //enter code here`code here
}

因为blackberry的分辨率稍好一些，所以它呈现了我不想使用的CSS。是否有其他方法可以检查媒体类型？我想知道是否有办法用可测量的距离（厘米或英寸）检查宽度。不知道如何解决这个问题

---

提前感谢

您还可以将您的样式限制在以下高度：

@media screen and (max-width:768px) and (max-height:1024px){
    // iPAD
}

---

CSS声明中以及浏览器报告客户端设备屏幕大小时使用的“像素”与设备屏幕上的实际现实像素无关。CSS中使用的“像素”本质上是专门为我们web开发人员创建的抽象结构。对于大多数web应用程序来说，关注高分辨率移动屏幕上真实世界像素的实际数量是完全没有必要的，只会让你发疯

您可以通过检查JavaScript中的

navigator.userAgent

属性来确定浏览器和设备类型。例如，要测试（实际上）任何移动设备：

 // if mobile === true, 99% chance the device is mobile.
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));

当然，您可以检查

navigator.userAgent

，以确定用户是否在您特别关心或有问题的特定类型的设备或浏览器上

---

但是，根据我个人的经验，聪明、简单、灵活的响应式CSS设计（当然也有媒体查询和JavaScript支持）将在99%的设备/浏览器组合上完美呈现，而无需检查

navigator.userAgent

即可为单个设备创建不同的样式。

您应该在html标题中添加元标记视口：

<meta name="viewport" content="width=device-width, initial-scale=1">

总而言之：

宽度=设备宽度x像素密度

（星系S4:1080=360 x 3）

此元标记允许您捕获设备宽度而不是“伪造宽度”（360而不是1080）

一些好的读物：

---

没错，但是我如何阻止在px中具有相同宽度和高度的智能手机也使用此css？那么你想在平板电脑和手机上使用不同的样式？那是不可能的。对于

@media

，还有一些语句可能会让您走近，但您永远无法100%确定。@LinusCaldwell您可以，但维护和解析userAgent变量很难，因为它们不符合严格的规范

@media

查询会让你非常接近。黑莓10是一款手机吗？通常，高分辨率手机不会向浏览器报告其实际分辨率。高分辨率平板电脑也是如此。事实上，iPad 3不是768x1024，而是1536x2048。实际上，使用javascript/CSS媒体查询，您可以非常轻松地获取显示大小、像素密度、方向和其他元素，您只需要知道如何使用它们。@media screen和（最小分辨率：300dpi）{…}Chris，在我的javascript中，我检查了宽度和高度，这是两个设备返回的数字，我假设css在加载样式+1以获得描述性响应时也考虑了这一点。您可以使用

-o-min-device-pixel-ratio

等（在媒体查询中）更精确地确定设备等。在我们讨论这个问题时，我现在就来看看。谢谢。哦，我想那是歌剧特有的？我已经阅读了所有关于MDN的媒体查询。没有时间看其他浏览器的文档：-）对不起，是的，不同浏览器的文档有所不同，但值得一看。哦，当然。“你所知道的和看到的都是你的一生。”。我想在我的情况下，我所有的代码都将是8P