角度材质工具栏高度问题

Question

我使用角度材料v.1.1.0-RC.5。 我创建了简单的工具栏

<md-toolbar> </md-toolbar>

当浏览器宽度小于960p时，工具栏将其高度更改为48p。虽然我希望我的工具栏始终保持相同的高度，但它看起来很合乎逻辑 但是对我来说真正令人困惑的是 - 当浏览器宽度小于500p时 - 工具栏变得比以前更大（56p）!!

我注意到一件事：浏览器高度应该大于274p才能重现此行为。

  

这是一个问题吗？   是否可以禁用工具栏重定位？

Live example （确保内容区域高度大于274p）

Answer 1

您遇到的行为是因为触发了orientation媒体查询。 这个位来自angular-material.css：

    @media (min-width: 0) and (max-width: 959px) and (orientation: portrait) {
  md-toolbar {
    min-height: 56px; }
  .md-toolbar-tools {
    height: 56px;
    max-height: 56px; } }

@media (min-width: 0) and (max-width: 959px) and (orientation: landscape) {
  md-toolbar {
    min-height: 48px; }
  .md-toolbar-tools {
    height: 48px;
    max-height: 48px; } }

根据this文档，在这种情况下会触发：

  

指示视口是横向（显示器是否宽于高）或纵向（显示器高于宽度）模式。

它还包含一个实际上是您特殊情况的注释：

  

注意：此值与实际设备方向不对应。在纵向打开大多数设备上的软键盘将导致视口变得比它高，从而导致浏览器使用横向样式而不是纵向。

Answer 2

您可以在css中指定高度来解决此问题。

md-toolbar{
 min-height:64px;
 max-height:64px
}

尝试将身高设置为8的倍数，因为素材设计使用8的倍数的所有大小。

工作实例。 http://codepen.io/next1/pen/pbwjKV