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定位设备。但这并不是真正针对浏览器。所以答案是否定的。这需要了解的不仅仅是浏览器的宽度，高度或方向。即使你可以，我也不确定你是否愿意，因为它不是一个非常干净的解决方案IMO。

如果您绝对必须按设备定位，则需要使用服务器或浏览器端代码。以下是一些非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和一些操作系统/设备嗅探。

针对特定移动设备正在将样式转移到另一个目标设备

2 个答案: