相关疑难解决方法(0)
CSS媒体查询 - 软键盘打破了CSS定位规则 - 替代解决方案？
我正在使用多个平板电脑设备 - 都是Android 和iOS.目前我对所有平板电脑都有以下分辨率变化.
- 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 …72
推荐指数
推荐指数
5
解决办法
解决办法
4万
查看次数
查看次数