CSS媒体查询 - 软键盘打破了CSS定位规则 - 替代解决方案？键盘、解决方案、规则、媒体

2023-09-04 03:23:20 作者：我還在

我正与多个平板设备 - 无论是安卓和iOS 。目前，我有如下决议变化对所有的平板电脑。

I am working with multiple tablet devices - both Android and iOS. Currently I have following resolution variations for all the tablets.

在1280 * 800 在1280 * 768 1024×768（新iPad显然） - iPad不存在此问题 1280 x 800 1280 x 768 1024 x 768 (iPad Obviously) - iPad does not have this issue

最简单的方法适用设备方向为主的风格是使用下面的语法使用媒体查询的方向。

Simplest way to apply device orientation based style is to use media query's orientation using following syntax.

@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/

This works perfectly fine on all tablet devices. BUT, the problem is, when device is in portrait mode and user taps on any input field (eg. search) the soft-keyboard pops up - which reduces the visible area of web page and forces it to render in landscape based css. On android tablet devices, it depends on keyboard's height. So, ultimately the web page looks broken. Therefore, I can't use CSS3's orientation media query to apply styles based on orientation (unless there is better media query to target orientation). Here is a fiddle http://jsfiddle.net/hossain/S5nYP/5/ which emulates this - for device testing use full test page - http://jsfiddle.net/S5nYP/embedded/result/

下面是从演示页面所采取的行为的屏幕截图。

Here is a screenshot of the behaviour taken from the demo page.

那么，有没有任何替代takle这个问题，我愿意基于JavaScript的解决方案，如果本机基于CSS的解决办法是行不通的。

So, is there any alternative to takle this issue, I'm open to JavaScript based solution if native CSS based solution does not work.

我发现http://davidbcalhoun.com/2010/dealing-with-device-orientation这表明对，并基于该目标添加类。例如：

I found a snippet on http://davidbcalhoun.com/2010/dealing-with-device-orientation which suggests to add class on and target based on that. For example:

<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; }

你们有什么考虑呢？你有更好的解决办法？

What do you guys think about this? Do you have better solution?

CSS媒体查询 - 软键盘打破了CSS定位规则 - 替代解决方案？键盘、解决方案、规则、媒体

推荐答案