모바일 장치에서 방향을 변경할 때 HTML 줄 높이 문제

Question

모바일 사이트의 경우 도구 모음이 화면 하단에 고정되어 있습니다. 사용자가 방향을 가로로 전환하면 툴바를 뒤집어 화면의 오른쪽으로 고정합니다.

문제는 바닥에있는 동안은 이미지가 버튼 각각의 중앙에 나타납니다 보장하기 위해 유선 높이을 설정하는 것은 쉽다는 것이다. 그러나 버튼이 백분율을 사용하여 설정 되었기 때문에 버튼 오른쪽에 의 키가이됩니다.

질문 : 스크립트를 사용하지 않고 선 높이를 동적으로 설정할 수있는 솔루션이 있습니까? 또는 툴바를 잃어 버리지 않는 대체 솔루션이 있습니까?

편집 : 나는 우리가하고있는 것을 설명하기 위해 다음과 같은 매우 기본적인 피들을 만들었습니다. 당신은 결과 창 왼쪽에있는 분할 막대를 드래그하면 넓은 작은 당신은 효과가 적용되는 방법을 볼 수 있습니다 : 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> 

감사합니다, 자크

Answer 1

당신은 서로 다른 CSS 규칙을 적용 할 수 있습니다 귀하의 콘텐츠는 미디어 쿼리를 사용하여 장치 방향에 따라 다릅니다.

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

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