在将 AngularBreakpointObserver与 结合使用时Angular Material,我尝试使用 Material Design 规范的断点(Breakpoints例如Breakpoints.LandscapePortrait,它们在 中定义Breakpoints.HandsetPortrait)。
breakpointObserver 工作,除了当我刚加载页面时。breakpointObserver 仅在观察到更改后才会触发,但考虑到它是新加载,目前还没有更改。这意味着尚未针对断点评估初始视口。我试过使用单个BreakpointObserver.isMatchedin OnInit,但这似乎没有任何效果。
我列入BreakpointObserver,Breakpoints并MediaMatcher到共享服务,这是我在所有认购组件需要“听”到断点。
我的问题是:如何确保在第一次视口更改之前评估断点(如果用户不调整窗口大小/更改设备方向,这可能根本不会发生)?
这是我的代码shared.service.ts:
import {Component, OnDestroy, OnInit, Injectable,Input,Output,EventEmitter} from '@angular/core';
import {BreakpointObserver, Breakpoints, MediaMatcher} from '@angular/cdk/layout';
@Injectable()
export class SharedService implements OnDestroy, OnInit {
public isCollapsed = false;
public isOpen = false;
public isMobileView = false;
public isTabletView = false;
private breakpointObserver: BreakpointObserver; …Run Code Online (Sandbox Code Playgroud) 我正在开发一个响应式网站,它有一个不同的移动或桌面样式表.一切看起来都不错,效果很好,直到文本输入与移动设备进行交互.他们出现了应有的表现.但是一旦点击(ehrm ..触摸),我发现Android中的浏览器开始像疯了一样滚动,打字时也是如此.但是,文本输入到输入中,并且输入上的软键盘/焦点不会丢失.
我的项目可以在这里找到:http://www.gortzfruit.nl/new/
问题是我一直在寻找解决方案一段时间,并发现类似的问题,解决方案没有为我解决.我一直在研究的一些主题和解决方案是:
https://github.com/scottjehl/Device-Bugs/issues/3 - 这里建议问题在于定位元素.特别是在固定定位元素内绝对.这在我的设计中反复出现,但一旦删除它就无法解决问题.
Android浏览器textarea滚动到处,无法使用 - 这表明问题出在css-properties -webkit-transform:translate3d(0,0,0); 和-webkit-backface-visibility:hidden;.我自己没有包含这些,但我认为我包含的Google Maps API可能会使用这些.在分析了Google Maps API生成的标记后,我发现他们也没有使用它.
当固定位置文本输入表单字段获得焦点时,如何防止滚动? - 这一个专注于试图解决问题.设置主体溢出:隐藏; 被建议在聚焦时阻止滚动,但它对我不起作用.
在javascript中禁用对输入焦点的滚动 - 这里建议在keydown上返回false可能会解决问题,我试过没有成功.这个阻止我的文本实际输入输入.
我知道这与Android中的错误有关,导致这种奇怪的滚动.但我不知道如何应对这一点.对我来说,无论我是否知道如何避免这个错误,或者我是否找到了一个黑客来使这个bug变得不可思议.我只是想在文本框上键入和聚焦/模糊时摆脱奇怪的滚动行为.
提前致谢,
吉荣