角度材质工具栏高度问题 [英] Angular material toolbar height issue

问题描述

我使用 1.1.0-RC.5 版本的角形材料.我创建了简单的工具栏

</md-工具栏>

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

我注意到一件事:浏览器高度应该大于 274p 才能重现这种行为.

<块引用>

这是一个问题吗?
是否可以禁用工具栏resing?

解决方案

您遇到的行为是因为 orientation 媒体查询被触发.这一点来自angular-material.css:

 @media (min-width: 0) and (max-width: 959px) and (orientation: Portrait) {md-工具栏{最小高度:56px；}.md-工具栏工具{高度:56px；最大高度:56px；} }@media (min-width: 0) and (max-width: 959px) and (orientation: Landscape) {md-工具栏{最小高度:48px；}.md-工具栏工具{高度:48px；最大高度:48px；} }

根据 this 文档，它得到在这种情况下触发:

<块引用>

指示视口是处于横向(显示宽度大于高度)还是纵向(显示高度大于宽度)模式.

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

<块引用>

注意:此值与实际设备方向不对应.在大多数设备上以纵向打开软键盘会导致视口变得比高度更宽，从而导致浏览器使用横向样式而不是纵向样式.

I use angular material v. 1.1.0-RC.5. I created simple toolbar

<md-toolbar> </md-toolbar>

When browser width is less than 960p, toolbar change it's height to 48p. It looks logical, although I want my toolbar to be the same height all the time.
But what is really confusing for me - when browser width is less than 500p - toolbar become bigger than just before (56p)!!

One thing I noticed: browser height should be greater than 274p to reproduce this behaviour.

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

Live example (make sure that content area height is greater than 274p)

解决方案

The behavior you experience happens because the orientation media query gets triggered. This bit is from the 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; } }

According to this documentation it gets triggered in such cases:

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.

Also it contains a note which is actually your particular case:

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.

这篇关于角度材质工具栏高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！