CSS媒体查询 - 软键盘打破了CSS定位规则 - 替代解决方案？
Hos*_*han 72 css android css3 media-queries
我正在使用多个平板电脑设备 - 都是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 { display:block; }
.landspace .portrait-only { display:none; }
.portrait .portrait-only { display:block; }
.portrait .landscape-only { display:none; }
你们怎么看待这件事？你有更好的解决方案吗？
Sea*_*dge 95
我知道这已经晚了几年但我找到了一个很好的解决方案
对于景观媒体:
@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浏览器挑战
- 这个.是.太棒了! (4认同)
- 它解决了问题，但为我在其他设备（主要是笔记本电脑和电脑）上造成了更多问题 (3认同)
- 这种解决方案非常粗糙,不适用于某些设备.例如,打开软键盘时我的手机大约为17.7/9,而许多其他设备的风景宽高比要小得多. (3认同)
- 完整的解决方案链接已损坏。 (3认同)
scu*_*ker 27
问题在于计算方向的方式:
http://www.w3.org/TR/css3-mediaqueries/#orientation
当'height'媒体特征的值大于或等于'width'媒体特征的值时,'orientation'媒体特征是'portrait'.否则'方向'是'风景'.
由于高度/宽度是在可见视口上计算的,因此软键盘显然会导致方向翻转,因为视口宽度小于高度.一种解决方案就是仅使用您的媒体查询width.这使得无论方向如何,它都能在各种设备上更加灵活,更不用说宽度/高度比方向更广泛支持.
如果你想考虑宽度而不是方向,我会用iPhone作为例子:
@media screen and (max-width: 320px) {
/* rules applying to portrait */
}
@media screen and (max-width: 480px) {
/* rules applying to landscape */
}
这种方法比方向更灵活,因为查询不仅限于支持方向的设备/用户代理,更不用说方向告诉您与宽度相比很少.
当然,如果你真的需要知道方向,最初设置类似乎只是使用它可能是你最好的选择.
mur*_*uru 14
另一种可能是使用device-aspect-ratio,保持不变.但是,在Webkit中,即使JavaScript测试对于新的宽高比返回true,旋转设备也不会使用此查询触发CSS规则的更新.这显然是由于一个错误,但我无法找到错误报告.使用组合orientation并且{min,max}-device-aspect-ratio似乎工作正常:
@media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait)
@media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape)
orientation触发器的使用按预期更新,并且使用device-aspect-ratio限制更新为方向的实际更改.
我通过上面列出的选项进行了工作,没有人为我解决问题.我切换到使用screen.availHeight,因为它提供了一致的高度结果,避免了键盘显示问题.
// Avoiding the keyboard in Android causing the portrait orientation to change to landscape.
// Not an issue in IOS. Can use window.orientation.
var currentOrientation = function() {
// Use screen.availHeight as screen height doesn't change when keyboard displays.
if(screen.availHeight > screen.availWidth){
$("html").addClass('portrait').removeClass('landscape');
} else {
$("html").addClass('landscape').removeClass('portrait');
}
}
// Set orientation on initiliasation
currentOrientation();
// Reset orientation each time window is resized. Keyboard opening, or change in orientation triggers this.
$(window).on("resize", currentOrientation);
小智 5
对我来说，这成功了：
@media screen and (max-device-aspect-ratio: 1/1), (max-aspect-ratio: 1/1){
/*Portrait Mode*/
};
虽然max-aspect-ratio只需调整窗口大小即可触发纵向模式（对于 PC 和其他仅横向的设备很有用），但max-device-aspect-ratio有助于智能手机或其他具有可变方向的设备。因为我没有声明横向模式的具体设置，所以即使max-aspect-ratio向系统报告 >1，max-device-aspect-ratio如果 Android 设备以这种方式定向，纵向模式仍然会被触发。
该1/1部分基本上意味着如果比率<=1，则进入纵向模式，否则进入横向模式。
- 当键盘出现时怎么办？ (2认同)
| 归档时间： |
|
| 查看次数： |
44841 次 |
| 最近记录： |