javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(viewport): Remove height value on iOS browser

Browse Source
This commit is contained in:
Adam Bradley
2014-04-30 14:04:32 -05:00
parent 22322610c8
commit 0ad10edefc
3 changed files with 34 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
js/utils/viewport.js
View File

@@ -25,18 +25,23 @@ function viewportLoadTag() {
}
function viewportInitWebView() {
var hasViewportChange = false;
var initHeight = viewportProperties.height;
if( ionic.Platform.isWebView() ) {
if( viewportProperties.height != 'device-height' ) {
viewportProperties.height = 'device-height';
hasViewportChange = true;
}
viewportProperties.height = 'device-height';
} else if( ionic.Platform.isIOS() && viewportProperties.height ) {
// if its not a webview, and a viewport height was set, just removing
// the height value doesn't trigger the change, but setting to 0 does the trick
viewportProperties.height = '0';
} else if( viewportProperties.height ) {
delete viewportProperties.height;
hasViewportChange = true;
}
if(hasViewportChange) viewportUpdate();
// only update the viewport tag if there was a change
if(initHeight !== viewportProperties.height) viewportUpdate();
console.debug(viewportTag.content)
}
function viewportUpdate(updates) {
@@ -49,7 +54,7 @@ function viewportUpdate(updates) {
if(viewportProperties[key]) props.push(key + '=' + viewportProperties[key]);
}
viewportTag.content = props.join(',');
viewportTag.content = props.join(', ');
}
ionic.DomUtil.ready(function() {

22
test/unit/utils/keyboard.unit.js
View File

@@ -41,7 +41,7 @@ Tested On
- Android 4.2 Cordova
iOS 7.1 Cordova with AND without viewport height DOES resize, DOES NOT fire resize event
iOS 7.1 Cordova with AND without viewport height DOES resize, DOES NOT fire resize event
iOS 7.1 Safari with AND without viewport height DOES NOT resize
iOS 7.0 Cordova with viewport height DOES resize, DOES fire resize event
@@ -49,17 +49,17 @@ iOS 7.0 Cordova without viewport height DOES resize, DOES NOT fire resize event
iOS 7.0 Safari with AND without viewport height DOES NOT resize
iOS 6.1 Cordova with AND without viewport height DOES NOT resize
iOS 6.1 Safari without viewport height DOES NOT resize
iOS 6.1 Safari without viewport height DOES NOT resize
NOTES:
NOTES:
-iOS 7.1 Safari with viewport height screws up ionic layout
-iOS 7.0 Safari with viewport height, the scroll view does not resize properly on keyboardhide
-iOS 7.0 Cordova without viewport height, scroll view does not resize properly switching inputs at bottom of page
-iOS 6.1 Cordova and Safari don't work well with viewport height
-iOS 6.1 Cordova and Safari don't work well with viewport height
RECOMMENDATIONS:
-iOS 7.1 Cordova no viewport height, keyboard is not over webview
-iOS 7.1 Safari no viewport height, keyboard is over webview
-iOS 7.1 Safari no viewport height, keyboard is over webview
-iOS 7.0 Cordova yes viewport height, keyboard is not over webview
-iOS 7.0 Safari no viewport height, keyboard is over webview
@@ -215,18 +215,6 @@ describe('Ionic Keyboard', function() {
expect( details.isElementUnderKeyboard ).toEqual(false);
});
it('Should not subtract the keyboard height from the contentHeight if not keyboardIsOverWebView()', function(){
var element = document.createElement('textarea');
var elementTop = 300;
var elementBottom = 400;
var keyboardHeight = 200;
var deviceHeight = 260;
window.innerHeight = 260;
var details = keyboardShow(element, elementTop, elementBottom, deviceHeight, keyboardHeight);
expect( details.contentHeight ).toEqual(260);
});
it('Should subtract the keyboard height from the contentHeight if keyboardIsOverWebView()', function(){
ionic.Platform.setPlatform('iOS');
ionic.Platform.setVersion('7.1');

20
test/unit/utils/viewport.unit.js
View File

@@ -12,10 +12,12 @@
iOS 6.1 Safari without viewport height DOES NOT resize
NOTES:
-iOS 7.1 Safari with viewport height screws up ionic layout
-iOS 7.0 Safari with viewport height, the scroll view does not resize properly on keyboardhide
-iOS 7.0 Cordova without viewport height, scroll view does not resize properly switching inputs at bottom of page
-iOS 6.1 Cordova and Safari don't work well with viewport height
- iOS 7.1 Safari with viewport height screws up ionic layout
- iOS 7.0 Safari with viewport height, the scroll view does not resize properly on keyboardhide
- iOS 7.0 Cordova without viewport height, scroll view does not resize properly switching inputs at bottom of page
- iOS 6.1 Cordova and Safari don't work well with viewport height
- If its not a webview, and a viewport height was set, just removing
the height value doesn't trigger the change, but setting height=0 does the trick
RECOMMENDATIONS:
-iOS 7.1 Cordova no viewport height, keyboard is not over webview
@@ -122,4 +124,14 @@ describe('Ionic Viewport', function() {
expect( vportTag.content ).toEqual(originalViewport);
});
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);
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');
});
});