I am working with multiple tablet devices - both Android and iOS. Currently I have following resolution variations for all the tablets.
应用基于设备方向的样式的最简单方法是使用以下语法使用媒体查询方向。
@media all and (orientation:portrait)
{
/* My portrait based CSS here */
}
@media all and (orientation:landscape)
{
/* My landscape based CSS here */
}
这在所有平板设备上都能完美运行。BUT问题是，当设备处于纵向模式并且用户点击任何输入字段（例如搜索）时，软键盘会弹出 - 这会减少网页的可见区域并强制其以基于横向的 CSS 进行渲染。在 Android 平板电脑设备上，这取决于键盘的高度。 所以，最终网页看起来已经损坏了。因此，我无法使用CSS3的方向媒体查询来应用基于方向的样式（除非有更好的媒体查询来定位方向）。这是一个小提琴http://jsfiddle.net/hossain/S5nYP/5/它模拟了这一点 - 对于设备测试，使用完整的测试页面 -http://jsfiddle.net/S5nYP/embedded/result/
Here is a screenshot of the behaviour taken from the demo page.
那么，有没有其他方法可以解决这个问题，如果基于本机 CSS 的解决方案不起作用，我愿意接受基于 JavaScript 的解决方案。
我发现了一个片段http://davidbcalhoun.com/2010/dealing-with-device-orientation这建议在此基础上添加类别和目标。例如：
<html class="landscape">
<body>
<h1 class="landscape-only">Element Heading - Landscape</h1>
<h1 class="portrait-only">Element Heading - Portrait</h1>
<!-- .... more... ->
# CSS
.landscape .landscape-only { display:block; }
.landspace .portrait-only { display:none; }
.portrait .portrait-only { display:block; }
.portrait .landscape-only { display:none; }
大家对此有何看法？您有更好的解决方案吗？
我知道这已经晚了几年，但我找到了一个很好的解决方案
对于景观媒体：
@media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */}
对于肖像媒体：
@media screen and (max-aspect-ratio: 13/9) { /* portrait styles here */}
完整的解决方案及其工作原理可以在这里找到Michael Barret - Android 浏览器挑战
编辑：此链接现已过期，但可以在互联网档案中找到快照：Michael Barret - Android 浏览器挑战