Web 移动浏览器添加栏不'；使用Ionic滚动时不隐藏
当一个Ionic应用程序部署在网络上，你通过手机访问它时，酒吧地址永远不会消失。我知道这是因为离子内容或类似的东西，但我没有找到任何解决方法或关于这方面的信息，只有离子2在github中的一个问题Web 移动浏览器添加栏不'；使用Ionic滚动时不隐藏,web,ionic-framework,progressive-web-apps,Web,Ionic Framework,Progressive Web Apps,当一个Ionic应用程序部署在网络上，你通过手机访问它时，酒吧地址永远不会消失。我知道这是因为离子内容或类似的东西，但我没有找到任何解决方法或关于这方面的信息，只有离子2在github中的一个问题 现在还没有隐藏浏览器地址栏的方法吗？这对爱奥尼亚来说真是一个打击 我是在ionic5中做的。但我的解决方案删除了导航动画 而且不是很干净。但是没有人知道如何隐藏移动访问栏 所以，揭示我的解决方案 如果您找到更好的解决方案，请告诉我：） 在global.scss中 //mobile access bar
现在还没有隐藏浏览器地址栏的方法吗？这对爱奥尼亚来说真是一个打击 我是在ionic5中做的。但我的解决方案删除了导航动画 而且不是很干净。但是没有人知道如何隐藏移动访问栏 所以，揭示我的解决方案 如果您找到更好的解决方案，请告诉我：） 在global.scss中
//mobile access bar auto hide system
.plt-mobileweb {
ion-action-sheet {
position: fixed;
}
ion-modal {
position: fixed;
}
ion-picker {
position: fixed;
}
body {
max-height: initial;
height: initial;
overflow: scroll;
position: static;
overscroll-behavior-y: initial;
-webkit-overflow-scrolling: touch;
}
body.backdrop-no-scroll {
overflow: hidden;
}
ion-app.ion-page {
left: initial;
right: initial;
top: initial;
bottom: initial;
display: initial;
position: initial;
flex-direction: initial;
justify-content: initial;
contain: initial;
overflow: initial;
}
ion-router-outlet {
left: initial;
right: initial;
top: initial;
bottom: initial;
position: initial;
contain: initial;
z-index: initial;
overflow: initial;
}
ion-router-outlet {
.ion-page {
left: initial;
right: initial;
top: initial;
bottom: initial;
display: initial;
position: initial;
flex-direction: initial;
justify-content: initial;
contain: initial;
overflow: initial;
}
ion-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 11;
}
ion-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 11;
}
ion-content {
display: initial;
position: initial;
width: initial;
height: initial;
font-family: var(--ion-font-family, inherit);
contain: initial;
flex: initial;
margin: initial;
padding: initial;
}
ion-tabs {
display: initial;
position: initial;
top: initial;
left: initial;
right: initial;
bottom: initial;
flex-direction: initial;
width: initial;
height: initial;
contain: initial;
z-index: initial;
}
div.tabs-inner {
position: initial;
flex: initial;
contain: initial;
padding-bottom: 56px;
}
ion-tab-bar {
width: 100%;
}
ion-tab-bar[slot=top] + div.tabs-inner {
padding-bottom: 0;
}
ion-tab-bar[slot=top] {
position: fixed;
top: 0;
left: 0;
right: 0;
}
ion-tab-bar[slot=bottom] {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
}
}
@Directive({
selector: 'ion-content'
})
export class MobilewebContentDirective {
minHeight = {
ios: 50,
md: 56
}
constructor(
private el: ElementRef,
private plt: Platform
) {
}
ngOnInit() {
if(this.plt.is('mobileweb') || this.plt.is('desktop')) {
const observer = new MutationObserver(mutations => {
for(let i = 0; i < mutations.length; i++) {
const children = this.el.nativeElement.shadowRoot.children;
let main:HTMLElement | null = null;
let background:HTMLElement | null = null;
for(let i = 0; i < children.length; i++) {
if(children[i].tagName === 'MAIN') {
main = children[i];
}
if(children[i].id === 'background-content') {
background = children[i];
}
}
if(background) {
background.style.position = 'fixed';
}
if(main) {
//default setting for body scroll
observer.disconnect();
main.style.position = 'relative';
main.style.bottom = 'initial';
main.style.overflowY = 'hidden';
main.style.touchAction = 'manipulation';
main.style.width = '100%';
main.style.marginLeft = 'auto';
main.style.marginRight = 'auto';
const header = this.el.nativeElement.previousSibling;
const footer = this.el.nativeElement.nextSibling;
if(header) {
//header
main.style.marginTop = (this.plt.is('ios') ? this.minHeight.ios : this.minHeight.md) + 'px';
} else {
//tab (temperatory)
main.style.marginTop = (this.plt.is('ios') ? this.minHeight.ios : this.minHeight.md) + 'px';
}
if(footer) {
main.style.paddingBottom = (this.plt.is('ios') ? this.minHeight.ios : this.minHeight.md) + 'px';
}
//reset scroll (should add some more functions)
window.scrollTo(0, 0);
break;
}
}
});
observer.observe(this.el.nativeElement.shadowRoot, {childList: true});
}
}
}
@指令({
选择器：“离子含量”
})
导出类MobilewebContentDirective{
最小高度={
ios:50，
md:56
}
建造师(
二等兵el:ElementRef，
私人plt：平台
) {
}
恩戈尼尼特（）{
if（this.plt.is（'mobileweb'）| | this.plt.is（'desktop'））{
常量观察者=新的突变观察者（突变=>{
for（设i=0；i<0.length；i++）{
const children=this.el.nativeElement.shadowRoot.children；
让main:HTMLElement | null=null；
let background:HTMLElement | null=null；
for（设i=0；i//mobile access bar auto hide system
.plt-mobileweb {
ion-action-sheet {
position: fixed;
}
ion-modal {
position: fixed;
}
ion-picker {
position: fixed;
}
body {
max-height: initial;
height: initial;
overflow: scroll;
position: static;
overscroll-behavior-y: initial;
-webkit-overflow-scrolling: touch;
}
body.backdrop-no-scroll {
overflow: hidden;
}
ion-app.ion-page {
left: initial;
right: initial;
top: initial;
bottom: initial;
display: initial;
position: initial;
flex-direction: initial;
justify-content: initial;
contain: initial;
overflow: initial;
}
ion-router-outlet {
left: initial;
right: initial;
top: initial;
bottom: initial;
position: initial;
contain: initial;
z-index: initial;
overflow: initial;
}
ion-router-outlet {
.ion-page {
left: initial;
right: initial;
top: initial;
bottom: initial;
display: initial;
position: initial;
flex-direction: initial;
justify-content: initial;
contain: initial;
overflow: initial;
}
ion-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 11;
}
ion-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 11;
}
ion-content {
display: initial;
position: initial;
width: initial;
height: initial;
font-family: var(--ion-font-family, inherit);
contain: initial;
flex: initial;
margin: initial;
padding: initial;
}
ion-tabs {
display: initial;
position: initial;
top: initial;
left: initial;
right: initial;
bottom: initial;
flex-direction: initial;
width: initial;
height: initial;
contain: initial;
z-index: initial;
}
div.tabs-inner {
position: initial;
flex: initial;
contain: initial;
padding-bottom: 56px;
}
ion-tab-bar {
width: 100%;
}
ion-tab-bar[slot=top] + div.tabs-inner {
padding-bottom: 0;
}
ion-tab-bar[slot=top] {
position: fixed;
top: 0;
left: 0;
right: 0;
}
ion-tab-bar[slot=bottom] {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
}
}
@Directive({
selector: 'ion-content'
})
export class MobilewebContentDirective {
minHeight = {
ios: 50,
md: 56
}
constructor(
private el: ElementRef,
private plt: Platform
) {
}
ngOnInit() {
if(this.plt.is('mobileweb') || this.plt.is('desktop')) {
const observer = new MutationObserver(mutations => {
for(let i = 0; i < mutations.length; i++) {
const children = this.el.nativeElement.shadowRoot.children;
let main:HTMLElement | null = null;
let background:HTMLElement | null = null;
for(let i = 0; i < children.length; i++) {
if(children[i].tagName === 'MAIN') {
main = children[i];
}
if(children[i].id === 'background-content') {
background = children[i];
}
}
if(background) {
background.style.position = 'fixed';
}
if(main) {
//default setting for body scroll
observer.disconnect();
main.style.position = 'relative';
main.style.bottom = 'initial';
main.style.overflowY = 'hidden';
main.style.touchAction = 'manipulation';
main.style.width = '100%';
main.style.marginLeft = 'auto';
main.style.marginRight = 'auto';
const header = this.el.nativeElement.previousSibling;
const footer = this.el.nativeElement.nextSibling;
if(header) {
//header
main.style.marginTop = (this.plt.is('ios') ? this.minHeight.ios : this.minHeight.md) + 'px';
} else {
//tab (temperatory)
main.style.marginTop = (this.plt.is('ios') ? this.minHeight.ios : this.minHeight.md) + 'px';
}
if(footer) {
main.style.paddingBottom = (this.plt.is('ios') ? this.minHeight.ios : this.minHeight.md) + 'px';
}
//reset scroll (should add some more functions)
window.scrollTo(0, 0);
break;
}
}
});
observer.observe(this.el.nativeElement.shadowRoot, {childList: true});
}
}
}
@指令({
选择器：“离子含量”
})
导出类MobilewebContentDirective{
最小高度={
ios:50，
md:56
}
建造师(
二等兵el:ElementRef，
私人plt：平台
) {
}
恩戈尼尼特（）{
if（this.plt.is（'mobileweb'）| | this.plt.is（'desktop'））{
常量观察者=新的突变观察者（突变=>{
for（设i=0；i<0.length；i++）{
const children=this.el.nativeElement.shadowRoot.children；
让main:HTMLElement | null=null；
let background:HTMLElement | null=null；
for（设i=0；ioverflow scroll=“true”overflow scroll=“true”