mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
fix(viewport): Auto update viewport tag
This commit is contained in:
Adam Bradley
@@ -29,6 +29,9 @@
|
||||
-iOS 6.1 Cordova no viewport height, keyboard is over webview
|
||||
-iOS 6.1 Safari no viewport height, keyboard is over webview
|
||||
|
||||
http://cordova.apache.org/docs/en/3.3.0/guide_platforms_ios_upgrading.md.html#Upgrading%20iOS
|
||||
https://issues.apache.org/jira/browse/CB-4323
|
||||
|
||||
*/
|
||||
|
||||
|
||||
@@ -42,6 +45,9 @@ describe('Ionic Viewport', function() {
|
||||
_activeElement = null; // the element which has focus
|
||||
window.cordova = undefined;
|
||||
window.device = undefined;
|
||||
window.navigator = {};
|
||||
window.innerWidth = 1;
|
||||
window.innerHeight = 2;
|
||||
ionic.Platform.ua = '';
|
||||
ionic.Platform.platforms = null;
|
||||
ionic.Platform.setPlatform('');
|
||||
@@ -59,79 +65,434 @@ describe('Ionic Viewport', function() {
|
||||
if(vportTag) vportTag.parentNode.removeChild(vportTag);
|
||||
});
|
||||
|
||||
it('Should have height=device-height for iOS 7+ on webview', function(){
|
||||
|
||||
|
||||
// iOS 7.1, iPad, WebView
|
||||
|
||||
it('Should remove width and height from viewport for iOS >= 7.1, iPad, WebView', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
ionic.Platform.ua = 'ipad';
|
||||
ionic.Platform.setVersion('7.1');
|
||||
window.cordova = {};
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no');
|
||||
});
|
||||
|
||||
|
||||
// iOS 7.1, iPad, Browser
|
||||
|
||||
it('Should remove width and height from viewport for iOS >= 7.1, iPad, Browser', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
ionic.Platform.ua = 'ipad';
|
||||
ionic.Platform.setVersion('7.1');
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no');
|
||||
});
|
||||
|
||||
|
||||
// iOS 7.0, iPad, WebView
|
||||
|
||||
it('Should keep width and height in viewport for iOS 7.0, iPad, WebView, Portrait', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
ionic.Platform.ua = 'ipad';
|
||||
ionic.Platform.setVersion('7.0');
|
||||
window.cordova = {};
|
||||
window.innerWidth = 1;
|
||||
window.innerHeight = 2;
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width, height=device-height');
|
||||
});
|
||||
|
||||
it('Should add width and height to viewport for iOS 7.0, iPad, WebView, Portrait', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
ionic.Platform.ua = 'ipad';
|
||||
ionic.Platform.setVersion('7.0');
|
||||
window.cordova = {};
|
||||
window.innerWidth = 1;
|
||||
window.innerHeight = 2;
|
||||
|
||||
vportTag.content = 'user-scalable=no';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width, height=device-height');
|
||||
});
|
||||
|
||||
it('Should add width and height=0 to viewport for iOS 7.0, iPad, WebView, Landscape', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
ionic.Platform.ua = 'ipad';
|
||||
ionic.Platform.setVersion('7.0');
|
||||
window.cordova = {};
|
||||
window.innerWidth = 2;
|
||||
window.innerHeight = 1;
|
||||
|
||||
vportTag.content = 'user-scalable=no';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width, height=0');
|
||||
});
|
||||
|
||||
it('Should keep width reset height to 0 in viewport for iOS 7.0, iPad, WebView, Landscape', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
ionic.Platform.ua = 'ipad';
|
||||
ionic.Platform.setVersion('7.0');
|
||||
window.cordova = {};
|
||||
window.innerWidth = 2;
|
||||
window.innerHeight = 1;
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width, height=0');
|
||||
});
|
||||
|
||||
|
||||
// iOS 7.0, iPad, Browser
|
||||
|
||||
it('Should keep width, but remove height from viewport for iOS 7.0, iPad, Browser', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
ionic.Platform.ua = 'ipad';
|
||||
ionic.Platform.setVersion('7.0');
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
it('Should add width, but not add height to viewport for iOS 7.0, iPad, Browser', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
ionic.Platform.ua = 'ipad';
|
||||
ionic.Platform.setVersion('7.0');
|
||||
|
||||
vportTag.content = 'user-scalable=no';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
|
||||
// iOS 6.1, iPad, WebView
|
||||
|
||||
it('Should keep width, but remove height from viewport for iOS 6.1, iPad, WebView, Portrait', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
ionic.Platform.ua = 'ipad';
|
||||
ionic.Platform.setVersion('6.1');
|
||||
window.cordova = {};
|
||||
window.innerWidth = 1;
|
||||
window.innerHeight = 2;
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
it('Should add width, but not add height to viewport for iOS 6.1, iPad, WebView, Portrait', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
ionic.Platform.ua = 'ipad';
|
||||
ionic.Platform.setVersion('6.1');
|
||||
window.cordova = {};
|
||||
window.innerWidth = 1;
|
||||
window.innerHeight = 2;
|
||||
|
||||
vportTag.content = 'user-scalable=no';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
it('Should keep width, but replace height with 0 in viewport for iOS 6.1, iPad, WebView, Landscape', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
ionic.Platform.ua = 'ipad';
|
||||
ionic.Platform.setVersion('6.1');
|
||||
window.cordova = {};
|
||||
window.innerWidth = 2;
|
||||
window.innerHeight = 1;
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width, height=0');
|
||||
});
|
||||
|
||||
it('Should add width and add height=0 to viewport for iOS 6.1, iPad, WebView, Landscape', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
ionic.Platform.ua = 'ipad';
|
||||
ionic.Platform.setVersion('6.1');
|
||||
window.cordova = {};
|
||||
window.innerWidth = 2;
|
||||
window.innerHeight = 1;
|
||||
|
||||
vportTag.content = 'user-scalable=no';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width, height=0');
|
||||
});
|
||||
|
||||
|
||||
// iOS 6.1, iPad, Browser
|
||||
|
||||
it('Should keep width, and set height=0 for viewport for iOS 6.1, iPad, Browser, Portrait', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
ionic.Platform.ua = 'ipad';
|
||||
ionic.Platform.setVersion('6.1');
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width, height=0');
|
||||
});
|
||||
|
||||
it('Should add width, and add height=0 to viewport for iOS 6.1, iPad, Browser', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
ionic.Platform.ua = 'ipad';
|
||||
ionic.Platform.setVersion('6.1');
|
||||
|
||||
vportTag.content = 'user-scalable=no';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width, height=0');
|
||||
});
|
||||
|
||||
|
||||
// iOS 7.1, iPhone, WebView
|
||||
|
||||
it('Should remove width and height from viewport for iOS 7.1, iPhone, WebView', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
ionic.Platform.setVersion('7.1');
|
||||
window.cordova = {};
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no');
|
||||
});
|
||||
|
||||
it('Should do nothing width and height already in viewport for iOS 7.1, iPhone, WebView', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
ionic.Platform.setVersion('7.1');
|
||||
window.cordova = {};
|
||||
|
||||
vportTag.content = 'user-scalable=no';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no');
|
||||
});
|
||||
|
||||
|
||||
// iOS 7.1, iPhone, Browser
|
||||
|
||||
it('Should keep width, but remove height from viewport for iOS >= 7.1, iPhone, Browser', function(){
|
||||
ionic.Platform.setPlatform('iOS');
|
||||
ionic.Platform.setVersion('7.1');
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
it('Should add width, but not height to viewport for iOS >= 7.1, iPhone, Browser', function(){
|
||||
ionic.Platform.setPlatform('iOS');
|
||||
ionic.Platform.setVersion('7.1');
|
||||
|
||||
vportTag.content = 'user-scalable=no';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
|
||||
// iOS 7.0, iPhone, WebView
|
||||
|
||||
it('Should keep width, but not height in viewport for iOS 7.0, iPhone, WebView', function(){
|
||||
ionic.Platform.setPlatform('iOS');
|
||||
ionic.Platform.setVersion('7.0');
|
||||
expect( ionic.Platform.isAndroid() ).toEqual(false);
|
||||
expect( ionic.Platform.isIOS() ).toEqual(true);
|
||||
|
||||
//so isWebView() is true
|
||||
window.cordova = {};
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
expect( viewportProperties.height ).toEqual('device-height');
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
it('Should not have height=device-height for iOS 7+ on browser', function(){
|
||||
it('Should add width, but not height to viewport for iOS 7.0, iPhone, WebView', function(){
|
||||
ionic.Platform.setPlatform('iOS');
|
||||
ionic.Platform.setVersion('7.0');
|
||||
expect( ionic.Platform.isAndroid() ).toEqual(false);
|
||||
expect( ionic.Platform.isIOS() ).toEqual(true);
|
||||
|
||||
viewportLoadTag();
|
||||
expect( viewportProperties.height ).not.toEqual('device-height');
|
||||
});
|
||||
|
||||
it('Should have height=device-height for Android on webview', function(){
|
||||
ionic.Platform.setPlatform('Android');
|
||||
expect( ionic.Platform.isAndroid() ).toEqual(true);
|
||||
expect( ionic.Platform.isIOS() ).toEqual(false);
|
||||
|
||||
//so isWebView() is true
|
||||
window.cordova = {};
|
||||
|
||||
vportTag.content = 'user-scalable=no';
|
||||
viewportLoadTag();
|
||||
expect( viewportProperties.height ).toEqual('device-height');
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
it('Should not have height=device-height for Android on browser', function(){
|
||||
ionic.Platform.setPlatform('Android');
|
||||
expect( ionic.Platform.isAndroid() ).toEqual(true);
|
||||
expect( ionic.Platform.isIOS() ).toEqual(false);
|
||||
|
||||
// iOS 7.0, iPhone, Browser
|
||||
|
||||
it('Should keep width but remove height from viewport for iOS 7.0, iPhone, Browser', function(){
|
||||
ionic.Platform.setPlatform('iOS');
|
||||
ionic.Platform.setVersion('7.0');
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
expect( viewportProperties.height ).not.toEqual('device-height');
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
it('Should not re-add height=device-height for webview if its already there', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
it('Should add width but not height to viewport for iOS 7.0, iPhone, Browser', function(){
|
||||
ionic.Platform.setPlatform('iOS');
|
||||
ionic.Platform.setVersion('7.0');
|
||||
|
||||
vportTag.content = 'user-scalable=no';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
|
||||
// iOS 6.1, iPhone, WebView
|
||||
|
||||
it('Should add width but not height to viewport for iOS 6.1, iPhone, WebView', function(){
|
||||
ionic.Platform.setPlatform('iOS');
|
||||
ionic.Platform.setVersion('6.1');
|
||||
window.cordova = {};
|
||||
var originalViewport = ' initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=device-height ';
|
||||
vportTag.setAttribute('content', originalViewport);
|
||||
|
||||
vportTag.content = 'user-scalable=no';
|
||||
viewportLoadTag();
|
||||
|
||||
// if it was changed the spaces would have been removed
|
||||
expect( vportTag.content ).toEqual(originalViewport);
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
it('Should not update the viewport if its not a webview and height=device-height wasnt already in', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
var originalViewport = ' initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width ';
|
||||
vportTag.setAttribute('content', originalViewport);
|
||||
it('Should keep width but replace height=device-height with height=0 in viewport for iOS 6.1, iPhone, WebView', function(){
|
||||
ionic.Platform.setPlatform('iOS');
|
||||
ionic.Platform.setVersion('6.1');
|
||||
window.cordova = {};
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
|
||||
// if it was changed the spaces would have been removed
|
||||
expect( vportTag.content ).toEqual(originalViewport);
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width, height=0');
|
||||
});
|
||||
|
||||
it('Should set height=0 if browser and height=device-height was already in', function(){
|
||||
ionic.Platform.setPlatform('ios');
|
||||
var originalViewport = 'initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=device-height';
|
||||
vportTag.setAttribute('content', originalViewport);
|
||||
|
||||
// iOS 6.1, iPhone, Browser
|
||||
|
||||
it('Should add width but not height to viewport for iOS 6.1, iPhone, Browser', function(){
|
||||
ionic.Platform.setPlatform('iOS');
|
||||
ionic.Platform.setVersion('6.1');
|
||||
|
||||
vportTag.content = 'user-scalable=no';
|
||||
viewportLoadTag();
|
||||
|
||||
// if it was changed the spaces would have been removed
|
||||
expect( vportTag.content ).toEqual('initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=0');
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
it('Should keep width but remove height from viewport for iOS 6.1, iPhone, Browser', function(){
|
||||
ionic.Platform.setPlatform('iOS');
|
||||
ionic.Platform.setVersion('6.1');
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width, height=0');
|
||||
});
|
||||
|
||||
|
||||
// Android 4.4, WebView
|
||||
|
||||
it('Should add width, but not height to viewport for Android 4.4, WebView', function(){
|
||||
ionic.Platform.setPlatform('android');
|
||||
ionic.Platform.setVersion('4.4');
|
||||
window.cordova = {};
|
||||
|
||||
vportTag.content = 'user-scalable=no';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
it('Should keep width, but remove height from viewport for Android 4.4, WebView', function(){
|
||||
ionic.Platform.setPlatform('android');
|
||||
ionic.Platform.setVersion('4.4');
|
||||
window.cordova = {};
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
|
||||
// Android 4.4, Browser
|
||||
|
||||
it('Should add width, but not height to viewport for Android 4.4, Browser', function(){
|
||||
ionic.Platform.setPlatform('android');
|
||||
ionic.Platform.setVersion('4.4');
|
||||
|
||||
vportTag.content = 'user-scalable=no';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
it('Should keep width, but remove height from viewport for Android 4.4, Browser', function(){
|
||||
ionic.Platform.setPlatform('android');
|
||||
ionic.Platform.setVersion('4.4');
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
|
||||
// Standard Browser
|
||||
|
||||
it('Should add width, but not height to viewport for Standard Browser', function(){
|
||||
ionic.Platform.ua = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36';
|
||||
|
||||
vportTag.content = 'user-scalable=no';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
it('Should keep width, but remove height from viewport for Standard Browser', function(){
|
||||
ionic.Platform.setPlatform('android');
|
||||
ionic.Platform.setVersion('4.4');
|
||||
|
||||
vportTag.content = 'user-scalable=no, width=device-width, height=device-height';
|
||||
viewportLoadTag();
|
||||
|
||||
expect( vportTag.content ).toEqual('user-scalable=no, width=device-width');
|
||||
});
|
||||
|
||||
|
||||
|
||||
it('Should get portrait (0) orientation', function(){
|
||||
window.innerWidth = 768;
|
||||
window.innerHeight = 1024;
|
||||
expect( ionic.viewport.orientation() ).toEqual(0);
|
||||
|
||||
window.innerWidth = 500;
|
||||
window.innerHeight = 500;
|
||||
expect( ionic.viewport.orientation() ).toEqual(0);
|
||||
});
|
||||
|
||||
it('Should get landscape (90) orientation', function(){
|
||||
window.innerWidth = 1024;
|
||||
window.innerHeight = 768;
|
||||
expect( ionic.viewport.orientation() ).toEqual(90);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user