个人中心
gpt4 book ai didi

html - Cordova 应用程序 mdc-app-bar 不会一直到顶部。造型乱了

转载 作者：行者123 更新时间：2023-11-28 01:18:52 24 4
gpt4 key购买 nike

我在 Zebra(Android) 设备上有一个 cordova 应用程序，它在调整屏幕尺寸方面做了一些奇怪的事情，它的样式与它在 chrome 中的外观不同。我们正在使用 Angular 6 Here is what it is supposed to look like and does look like in chrome:

Then here is what it is looking like on the Zebra device:

有办法解决这个问题吗？我们正在使用这个库中的 mdc-app-bar: https://trimox.github.io/angular-mdc-web/#/home

这是我的 navigation-bar-component.html 代码

    <mdc-app-bar [primary]="true" [fixed]="false">
  <mdc-app-bar-row class="mat-elevation-z2">
    <mdc-app-bar-section align="start">
      <mdc-icon (click)="sidenav.open()" mdcAppBarNavIcon>menu</mdc-icon>
      <mdc-app-bar-title>{{title}}</mdc-app-bar-title>
    </mdc-app-bar-section>
  </mdc-app-bar-row>
</mdc-app-bar>

这是我的导航栏组件.scss

span {
  padding-left: 10px;
}

.mdc-top-app-bar {
  position: relative;
  z-index: 4;
}

mdc-app-bar-title {
  color: rgba(0, 0, 0, 0.87);
}

mdc-app-bar {
  background-color: #ffcc00;
}

mdc-app-bar-section {
  background-color: #ffcc00;
}

mdc-app-bar-row {
  background-color: #ffcc00;
}

mdc-icon {
  color: rgba(0, 0, 0, 0.87) !important;
}

然后这是我的 app.component.html 中的代码

  <mdc-drawer #sidenav drawer='temporary' [closeOnClick]="false">
  <mdc-drawer-header>
    <mdc-drawer-header-content>
      <span flex></span>
      <div layout="row">
        <div class="logo-click-target"></div>
      </div>
      <span flex></span>
      <div class="row" (click)="toggleState()" [ngClass]="flip ? 'clicked' : 'flipReverse'">
        <div class="user-information">
          <div class="md-body-2">Firstname Lastname</div>
          <div class="md-body-1">email@domainname.com</div>
        </div>
        <div class="dropArrowButton">
          <mdc-icon [ngClass]="flip ? 'flip' : 'flipReverse'">arrow_drop_down</mdc-icon>
        </div>
      </div>
    </mdc-drawer-header-content>
  </mdc-drawer-header>
  <mdc-drawer-content>
    <div [ngClass]="!flip ? 'navListEnter' : 'navListExit'">
      <mdc-list-group>
        <h3 mdcListGroupSubheader>Mobile Terminal</h3>
        <mdc-list>
          <mdc-list-item (click)="goToPage('track-selection')" routerLinkActive="active">
            <mdc-list-item-text>Track Update</mdc-list-item-text>
          </mdc-list-item>
        </mdc-list>
      </mdc-list-group>
    </div>
    <div [ngClass]="flip ? 'userListEnter' : 'userListExit'" class="listElements">
      <mdc-list-group>
        <h3 mdcListGroupSubheader>User Settings</h3>
        <mdc-list>
          <mdc-list-item>
            <mdc-list-item-text>Settings</mdc-list-item-text>
          </mdc-list-item>
          <mdc-list-item>
            <mdc-list-item-text>Logout</mdc-list-item-text>
          </mdc-list-item>
        </mdc-list>
      </mdc-list-group>
    </div>
  </mdc-drawer-content>
</mdc-drawer>
<app-navigation-bar [sidenav]="sidenav"></app-navigation-bar>
<router-outlet></router-outlet>

这是我的 app.component.scss 文件

$device-width: 360px;

.example-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
}

[flex] {
  box-sizing: border-box;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.side-nav {
  width: 256px;
}

.md-body-1 {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 20px;
}

mdc-drawer-header-content {
  background-color: white !important;
  border-bottom: 1px #ddd solid;
  color: rgba(0, 0, 0, 0.87);
}

mdc-icon {
  color: rgba(0, 0, 0, 0.87) !important;
}

.md-body-2,
md-list .md-subheader,
md-list-item.md-2-line .md-list-item-text h4,
md-list-item.md-2-line .md-list-item-text p,
md-list-item.md-2-line > .md-no-style .md-list-item-text h4,
md-list-item.md-2-line > .md-no-style .md-list-item-text p,
md-list-item.md-3-line .md-list-item-text h4,
md-list-item.md-3-line .md-list-item-text p,
md-list-item.md-3-line > .md-no-style .md-list-item-text h4,
md-list-item.md-3-line > .md-no-style .md-list-item-text p {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 24px;
}

mat-toolbar {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  z-index: 2;
  font-size: 20px;
  min-height: 64px;
  width: 100%;
}

.mat-nav-list a.active {
  background: blue;
}

mat-sidenav > mat-toolbar {
  padding: 15px;
  height: 150px;
  max-height: 150px;
}

:host .logo-click-target {
  width: var(--application-header-logo-width, 50px);
  height: var(--application-header-logo-width, 50px);
  background-position-x: 5px;
  background-position-y: 5px;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.or…0%200%202.308-6.42c-.002-2.655-.823-4.803-1.674-6.87z%22%2F%3E%3C%2Fsvg%3E);
  background-image: var(
    --up-header-logo,
    url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2240%22%20viewBox%3D%220%200%2036%2040%22%3E%3Cpath%20fill%3D%22%2300309B%22%20d%3D%22M26.607.132a18.726%2018.726%200%200%201-18.177%200L8.193%200%20.96%207.717l.242.238a7.36%207.36%200%200%201%202.205%205.275c0%201.95-.74%203.74-1.522%205.633C.958%2021.105%200%2023.423%200%2026.405c0%203.197%201.406%206.23%203.86%208.316%202.923%202.486%205.972%202.69%208.42%202.85%202.217.146%203.967.26%204.938%201.918l.3.513.3-.512c.972-1.656%202.722-1.77%204.938-1.918%202.45-.16%205.498-.364%208.423-2.85a10.915%2010.915%200%200%200%203.856-8.315c0-2.982-.958-5.3-1.885-7.542-.782-1.893-1.52-3.682-1.52-5.633a7.36%207.36%200%200%201%202.205-5.275l.24-.238L26.847%200l-.24.132z%22%2F%3E%3Cg%20fill%3D%22%23FFF%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.093%2018.154v14.673l-.008-.004A10.298%2010.298%200%200%200%205.717%2035.1V18.152H3.093z%22%2F%3E%3Cpath%20d%3D%22M8.345%2018.154V36.24c.894.243%201.768.368%202.618.447V18.154H8.345zm5.243%200v18.73l.188.02c.568.06%201.103.147%201.594.288.296.084.58.19.85.324V18.154h-2.632zm5.228%200v19.362c.27-.133.554-.24.85-.324a9.23%209.23%200%200%201%201.593-.288l.187-.02v-18.73h-2.632zm5.258%200v18.533c.85-.08%201.724-.204%202.616-.447V18.154h-2.616z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M31.942%2018.154H29.32v16.944a10.8%2010.8%200%200%200%201.35-.973c.466-.396.895-.83%201.282-1.303l-.01.004V18.154z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M3.016%2018.154c-.183.457-.372.915-.563%201.383C1.603%2021.602.78%2023.75.78%2026.405c0%202.44.873%204.677%202.313%206.426V18.156h-.077zm2.7%200v16.942c.886.54%201.757.9%202.63%201.14v-18.08h-2.63zm5.247%200V36.7c.362.035.73.048%201.08.07.537.037%201.054.068%201.545.115v-18.73h-2.625zm5.257%200V37.52a3.85%203.85%200%200%201%201.298%201.032c.374-.46.812-.79%201.3-1.032V18.154H16.22zm5.228%200v18.73c.49-.046%201.008-.077%201.543-.114.354-.022.72-.035%201.085-.07V18.155H21.45zm5.242%200v18.083c.873-.24%201.743-.6%202.63-1.14V18.153h-2.63zm5.33%200h-.077V32.83a10.075%2010.075%200%200%200%202.313-6.425c0-2.654-.82-4.803-1.672-6.868-.19-.468-.38-.926-.563-1.383z%22%20fill%3D%22%23CE0000%22%2F%3E%3Cg%20fill%3D%22%23FFF%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.84%2013.15c-.016-.628.446-1.058%201.022-1.072.29-.007.663.143%201.05.244v-1.15c-.186-.117-.69-.26-1.007-.26-1.177%200-2.217.89-2.217%202.225s1.04%202.23%202.217%202.23c.317%200%20.82-.145%201.007-.26v-1.152c-.387.1-.76.25-1.05.244-.575-.016-1.037-.446-1.02-1.073v.02z%22%2F%3E%3Cpath%20d%3D%22M17.793%205.44h-1.23v4.18h1.23V5.44m-6.106%204.18h1.182V7.514h.01L14.3%209.62h1.343V5.44H14.37v2.21h-.01l-1.426-2.21h-1.248v4.18M9.55%205.438h1.21v2.327c0%20.532-.022%201.06-.44%201.46-.352.34-.904.46-1.396.46-.49%200-1.043-.12-1.395-.46-.42-.4-.443-.928-.443-1.46V5.438h1.21v2.028c0%20.538-.077%201.125.626%201.125s.625-.585.625-1.123v-2.03z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.638%207.538c0-.572.47-1.036%201.046-1.036s1.046.464%201.046%201.036-.47%201.035-1.046%201.035-1.046-.463-1.046-1.035zm-1.173%200c0-1.213.993-2.197%202.22-2.197s2.218.985%202.218%202.2c0%201.212-.993%202.195-2.22%202.195s-2.218-.983-2.218-2.196z%22%2F%3E%3Cpath%20d%3D%22M23.617%209.62H24.8V7.514h.012L26.23%209.62h1.34V5.44H26.3v2.21h-.012l-1.423-2.21h-1.248v4.18M24.91%2011h-1.228v4.178h1.23v-4.18m-2.072.937V11h-2.842v4.178h1.24v-1.455h1.6v-.98h-1.6v-.808h1.6M19.07%2011h-1.23v4.178h1.23v-4.18%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M26.882%2013.15c-.017-.628.444-1.058%201.02-1.072.29-.007.664.143%201.05.244v-1.15c-.185-.117-.688-.26-1.007-.26-1.176%200-2.217.89-2.217%202.225s1.04%202.23%202.217%202.23c.318%200%20.822-.145%201.008-.26v-1.152c-.387.1-.762.25-1.05.244-.576-.016-1.037-.446-1.02-1.073v.02zm-15.115.36l-.43-1.34-.447%201.34h.877zm-1.217.95l-.254.718H9.134l1.508-4.18h1.384l1.508%204.18H12.37l-.253-.72H10.55zm-3.46-2.53h.734a.44.44%200%200%201%20.438.44c0%20.24-.196.502-.44.502h-.73v-.942zm.815-.93c.78%200%201.406.63%201.406%201.41s-.63%201.413-1.41%201.413h-.81v1.356H5.944V11h1.963z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M32.584%2019.537c-.19-.468-.38-.926-.563-1.383H3.018c-.183.457-.372.915-.563%201.383C1.604%2021.602.78%2023.75.78%2026.405c0%202.438.87%204.672%202.31%206.42l-.004-.002c.387.472.815.906%201.28%201.303.443.377.905.695%201.352.97.885.542%201.756.902%202.628%201.142.894.245%201.768.37%202.618.45.362.034.73.06%201.08.083.537.04%201.054.07%201.545.117l.186.02c.568.06%201.103.146%201.594.287.297.084.58.193.85.327.487.243.927.574%201.3%201.033.373-.46.81-.79%201.298-1.03.27-.134.554-.24.85-.325a8.952%208.952%200%200%201%201.593-.288l.19-.023c.49-.047%201.01-.078%201.544-.115.352-.022.72-.05%201.083-.083.85-.08%201.724-.207%202.616-.45.873-.24%201.743-.6%202.63-1.14a10.8%2010.8%200%200%200%201.35-.974c.466-.396.895-.83%201.282-1.303l-.005.002a10.078%2010.078%200%200%200%202.308-6.42c-.002-2.655-.823-4.803-1.674-6.87z%22%2F%3E%3C%2Fsvg%3E')
  );
}

.mat-toolbar-row,
.mat-toolbar-single-row {
  align-items: end;
  white-space: nowrap;
}

.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 3px 8px;
  border-radius: 5px;
  .user-information {
    flex-grow: 1;
    color: rgba(0, 0, 0, 0.87);
  }
  .dropArrowButton {
    flex-shrink: 1;
    color: #fff;
    align-self: center;
    position: relative;
    top: 4px;
  }
}

.mat-list .mat-list-item,
.mat-nav-list .mat-list-item,
.mat-selection-list .mat-list-item {
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  margin: 0 10px;
}

.mat-list-item:focus,
.mat-menu-item:focus {
  outline: none;
}

.flip {
  animation: flip 200ms ease-in forwards;
}
.flipReverse {
  animation: reverse 200ms ease-in-out forwards;
}
.userListEnter {
  animation: 'userListEnter' 100ms ease-in forwards;
}
.userListExit {
  animation: 'userListExit' 100ms ease-in-out forwards;
  display: none;
}
.navListEnter {
  animation: 'navListEnter' 100ms ease-in forwards;
}
.navListExit {
  animation: 'navListExit' 100ms ease-in-out forwards;
  display: none;
}

.clicked {
  background-color: rgba(0, 51, 153, 0.08);
}

// WILL NEED REPLACING - PLACEHOLDER

// END

.mdc-drawer--temporary .mdc-drawer__header-content {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  flex-direction: column;
  bottom: 0;
  left: 0;
  align-items: normal;
  box-sizing: border-box;
  padding: 16px;
}

@keyframes flip {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-180deg);
  }
}

@keyframes reverse {
  from {
    transform: rotate(-180deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes navListEnter {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes navListExit {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

@keyframes userListEnter {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes userListExit {
  0% {
    opacity: 1;
  }

  100% {
    display: none;
    opacity: 0;
  }
}

@media only screen and (max-width: $device-width) {
  .side-nav {
    width: calc(#{$device-width} - 56px);
  }
}

最佳答案

在我的 index.html 中，包括这一行修复了它:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

关于html - Cordova 应用程序 mdc-app-bar 不会一直到顶部。造型乱了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51639103/

24 4 0
文章推荐： html - 是什么让第一段和第二段向左浮动？
文章推荐： javascript - jquery Accordion 式页面选项卡导航
文章推荐： html - 图像设置为适合 'grandparent' 但隐藏在 'parent' 内
文章推荐： css - @font-face 在使用 src : url(data:font) 时不通过 h​​ttps 加载
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com