CSS媒体查询 - 软键盘打破CSS定向规则 - 替代解决方案？ [英] CSS Media Query - Soft-keyboard breaks css orientation rules - alternative solution?
问题描述
我使用多个平板电脑设备（Android 和iOS ）。目前我对所有平板电脑都有以下分辨率变化。
- 1280 x 800
- 1280 x 768
-
1024 x 768（iPad显然）- iPad没有此问题
应用基于设备方向的样式的最简单方法是使用以下语法使用媒体查询的方向。
@media all
{
/ *我的基于肖像的CSS这里* /
}
@media all和（orientation：landscape）
{
/ *我的基于风景的CSS这里* /
}
完美地在所有平板电脑设备。 但，问题是，当设备处于纵向模式并且用户点击任何输入字段（例如搜索）时，软键盘弹出 - 这会减少网页的可见区域，并强制它在基于风景的css中渲染。在Android平板电脑设备上，这取决于键盘的高度。
所以，最终的网页看起来破碎。因此，我不能使用CSS3的方向媒体查询基于方向应用样式（除非有更好的媒体查询到目标方向）。这是一个小调这表明添加类on和target基于。例如：
< html class =landscape>
< body>
< h1 class =landscape-only>元素标题 - 横向< / h1>
< h1 class =portrait-only>元素标题 - 纵向< / h1>
<！ - ....更多... - >
＃CSS
.landscape .landscape-only {display：block; }
.landspace .portrait-only {display：none; }
.portrait .portrait-only {display：block; }
.portrait .landscape-only {display：none; }
你们有什么想法？你有更好的解决方案吗？
我知道这是几年后，但我发现了一个很好的解决方案
对于横向媒体：
@media屏幕和（最小宽高比：13/9） *这里的风景风格* /}
对于肖像媒体：
@media screen and（max-aspect-ratio：13/9）{/ * portrait styles here * /}
完整的解决方案及其工作原理可以在这里找到 Michael Barret - Android浏览器的挑战
I am working with multiple tablet devices - both Android and iOS. Currently I have following resolution variations for all the tablets.
- 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 */
}
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.
So, is there any alternative to takle this issue, I'm open to JavaScript based solution if native CSS based solution does not work.
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?
I know this is a couple of years late but I found a great solution
For landscape media:
@media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */}
And for portrait media:
@media screen and (max-aspect-ratio: 13/9) { /* portrait styles here */}
The full solution and why it works can be found here Michael Barret - Android browser challenges
这篇关于CSS媒体查询 - 软键盘打破CSS定向规则 - 替代解决方案？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
