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

问题描述

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

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

<md-toolbar> </md-toolbar>

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

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)!!

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

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

有问题吗?
可以禁用工具栏resing吗?

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

实时示例(确保内容区域的高度大于274p)

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

推荐答案

您遇到的行为是由于触发了orientation媒体查询而发生的. 该位来自angular-material.css:

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屋！