mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 04:53:58 +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
|
// we're not forcing many layouts
|
||||||
// if _isPortrait is null then that means
|
// if _isPortrait is null then that means
|
||||||
// the dimensions needs to be looked up again
|
// 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;
|
var win = this._win;
|
||||||
|
|
||||||
// we're keeping track of portrait and landscape dimensions
|
// we're keeping track of portrait and landscape dimensions
|
||||||
// separately because the virtual keyboard can really mess
|
// separately because the virtual keyboard can really mess
|
||||||
// up accurate values when the keyboard is up
|
// up accurate values when the keyboard is up
|
||||||
if (win.screen.width > 0 && win.screen.height > 0) {
|
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._isPortrait = true;
|
||||||
this._pW = win['innerWidth'];
|
this._pW = win['innerWidth'];
|
||||||
}
|
}
|
||||||
if (this._pH < win['innerHeight']) {
|
if (this._pH <= win['innerHeight']) {
|
||||||
|
console.debug('setting _isPortrait to true');
|
||||||
this._isPortrait = true;
|
this._isPortrait = true;
|
||||||
this._pH = win['innerHeight'];
|
this._pH = win['innerHeight'];
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} 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._isPortrait = false;
|
||||||
this._lW = win['innerWidth'];
|
this._lW = win['innerWidth'];
|
||||||
}
|
}
|
||||||
if (this._lH < win['innerHeight']) {
|
if (this._lH <= win['innerHeight']) {
|
||||||
|
console.debug('setting _isPortrait to false');
|
||||||
this._isPortrait = false;
|
this._isPortrait = false;
|
||||||
this._lH = win['innerHeight'];
|
this._lH = win['innerHeight'];
|
||||||
}
|
}
|
||||||
@ -788,7 +806,9 @@ export class Platform {
|
|||||||
timerId = setTimeout(() => {
|
timerId = setTimeout(() => {
|
||||||
// setting _isPortrait to null means the
|
// setting _isPortrait to null means the
|
||||||
// dimensions will need to be looked up again
|
// dimensions will need to be looked up again
|
||||||
|
if (this.hasFocusedTextInput() === false) {
|
||||||
this._isPortrait = null;
|
this._isPortrait = null;
|
||||||
|
}
|
||||||
|
|
||||||
for (let i = 0; i < this._onResizes.length; i++) {
|
for (let i = 0; i < this._onResizes.length; i++) {
|
||||||
try {
|
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', () => {
|
it('should set core as the fallback', () => {
|
||||||
plt.setDefault('core');
|
plt.setDefault('core');
|
||||||
plt.setQueryParams('');
|
plt.setQueryParams('');
|
||||||
|
Reference in New Issue
Block a user