在移动设备上更改方向时出现 HTML 行高问题

Question

对于我们的移动网站，我们有一个固定在屏幕底部的工具栏。当用户将方向切换为横向时，我们将工具栏向上翻转并将其固定在屏幕的右侧。

问题在于，虽然在底部很容易建立固定行高以确保图像显示在每个按钮的中心。但是右边的按钮将高度不同，因为按钮是使用百分比设置的。

问题:有没有一种解决方案可以让我在不使用脚本的情况下动态设置行高。或者，有没有不涉及丢失我的工具栏的替代解决方案？

编辑:我创建了以下非常基本的 Fiddle 来说明我们正在做的事情。如果将分隔条拖动到结果窗口的左侧，使其变宽和变小，您将看到效果是如何应用的: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
}