使用角度檢測屏幕分辨率4

我一直在嘗試構建響應式導航欄，並且不希望使用媒體查詢，所以我打算使用屏幕分辨率爲*ngIF作爲標準。但一直面臨問題，因爲我無法找到有關Angular 4屏幕分辨率檢測的任何方法或文檔。我也嘗試了JavaScript方法，但不支持。使用角度檢測屏幕分辨率4

我也曾嘗試following：

constructor(platform: Platform) { 
    platform.ready().then((readySource) => { 
     console.log('Width: ' + platform.width()); 
     console.log('Height: ' + platform.height()); 
    }); 
}

這是在離子

使用和screen.availHeight

但仍然沒有成功。

來源

2017-07-27 Ronit

什麼是「平臺」？這是關於離子嗎？ –

@GünterZöchbauer該平臺是有棱角的，只是想提一下我試過的代碼。 – Ronit

['平臺']（https://ionicframework.com/docs/api/platform/Platform）是一種離子服務。所以我猜這是一個離子項目？ – robbannn

要得到它的init

public innerWidth: any; 
ngOnInit() { 
    this.innerWidth = window.innerWidth; 
}

如果你想保持更新調整大小：

@HostListener('window:resize', ['$event']) 
onResize(event) { 
    this.innerWidth = window.innerWidth; 
}

來源

2017-07-27 12:26:05

它完美地工作！非常感謝@Eduardo Vargas。 – Ronit

您可以使用此 https://github.com/ManuCutillas/ng2-responsive 希望它可以幫助:-)

來源

2017-07-27 12:24:33

的文檔Platformwidth()和height()，據說這些方法分別使用window.innerWidth和window.innerHeight。但是使用這些方法是有優勢的，因爲這些維度是緩存值，這減少了多次且昂貴的DOM讀取的機會。

import { Platform } from 'ionic-angular'; 

... 
private width:number; 
private height:number; 

constructor(private platform: Platform){ 
    platform.ready().then(() => { 
     this.width = platform.width(); 
     this.height = platform.height(); 
    }); 
}

來源

2017-07-27 13:48:19 robbannn

oug其他答案的作品，我認爲這是一個更好的解決方案 – brijmcq

使用角度檢測屏幕分辨率4

回答

相關問題