相关疑难解决方法(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 …推荐指数
解决办法
查看次数
如何在CSS媒体查询中说"height <width"？
这是我尝试过的代码:
@media screen and (max-height:450px) and (height<width){
.hero-text-box{
margin-top:25px !important;
}
}
推荐指数
解决办法
查看次数
仅为横向模式设置视口
我正在完成我的网站，除了一件小事外，一切都完美无缺。当我使用我的 iPhone 时，纵向模式正是我想要的，问题是横向模式。我好像已经设计过了，但我不喜欢最终版本...所以我需要插入另一行代码，但我不知道该怎么做...
这是我拥有的现在
<meta name="viewport" content="width=device-width,initial-scale=1">
现在我需要一个只为风景模式。我希望这个 ^ 一直工作，除了横向模式。在横向模式下，我想要这个：<meta name="viewport" content="height=device-height,initial-scale=1">
我的问题是我怎么说这只能在横向模式下工作？
谢谢
推荐指数
解决办法
查看次数