在移動設備上更改方向時的HTML行高問題

對於我們的移動網站，我們有一個固定在屏幕底部的工具欄。當用戶將方向切換到風景時，我們將工具欄向上翻動並將其固定到屏幕的右側。在移動設備上更改方向時的HTML行高問題

的問題是，雖然在底部很容易建立固定線高度確保圖像出現在每個按鈕的居中。但在右邊的按鈕將高度變化因爲按鈕設置使用百分比。

問題：是否有解決方案，我可以在不使用腳本的情況下動態設置行高。或者，有沒有其他解決方案不會失去我的工具欄？

編輯：我創建了以下非常基本的小提琴來說明我們正在做什麼。如果您拖動分隔條結果窗口的左側較寬和較小的你會看到效果的應用方式：http://jsfiddle.net/BMD8z/

<div id="target-mobile"> 
    <div class="panel menu-track">track form</div> 
    <div class="panel menu-phone"> <a href="tel:800-000-0000">Click to Call (800-000-0000)</a> 

    </div> 
    <div class="panel menu-search">Search box</div> 
    <div id="toolbar"> 
     <div class="container_12 clearfix"> 
      <div class="grid_3"><a href="/ship" class="menu-ship button-red">ship</a> 
      </div> 
      <div class="grid_3"><a href="#" class="menu-track button-blue">track</a> 
      </div> 
      <div class="grid_2"> <a href="#" class="menu-phone"> 
         <img src="http://bounce.nedoweb.com/Sitefinity/WebsiteTemplates/Default/App_Themes/Default/Images/mobile/icon-phone.png" alt="Click here to call us" /></a> 

      </div> 
      <div class="grid_2"> <a href="#" class="menu-search"> 
         <img src="http://bounce.nedoweb.com/Sitefinity/WebsiteTemplates/Default/App_Themes/Default/Images/mobile/icon-search.png" alt="Click here to search the site" /></a> 

      </div> 
      <div class="grid_2"> <a href="#" class="menu-menu"> 
         <img src="http://bounce.nedoweb.com/Sitefinity/WebsiteTemplates/Default/App_Themes/Default/Images/mobile/icon-menu.png" alt="Click here for the site menu" /></a> 

      </div> 
     </div> 
    </div> 
</div> 
<div class="panel menu-menu clearfix"> 
    <ul> 
     <li>menu 1</li> 
     <li>menu 2</li> 
    </ul> 
</div>

感謝，雅克

來源

2013-07-05 Jacques

你能不能展示一些代碼來演示這個問題，以便我們能夠準確地幫助你？ –

嗨Wesley，我已經添加了一些代碼以及小提琴。 – Jacques

您可以將不同的CSS規則您的內容取決於使用媒體查詢的設備方向。

@media screen and (orientation:portrait) { 
    // portrait styles 
} 

@media screen and (orientation:landscape) { 
    // landscape styles 
}

來源

2013-07-08 12:36:59 thibauts

謝謝Thibauts，但問題不在於應用不同的媒體查詢。我們已經這樣做了，它更像是一種能夠使用固定高度線條高度的人像模式，而您不能使用風景。我將編輯我的帖子來演示 – Jacques

期待您的編輯，因爲我認爲我已經（並解決了）相同的問題。 – thibauts

剛剛添加了一個小提琴示例的編輯。主要的一點是，水平工具欄上的按鈕效果很好，因爲您確切知道線條高度，這是垂直居中按鈕圖標所需的。垂直工具欄不同，因爲按鈕高度是可變的。 – Jacques

在移動設備上更改方向時的HTML行高問題

回答

相關問題