mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
fix(platform): orientation detected correctly
This commit is contained in:

committed by
Adam Bradley

parent
40b5ecba3b
commit
8840124ece
@ -564,30 +564,48 @@ export class Platform {
|
||||
// we're not forcing many layouts
|
||||
// if _isPortrait is null then that means
|
||||
// the dimensions needs to be looked up again
|
||||
if (this._isPortrait === null) {
|
||||
// this also has to cover an edge case that only
|
||||
// happens on iOS 10 (not other versions of iOS)
|
||||
// where window.innerWidth is always bigger than
|
||||
// window.innerHeight when it is first measured,
|
||||
// even when the device is in portrait but
|
||||
// the second time it is measured it is correct.
|
||||
// Hopefully this check will not be needed in the future
|
||||
if (this._isPortrait === null || this._isPortrait === false && this._win['innerWidth'] < this._win['innerHeight']) {
|
||||
var win = this._win;
|
||||
|
||||
// we're keeping track of portrait and landscape dimensions
|
||||
// separately because the virtual keyboard can really mess
|
||||
// up accurate values when the keyboard is up
|
||||
if (win.screen.width > 0 && win.screen.height > 0) {
|
||||
if (win.screen.width < win.screen.height) {
|
||||
if (win['innerWidth'] < win['innerHeight']) {
|
||||
|
||||
if (this._pW < win['innerWidth']) {
|
||||
// the device is in portrait
|
||||
if (this._pW <= win['innerWidth']) {
|
||||
console.debug('setting _isPortrait to true');
|
||||
this._isPortrait = true;
|
||||
this._pW = win['innerWidth'];
|
||||
}
|
||||
if (this._pH < win['innerHeight']) {
|
||||
if (this._pH <= win['innerHeight']) {
|
||||
console.debug('setting _isPortrait to true');
|
||||
this._isPortrait = true;
|
||||
this._pH = win['innerHeight'];
|
||||
}
|
||||
|
||||
} else {
|
||||
if (this._lW < win['innerWidth']) {
|
||||
if (this._lW > win['innerWidth']) {
|
||||
// Special case: keyboard is open and device is in portrait
|
||||
console.debug('setting _isPortrait to true while keyboard is open and device is portrait');
|
||||
this._isPortrait = true;
|
||||
}
|
||||
// the device is in landscape
|
||||
if (this._lW <= win['innerWidth']) {
|
||||
console.debug('setting _isPortrait to false');
|
||||
this._isPortrait = false;
|
||||
this._lW = win['innerWidth'];
|
||||
}
|
||||
if (this._lH < win['innerHeight']) {
|
||||
if (this._lH <= win['innerHeight']) {
|
||||
console.debug('setting _isPortrait to false');
|
||||
this._isPortrait = false;
|
||||
this._lH = win['innerHeight'];
|
||||
}
|
||||
@ -788,7 +806,9 @@ export class Platform {
|
||||
timerId = setTimeout(() => {
|
||||
// setting _isPortrait to null means the
|
||||
// dimensions will need to be looked up again
|
||||
this._isPortrait = null;
|
||||
if (this.hasFocusedTextInput() === false) {
|
||||
this._isPortrait = null;
|
||||
}
|
||||
|
||||
for (let i = 0; i < this._onResizes.length; i++) {
|
||||
try {
|
||||
|
@ -64,6 +64,115 @@ describe('Platform', () => {
|
||||
|
||||
});
|
||||
|
||||
describe('orientation', () => {
|
||||
it('Should return true if orientation is landscape', () => {
|
||||
expect(plt.isLandscape()).toEqual(true);
|
||||
});
|
||||
|
||||
it('Should return false if orientation is not landscape', () => {
|
||||
let portraitWindow: any = {
|
||||
innerWidth: 200,
|
||||
innerHeight: 300,
|
||||
screen: {
|
||||
width: 200,
|
||||
height: 300
|
||||
}
|
||||
};
|
||||
plt.setWindow(portraitWindow);
|
||||
|
||||
expect(plt.isLandscape()).toEqual(false);
|
||||
});
|
||||
|
||||
it('Should return true if orientation is landscape but window.screen shows portrait', () => {
|
||||
// Even though we do not use window.screen.height/width
|
||||
// anymore beyond checking if they are > 0
|
||||
// as that api is broken on iOS, we should still check
|
||||
// this edge case
|
||||
|
||||
let iOSLandscapeWindow: any = {
|
||||
innerWidth: 300,
|
||||
innerHeight: 200,
|
||||
screen: {
|
||||
width: 200,
|
||||
height: 300
|
||||
}
|
||||
};
|
||||
plt.setWindow(iOSLandscapeWindow);
|
||||
|
||||
expect(plt.isLandscape()).toEqual(true);
|
||||
});
|
||||
|
||||
it('Should return false if orientation is not portrait', () => {
|
||||
expect(plt.isPortrait()).toEqual(false);
|
||||
});
|
||||
|
||||
it('Should return true if orientation is portrait', () => {
|
||||
let portraitWindow: any = {
|
||||
innerWidth: 200,
|
||||
innerHeight: 300,
|
||||
screen: {
|
||||
width: 200,
|
||||
height: 300
|
||||
}
|
||||
};
|
||||
plt.setWindow(portraitWindow);
|
||||
|
||||
expect(plt.isPortrait()).toEqual(true);
|
||||
});
|
||||
|
||||
it('Should return false when orientation is landscape and then true when changed to portrait', () => {
|
||||
|
||||
// start in landscape
|
||||
expect(plt.isPortrait()).toEqual(false);
|
||||
|
||||
let portraitWindow: any = {
|
||||
innerWidth: 200,
|
||||
innerHeight: 300,
|
||||
screen: {
|
||||
width: 200,
|
||||
height: 300
|
||||
}
|
||||
};
|
||||
// change to portrait
|
||||
plt.setWindow(portraitWindow);
|
||||
|
||||
expect(plt.isPortrait()).toEqual(true);
|
||||
});
|
||||
|
||||
it('Should return true when orientation is landscape and then false when changed to portrait', () => {
|
||||
|
||||
// start in landscape
|
||||
expect(plt.isLandscape()).toEqual(true);
|
||||
|
||||
let portraitWindow: any = {
|
||||
innerWidth: 200,
|
||||
innerHeight: 300,
|
||||
screen: {
|
||||
width: 200,
|
||||
height: 300
|
||||
}
|
||||
};
|
||||
// change to portrait
|
||||
plt.setWindow(portraitWindow);
|
||||
|
||||
expect(plt.isLandscape()).toEqual(false);
|
||||
});
|
||||
|
||||
it('Should return a number that is equal to window.innerWidth', () => {
|
||||
let type = typeof plt.width();
|
||||
|
||||
expect(type).toEqual('number');
|
||||
expect(plt.width()).toEqual(window.innerWidth);
|
||||
});
|
||||
|
||||
it('Should return a number that is equal to window.innerHeight', () => {
|
||||
let type = typeof plt.height();
|
||||
|
||||
expect(type).toEqual('number');
|
||||
expect(plt.height()).toEqual(window.innerHeight);
|
||||
});
|
||||
});
|
||||
|
||||
it('should set core as the fallback', () => {
|
||||
plt.setDefault('core');
|
||||
plt.setQueryParams('');
|
||||
|
Reference in New Issue
Block a user