mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
139 lines
3.4 KiB
JavaScript
139 lines
3.4 KiB
JavaScript
|
|
var viewportTag;
|
|
var viewportProperties = {};
|
|
|
|
ionic.viewport = {
|
|
orientation: function() {
|
|
// 0 = Portrait
|
|
// 90 = Landscape
|
|
// not using window.orientation because each device has a different implementation
|
|
return (window.innerWidth > window.innerHeight ? 90 : 0);
|
|
}
|
|
};
|
|
|
|
function viewportLoadTag() {
|
|
var x;
|
|
|
|
for (x = 0; x < document.head.children.length; x++) {
|
|
if (document.head.children[x].name == 'viewport') {
|
|
viewportTag = document.head.children[x];
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (viewportTag) {
|
|
var props = viewportTag.content.toLowerCase().replace(/\s+/g, '').split(',');
|
|
var keyValue;
|
|
for (x = 0; x < props.length; x++) {
|
|
if (props[x]) {
|
|
keyValue = props[x].split('=');
|
|
viewportProperties[ keyValue[0] ] = (keyValue.length > 1 ? keyValue[1] : '_');
|
|
}
|
|
}
|
|
viewportUpdate();
|
|
}
|
|
}
|
|
|
|
function viewportUpdate() {
|
|
// unit tests in viewport.unit.js
|
|
|
|
var initWidth = viewportProperties.width;
|
|
var initHeight = viewportProperties.height;
|
|
var p = ionic.Platform;
|
|
var version = p.version();
|
|
var DEVICE_WIDTH = 'device-width';
|
|
var DEVICE_HEIGHT = 'device-height';
|
|
var orientation = ionic.viewport.orientation();
|
|
|
|
// Most times we're removing the height and adding the width
|
|
// So this is the default to start with, then modify per platform/version/oreintation
|
|
delete viewportProperties.height;
|
|
viewportProperties.width = DEVICE_WIDTH;
|
|
|
|
if (p.isIPad()) {
|
|
// iPad
|
|
|
|
if (version > 7) {
|
|
// iPad >= 7.1
|
|
// https://issues.apache.org/jira/browse/CB-4323
|
|
delete viewportProperties.width;
|
|
|
|
} else {
|
|
// iPad <= 7.0
|
|
|
|
if (p.isWebView()) {
|
|
// iPad <= 7.0 WebView
|
|
|
|
if (orientation == 90) {
|
|
// iPad <= 7.0 WebView Landscape
|
|
viewportProperties.height = '0';
|
|
|
|
} else if (version == 7) {
|
|
// iPad <= 7.0 WebView Portait
|
|
viewportProperties.height = DEVICE_HEIGHT;
|
|
}
|
|
} else {
|
|
// iPad <= 6.1 Browser
|
|
if (version < 7) {
|
|
viewportProperties.height = '0';
|
|
}
|
|
}
|
|
}
|
|
|
|
} else if (p.isIOS()) {
|
|
// iPhone
|
|
|
|
if (p.isWebView()) {
|
|
// iPhone WebView
|
|
|
|
if (version > 7) {
|
|
// iPhone >= 7.1 WebView
|
|
delete viewportProperties.width;
|
|
|
|
} else if (version < 7) {
|
|
// iPhone <= 6.1 WebView
|
|
// if height was set it needs to get removed with this hack for <= 6.1
|
|
if (initHeight) viewportProperties.height = '0';
|
|
|
|
} else if (version == 7) {
|
|
//iPhone == 7.0 WebView
|
|
viewportProperties.height = DEVICE_HEIGHT;
|
|
}
|
|
|
|
} else {
|
|
// iPhone Browser
|
|
|
|
if (version < 7) {
|
|
// iPhone <= 6.1 Browser
|
|
// if height was set it needs to get removed with this hack for <= 6.1
|
|
if (initHeight) viewportProperties.height = '0';
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// only update the viewport tag if there was a change
|
|
if (initWidth !== viewportProperties.width || initHeight !== viewportProperties.height) {
|
|
viewportTagUpdate();
|
|
}
|
|
}
|
|
|
|
function viewportTagUpdate() {
|
|
var key, props = [];
|
|
for (key in viewportProperties) {
|
|
if (viewportProperties[key]) {
|
|
props.push(key + (viewportProperties[key] == '_' ? '' : '=' + viewportProperties[key]));
|
|
}
|
|
}
|
|
|
|
viewportTag.content = props.join(', ');
|
|
}
|
|
|
|
ionic.Platform.ready(function() {
|
|
viewportLoadTag();
|
|
|
|
window.addEventListener("orientationchange", function() {
|
|
setTimeout(viewportUpdate, 1000);
|
|
}, false);
|
|
});
|