元素无法从纵向切换到横向 ipad

Posted 2023-03-12

【中文标题】元素无法从纵向切换到横向 ipad

【英文标题】：elements not going to proper position switching from portrait to landscape ipad

【发布时间】：2015-02-27 01:20:12

【问题描述】：

我在横向和纵向模式下对 ipad 进行媒体查询，以便在每个视图中以某种方式定位元素。我的一切看起来都应该是这样，但是当我从纵向旋转到横向时，设计就会中断。如果我在横向上刷新，正确的布局会卷土重来，但我不明白为什么它会从纵向变为横向。从横向旋转到纵向时我没有任何问题。

这是 html

<main class="cf container">
    <section class="cf weather-forecast">
        <div class="loc-time">
            <h1 id="location"></h1>
            <p class="day" id="day"></span></p>
        </div>

        <div class="cf main-forecast">
            <p class="temp" id="temp"></p>
            <p class="summary" id="summary"></p>
            <p class="icon" data-icon="" id="icon"></p>
        </div>

        <hr>

        <div class="sub-forecast">
            <p>Feels Like <span class="sub-forecast--feels" id="feels"></span></p>
            <p>Windspeed <span class="sub-forecast--wind" id="wind"></span></p>
            <p>Humidity <span class="sub-forecast--humidity" id="humidity"></span></p>
        </div>

        <footer>
            <p>Weather source <a href="http://www.weather.com/"></a>weather.com</p>
        </footer>
    </section>
</main>

and CSS
     body,
    html 
  background-color: #ffffff;
  height: 100%;


body 
  font-family:"Apercu Light", Calibri, sans-serif;
  font-size: 100%;
  font-size-adjust:0.508;
  font-style:normal;
  font-weight:200;


.container 
  min-height: 100%;
  margin: 0 auto;
  position: relative;
  width: 80%; /* 1280 / 16 */


.day 
  font-size: 1.000em;


.icon 
  font-size: 4.688rem;
  margin-left: 5.21472392638%;
  top: 4.063rem;


#location 
  font-size: 1.500em;


.icon,
.summary 
  position: absolute;


.icon,
.temp,
.summary 
  display: inline-block;


.summary 
  font-size: 1.063em;
  margin-left: 5.36809815951%;
  top: 1.875em;


.main-forecast 
  position: relative;
  margin-bottom: 1.250em;
  margin-top: 2.188em;


.sub-forecast 
  margin-top: 1.875em;
  width: 40%;
  max-width: 222px;


.sub-forecast > p 
  line-height: 24px;


.sub-forecast--feels 
  margin-left: 43.2432432432%; /* 96 / 252 */


.sub-forecast--humidity 
  margin-left: 45.045045045%; /* 100 / 222 */


.sub-forecast--wind 
  margin-left: 38.2882882883%;


.temp 
  font-size: 8.438em;


.temp-fahrenheit 
  font-size: 2.188rem;
  margin-left: 1.250rem;
  vertical-align: super;


.weather-forecast 
  margin-left: 8.875em;
  margin-top: 20.438em;
  width: 50.9375%; /* 652 / 1280 */


footer 
  bottom: 0;
  font-family:"Apercu Regular", Calibri, sans-serif; 
  font-size: 0.688em;
  font-weight:normal;
  position: fixed;


/*--------------------------media Queries----------------------------------------*/

/***** 
  Tablet
*****/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) 
  .sub-forecast 
    min-width: 238px;
  

  .weather-forecast 
    margin-top: 12.188em;
  
 /* end @media max-width: 728px orientation: landscape */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) 
  .icon 
    padding-top: 10px;
  

  .icon,
  .summary 
    margin: 0;
    position: static;
  

  .icon,
  .temp,
  .summary 
    display: block;
  

  .sub-forecast 
    min-width: 240px;
  

  .weather-forecast 
    margin-top: 16.500em;
  
 /* end @media max-width: 1024px orientation: portrait */

【问题讨论】：

也许问题隐藏在视口中……没有代码示例很难说 ;-)

当然。刚刚添加了代码。

这是我使用的视口

【参考方案1】：

我想知道如果您所说的与字体大小有关的问题发生了变化，请尝试将此行添加到您的 CSS 中，如果有帮助的话。

body  -webkit-text-size-adjust: none; 

编辑：问题可能实际上与position: absolute; 相关，没有设置特定位置，并且在切换方向时会混淆。尝试将其添加到全局 CSS 中（不在媒体查询中）：

.icon,
.summary 
  position: absolute;
  top: 0; /*new*/
  right: 0; /*new*/

如果仍然无法正常工作，请尝试将代码添加到 landscape 媒体查询中。

【讨论】：

试过了，没用。具体来说，这是什么问题

您有实时站点吗？否则，很难看到那里到底发生了什么。

我没有直播。我刚刚尝试创建一个严重错误的 github 页面。

发现了一些东西并更新了我的答案，试试看是否可以解决它。

谢谢。那成功了；为绝对定位元素声明右值和上值。