在iPad上更改方向后，CSS元素位置的奇怪偏移 [英] Strange offset in the CSS element position after changing orientation on iPad

问题描述

我有一个为iPad开发的网页，我为不同的方向使用不同的CSS文件：

 < link REL =stylesheethref =portrait_style.cssmedia =all and（orientation：portrait）/> 
< link REL =stylesheethref =landscape_style.cssmedia =all and（orientation：landscape）/> 
  

当我从横向模式开始，然后移动到肖像，我必须添加125px绝对定位元件。当我从肖像开始时，从0开始。

当我从纵向移动到横向和背面时，它还需要偏移。

这里有一个演示，这里

我怀疑问题是在纵向模式下有一些景观元素没有改变。

解决方案

尝试使用媒体查询重新设置固定位置：

  / * portrait * / 
 @media screen and（orientation：portrait）{
。[your-selector] {
 position ：固定; 
} 
} 
 / *横向* / 
 @media屏幕和（orientation：landscape）{
。[your-selector] {
 position：固定; 
} 
} 
  

看起来当你再次设置属性时

I have a web page developed for an iPad for which I used different CSS files for different orientations:

<link REL="stylesheet" href="portrait_style.css" media="all  and (orientation:portrait)"/>
<link REL="stylesheet" href="landscape_style.css" media="all  and (orientation:landscape)"/>

When I start from landscape mode and then move to the portrait, I have to add 125px to all absolutely positioned elements. And when I start from portrait it is started from 0.

When I move from portrait to landscape and back, it again needs the offset.

There is a demo of this available here

I suspect the problem is that there some landscape element that is not changed in portrait mode.

In chrome on my PC this is not happening.

解决方案

Try setting the fixed position again with media queries:

/* portrait */
@media screen and (orientation:portrait) {
    .[your-selector]{
        position:fixed;
    }
}
/* landscape */
@media screen and (orientation:landscape) {
    .[your-selector]{
        position:fixed;
    }
}

It looks like when you set the property again it repaints it.

这篇关于在iPad上更改方向后，CSS元素位置的奇怪偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！