|
//判定浏览器是否支持某些重要特性
require("avalon")
QApp.support = {
//判定是否支持CSS3的transition, animation,支持返回可用的属性名,不支持返回null
//https://github.com/jquery/jquery-mobile/blob/master/js/animationComplete.js
cssTransition: avalon.cssName("transition"),
cssAnimation: avalon.cssName("animation"),
cssAnimation3D: transform3dTest(),
//判定是否支持伪元素
cssPseudoElement: !!avalon.cssName("content"),
//现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。
//使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为
cssPointerEvents: cssPointerEventsTest(),
boxShadow: !!avalon.cssName("boxShadow"),
//http://stackoverflow.com/questions/15906508/chrome-browser-for-android-no-longer-supports-webkit-overflow-scrolling-is-the
touchOverflow: !!avalon.cssName("overflow-scrolling"),
//要弄明media query,先要了解一下media type，其实这个大家会比较熟悉一点，
//我们通常会用到的media type会是all 和screen，然后是print，
//一些网站会专门通过print类型为页面的打印格式提供更友好的界面。
//media type的浏览器支持
//* IE5.5/6/7不支持在@import中使用媒体类型
//* Safari/firefox只支持all,screen,print三种类型(包括iphone)
//* Opera 完全支持
//* Opera mini 支持handheld，未指定则使用screen
//* Windows Mobile系统中的IE支持handheld，其它支持不明…
//media query是CSS 3对media type的增强，事实上我们可以将media query看成是media type+css属性判断。
// @media screen and (min-width:1024px) and (max-width:1280px){
// body{font-size:medium;}
// }
//详见 http://www.qianduan.net/media-type-and-media-query.html
mediaquery: mediaTest("only all"),
//https://github.com/jquery/jquery-mobile/blob/master/js/support/touch.js
touch: "ontouchend" in document,
//HTML5引进了history.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目。
//这些方法可以协同window.onpopstate事件一起工作。
//https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history
pushState: "pushState" in history &&
"replaceState" in history &&
// When running inside a FF iframe, calling replaceState causes an error
!(window.navigator.userAgent.indexOf("Firefox") >= 0 && window.top !== window) &&
(window.navigator.userAgent.search(/CriOS/) === -1),
boundingRect: typeof document.documentElement.getBoundingClientRect !== "undefined",
orientation: "orientation" in window && "onorientationchange" in window,
fixedPosition: true, //下面会修正
//http://stackoverflow.com/questions/5539354/svg-for-images-in-browsers-with-png-fallback
inlineSVG:!! (window.SVGAngle && document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") )
}
var matchMedia = window.matchMedia || (function(doc, undefined) {
var bool,
docElem = doc.documentElement,
refNode = docElem.firstElementChild || docElem.firstChild,
// fakeBody required for <ff4 when="" executed="" in="" <head="">
fakeBody = doc.createElement("body"),
div = doc.createElement("div");
div.id = "mq-test-1";
div.style.cssText = "position:absolute;top:-100em";
fakeBody.style.background = "none";
fakeBody.appendChild(div);
return function(q) {
div.innerHTML = "-<style media=\"" + q + "\"> #mq-test-1 { width: 42px; }</style>";
docElem.insertBefore(fakeBody, refNode);
bool = div.offsetWidth === 42;
docElem.removeChild(fakeBody);
return {
matches: bool,
media: q
};
};
}(document));
var mediaTest = function(q) {
return matchMedia(q).matches;
};
function cssPointerEventsTest() {
var element = document.createElement("x"),
documentElement = document.documentElement,
getComputedStyle = window.getComputedStyle,
supports;
if (!("pointerEvents" in element.style)) {
return false;
}
element.style.pointerEvents = "auto";
element.style.pointerEvents = "x";
documentElement.appendChild(element);
supports = getComputedStyle &&
getComputedStyle(element, "").pointerEvents === "auto";
documentElement.removeChild(element);
return !!supports;
}
//http://stackoverflow.com/questions/5661671/detecting-transform-translate3d-support
function transform3dTest() {
var mqProp = "transform-3d",
// Because the `translate3d` test below throws false positives in Android:
ret = mediaTest("(-" + vendors.join("-" + mqProp + "),(-") + "-" + mqProp + "),(" + mqProp + ")"),
el, transforms, t;
if (ret) {
return !!ret;
}
el = document.createElement("div");
transforms = {
// We’re omitting Opera for the time being; MS uses unprefixed.
"MozTransform": "-moz-transform",
"transform": "transform"
};
fakeBody.append(el);
for (t in transforms) {
if (el.style[ t ] !== undefined) {
el.style[ t ] = "translate3d( 100px, 1px, 1px )";
ret = window.getComputedStyle(el).getPropertyValue(transforms[ t ]);
}
}
return (!!ret && ret !== "none");
}
//判定当前浏览器是否支持position:fiexed
new function() {
var test = document.createElement(‘div‘),
control = test.cloneNode(false),
fake = false,
root = document.body || (function() {
fake = true;
return document.documentElement.appendChild(document.createElement(‘body‘));
}());
var oldCssText = root.style.cssText;
root.style.cssText = ‘padding:0;margin:0‘;
test.style.cssText = ‘position:fixed;top:42px‘;
root.appendChild(test);
root.appendChild(control);
QApp.support.positionfixed = test.offsetTop !== control.offsetTop;
root.removeChild(test);
root.removeChild(control);
root.style.cssText = oldCssText;
if (fake) {
document.documentElement.removeChild(root);
}
}
new function() {
var test = document.createElement(‘div‘),
ret, fake = false,
root = document.body || (function() {
fake = true;
return document.documentElement.appendChild(document.createElement(‘body‘));
}());
if (typeof document.body.scrollIntoViewIfNeeded === ‘function‘) {
var oldCssText = root.style.cssText,
testScrollTop = 20,
originalScrollTop = window.pageYOffset;
root.appendChild(test);
test.style.cssText = ‘position:fixed;top:0px;height:10px;‘;
root.style.height = "3000px";
/* avoided hoisting for clarity */
var testScroll = function() {
if (ret === undefined) {
test.scrollIntoViewIfNeeded();
if (window.pageYOffset === testScrollTop) {
ret = true;
} else {
ret = false;
}
}
window.removeEventListener(‘scroll‘, testScroll, false);
}
window.addEventListener(‘scroll‘, testScrollTop, false);
window.setTimeout(testScroll, 20); // ios 4 does‘nt publish the scroll event on scrollto
window.scrollTo(0, testScrollTop);
testScroll();
root.removeChild(test);
root.style.cssText = oldCssText;
window.scrollTo(0, originalScrollTop);
} else {
ret = QApp.support.positionfixed; // firefox and IE doesnt have document.body.scrollIntoViewIfNeeded, so we test with the original modernizr test
}
if (fake) {
document.documentElement.removeChild(root);
}
QApp.support.iospositionfixed = ret;
}
</ff4>
|
