Angular material 工具栏高度问题

Question

我使用 angular material v. 1.1.0-RC.5。我创建了简单的工具栏

<md-toolbar> </md-toolbar>

当浏览器宽度小于 960p 时，工具栏将其高度更改为 48p。这看起来合乎逻辑，尽管我希望我的工具栏始终保持相同的高度。
但真正让我困惑的是 - 当浏览器宽度小于 500p - 工具栏变得比之前更大 (56p)!!

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

Is it an issue?
And is it possible to disable toolbar resing?

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 文档，在这种情况下它会被触发：

Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.

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

Note: This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.

Answer 2

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

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

只需尝试将高度设置为 8 的倍数，因为 material-设计使用的所有尺寸都是 8 的倍数。

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

Angular material 工具栏高度问题

Angular material toolbar height issue

html

css

angularjs

angular-material