css - 如何定位 Samsung tab 8.4 inch 的媒体查询

Question

如何定位 Samsung tab 8.4 英寸的媒体查询。我的代码是

    @media (device-width: 800px) and (device-height: 1280px)

当首次出现的媒体查询受到影响时。一旦将方向从纵向更改为横向并再次变回纵向，样式不会受到影响。

设备规范: http://www.gsmarena.com/samsung_galaxy_tab_s_8_4-6439.php

提前致谢

Answer 1

我无法在物理设备上测试我的解决方案，但您可以玩一下方向:

横向模式

@media only screen and (max-device-width : 1280px) and (orientation : landscape) {
/* Styles for landscape*/
}

人像模式

@media only screen and (max-device-width : 800x) and (orientation : portrait) {
/* Styles for portrait*/
}

请注意，不同的浏览器(chrome、android native 浏览器、firefox 等)以不同的方式处理媒体查询。例如，如果您使用:

@media only screen and (max-width : 480px) 

它可以在桌面 Chrome 浏览器和安卓智能手机浏览器上运行，但不能在 iPhone 上的 Safari 上运行。要使其在 Safari 上运行，您必须使用:

@media only screen and (max-device-width : 480px)

结论是您需要在物理设备上测试您的媒体查询:)有关更多信息，请查看此页面:http://www.w3.org/TR/css3-mediaqueries/