瞄准特定的移动设备是将样式传递到另一个目标设备

Question

我正在做一个业余项目，并使用Bourbon Neat作为我的网格。我有一些针对特定移动设备(如iPhone 5、iPhone 6和iPhone 6 Plus)的媒体查询。我的问题是，我是否能够针对特定的设备，而不将样式转移到另一个设备?例如，我为iPhone 6和iPhone 6+设置了一个媒体查询。以下是我的媒体查询:

/* iPhone 6+ in portrait & landscape */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {
  /* STYLES GO HERE */
}
/* iPhone 6+ in landscape */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) {
  /* STYLES GO HERE */
}
/* iPhone 6+ in portrait */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
  /* STYLES GO HERE */
}
/* iPhone 6 in portrait & landscape */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
  /* STYLES GO HERE */
}
/* iPhone 6 in landscape */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
  /* STYLES GO HERE */
}
/* iPhone 6 in portrait */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
  /* STYLES GO HERE */
} 

我想说的是，我在iPhone 6横向媒体查询中所做的一些更改似乎适用于iPhone 6 Plus横向，iPhone 6媒体查询的更改将覆盖我的iPhone 6 Plus更改。同样，我是否能够只针对特定设备而不将这些更改应用于具有类似像素宽度的其他设备?任何和所有的帮助或反馈是非常感激。谢谢你。

Answer 1

再一次，我能够只针对一个特定的设备没有那些其他类似像素宽度的设备也会有变化吗?

回答你的具体问题，你不能通过CSS的设备目标，除了使用宽度，高度等。但这并不是真正针对浏览器。所以答案是否定的。这需要知道的不仅仅是浏览器的宽度、高度或方向。即使你可以，我不确定你是否想要，因为在我看来，这不是一个非常干净的解决方案。

如果你绝对必须通过设备进行定位，你需要使用服务器端或浏览器端代码。这里有一些非css的解决方案，如果你想看看他们:

1)你可以使用javascript:http://hgoebl.github.io/mobile-detect.js/

2)或者你可以使用服务器端库，如:http://mobiledetect.net/

但更好的解决方案是构建CSS以确保样式不会相互覆盖

Answer 2

您可以找到您正在尝试的设备分辨率，并在您的媒体查询中更具体。例如，要在纵向模式下定位ipad:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait)" {
  /* styles */
}

或者对于横向模式的ipad:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
  /* styles */
}

然而，使用这种技术并不能保证你最终不会将样式应用到具有相同分辨率的另一个设备上。最安全的方法是使用javascript和一些操作系统/设备嗅探。