【问题集锦】P1中遇到的问题（持续中。。。）
【1】text-shadow: 0 1px 0 hsla(0,0%,100%,0.3);
box-shadow: inset 0 0 4px hsla(0,0%,0%,1.0), 0 0 2px hsla(0,0%,0%,0.6);
background: -webkit-linear-gradient(hsla(0,100%,50%,1.0), hsla(0,100%,43%,1.0) 50%, hsla(0,100%,37%,1.0) 50%, hsla(0,100%,30%,1.0));
语法hsla(0,0%,100%,0.3)：
<length> || <percentage> || <percentage> || <opacity>
取值：
<length> ：
Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；
<percentage> ：
Saturation(饱和度)。 取值为0%到100%之间的值；
<percentage> ：
Lightness(亮度)。 取值为0%到100%之间的值；
<opacity> ：
alpha(透明度)。 取值在0到1之间；
说明：
HSL 色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色 的，HSL即是代表色调，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。HSLA是在 HSL的基础上增加一个透明度(A)的设置。
兼容性：
| 类型 |  Internet Explorer |
 Firefox |
 Chrome |
 Opera |
 Safari |
|---|---|---|---|---|---|
| 版本 | (不支持 )IE6、7、8 | (√)Firefox 3.0 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4 |
| (√ )IE9+ | (√)Firefox 3.5 | ||||
【2】@media screen and (-webkit-device-pixel-ratio:2)
aobao ppt:基于html5的android开发.ppt
常见的IPHONE 和 Android屏幕参数。
| 设备 | 分辨率 | 设备像素比率 |
| Android LDPI | 320×240 | 0.75 |
| Iphone 3 & Android MDPI | 320×480 | 1 |
| Android HDPI | 480×800 | 1.5 |
| Iphone 4 | 960×640 | 2.0 |
由此可见，Iphone 4的一个 CSS 像素实际上表现为一块 2×2 的像素。所以图片像是被放大2倍一样，模糊不清晰。
解决办法：
1、页面引用
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.0)" href="retina.css" />
2、CSS文件里
#header {
background:url(mdpi/bg.png);
}
@media screen and (-webkit-device-pixel-ratio: 1.5) {
/*CSS for high-density screens*/
#header {
background:url(hdpi/bg.png);
}
}
JavaScript控制设备密度
Android浏览器和WebView支持查询当前设备密度的DOM特性（window.devicePixelRatio），该值指定用于当前设备按比 例缩放的系数。例如，值为“1.0”，则说明设备是中等密度，并且默认页面不进行缩放；如果该值是“1.5”，那么，设备是高密度设备，并且默认页面调整 1.5x（倍）；如果该值是“0.75”，那么，设备是低密度设备，并且默认页面调整0.75x（倍）。
如何使用JavaScript查询设备密度：
if (window.devicePixelRatio == 1.5) {
alert("This is a high-density screen");
} else if (window.devicePixelRation == 0.75) {
alert("This is a low-density screen");
}
测试代码：
<body>
<script type="text/javascript">
document.write("Screen resolution: ")
document.write(screen.width + "*" + screen.height)
document.write("<br />")
document.write("Available view area: ")
document.write(screen.availWidth + "*" + screen.availHeight)
document.write("<br />")
document.write("Color depth(位每像素): ")
document.write(screen.colorDepth)
document.write("<br />")
document.write("window.devicePixelRatio: ")
document.write(window.devicePixelRatio)
document.write("<br />")
document.write("实际分辨率: ")
document.write(screen.width*window.devicePixelRatio + "*" + screen.height*window.devicePixelRatio)
document.write("<br />")
document.write("document.body.clientWidth: ")
document.write(document.body.clientWidth)
document.write("<br />")
document.write("document.body.clientHeight ")
document.write(document.body.clientHeight)
</script>
</body>
如果是在android的webview里，上面相应的值都是指webview的大小，而不是屏幕的大小。
主题：JS获取屏幕，浏览器，网页高度宽度
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
IE，FireFox 差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height