我正在使用多个平板设备 - 包括安卓设备。目前,所有平板设备都有以下分辨率变化:
- 1280 x 800
- 1280 x 768
1024 x 768 (iPad明显不适用)- iPad没有这个问题
应用基于设备方向的样式的最简单方法是使用媒体查询的方向,使用以下语法。
@media all and (orientation:portrait)
{
/* My portrait based CSS here */
}
@media all and (orientation:landscape)
{
/* My landscape based CSS here */
}
这在所有平板设备上都能正常工作。但问题是,当设备处于纵向模式并且用户点击任何输入字段(例如搜索框)时,软键盘弹出,这会降低网页的可见区域并迫使其基于横向 CSS 进行渲染。在 Android 平板设备上,这取决于键盘的高度。因此,最终网页看起来会出现问题。因此,我无法使用 CSS3 的方向媒体查询根据方向应用样式(除非有更好的媒体查询来针对方向)。这里有一个代码片段http://jsfiddle.net/hossain/S5nYP/5/,可以模拟这个问题 - 用完整测试页面进行设备测试-http://jsfiddle.net/S5nYP/embedded/result/。
以下是从演示页面中获取的行为截图。
那么,有没有其他方法解决这个问题呢?如果本地 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; }
你们对这个有什么想法?你们有更好的解决方案吗?