2016.07.25~2016.07.29
核心概念
问题解析
CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容
Device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色、亮度
等值的 CSS pixels在手机屏幕上占多大的位置,这不是固定的,这取决于很多属性。经过分析和总结,我们可以得出这么一条公式: 1 CSS pixels = (devicePixelRatio)^2 Device pixels (^2是平方的意思)
想了解更多关于“CSS pixels与Device pixels”发送“适配”到HTML5学堂公众号
JavaScript
2016.07.25~2016.07.29
核心概念
问题解析
//第一种方法
// 为了防止替换的图片也加载失败而导致死循环,这边给完成替换的图片移除掉error事件
$("img").error(function () {
$(this).unbind("error").attr("src", "missing_image.gif");
});
// 第二种方法
$("img").error(function () {
$(this).attr("src", "missing_image.gif");
});
2016.07.25~2016.07.29
核心概念
字符串方法、用户代理
问题解析
var browser = {
versions: function () {
var u = navigator.userAgent,
app = navigator.appVersion;
return { //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
document.writeln("语言版本: " + browser.language);
document.writeln(" 是否为移动终端: " + browser.versions.mobile);
document.writeln(" ios终端: " + browser.versions.ios);
document.writeln(" android终端: " + browser.versions.android);
document.writeln(" 是否为iPhone: " + browser.versions.iPhone);
document.writeln(" 是否iPad: " + browser.versions.iPad);
document.writeln(navigator.userAgent);
if (browser.versions.android || browser.versions.iPhone || browser.versions.iPad) {
alert("是移动端");
} else {
alert("不是移动端");
}
2016.07.25~2016.07.29
核心概念
问题解析
history.go(0)
location.reload()
location = location
location.assign(location)
document.execCommand('Refresh')
window.navigate(location)
location.replace(location)
document.URL=location.href
window.location.reload()刷新当前页面
parent.location.reload()刷新父亲对象(用于框架)
opener.location.reload()刷新父窗口对象(用于单开窗口)
top.location.reload()刷新最顶端对象(用于多开窗口)
window.location.reload()刷新当前页面
parent.location.reload()刷新父亲对象(用于框架)
opener.location.reload()刷新父窗口对象(用于单开窗口)
top.location.reload()刷新最顶端对象(用于多开窗口)
2016.07.25~2016.07.29
核心概念
问题解析
1、执行时间
window.onload必须等到网站资源加载完毕后才能执行;
$(document).ready()是DOM结构绘制完毕后就执行,不必等到资源加载完毕;
2、编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行
3、简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){})
HTML5学堂小编 - 陈林耗时5h