4850人阅读
html5（2）
paper（56）
android（50）
taobao ppt:基于html5的android开发.ppt
常见的IPHONE&和 Android屏幕参数。
设备像素比率
Android LDPI
Iphone 3 & Android MDPI
Android HDPI
由此可见，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文件里
&&& 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&);
测试代码：
&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)
如果是在android的webview里，上面相应的值都是指webview的大小，而不是屏幕的大小。
网页可见区域宽：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&
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)&
哎，原谅我的无知，我被里面这些个概念是搞的晕头转向，恳求高手能不能抽空就上面这些概念做个图文并茂的教程呢，比如啊：随便搞一张网页截图，然后在上面用符号标示各个概念
因为最近要做一个层的定位的程序，所以迫切需要知道这些概念的具体意义。&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：152072次
积分：2600
积分：2600
排名：第13940名
原创：91篇
转载：91篇
评论：26条
(1)(15)(1)(1)(1)(4)(2)(1)(3)(2)(10)(6)(2)(3)(6)(11)(12)(6)(14)(2)(14)(9)(14)(1)(10)(2)(5)(6)(15)(5)问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
CSSOM中的screen.availHeight属性.MDN的解释是: Returns the amount of vertical space available to the window on the screen.那么, 当我把任务栏的高度变小的时候(使用小任务栏按钮), 这个值理论上就应该减少.并且, 当我把任务栏放在右侧的时候, 这个属性的值任然没有变化.
浏览器在实现这个属性时是如何来确定它的值的?是根据屏幕分辨率和操作系统就固定下来了吗?
console.log("screen.availWidth: " + screen.availWidth);
console.log("screeen.avaailHeight: " + screen.availHeight);
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
screen.availWidth 是指的屏幕的可用高度，根据 CSSOM 它的取值取决于输出设备、渲染环境以及视口大小，所以并不会由于浏览器的大小修改而发生变化，例如题主可以试试把手机横屏、竖屏会得到不同的值。
如果是想调试方便，chrome 开发者工具里可以通过 device toolbar 轻松调试。
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：javascript（26）
window.screen.availWidth 返回当前屏幕宽度(空白空间)
window.screen.availHeight 返回当前屏幕高度(空白空间)
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
window.document.body.offsetH 返回当前网页高度
window.document.body.offsetW 返回当前网页宽度
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
(2)(4)(2)(4)(5)(6)(1)(8)(12)(9)(14)(10)(7)(13)(26)(24)(24)(17)$(window).width()与window.innerWidth的区别
作者:admin&&&&时间: 7:37:1&&&&浏览:
近日把网站改为自适应，需要用到一部分js和jquery程序，由于要考虑到各浏览器的兼容性，所以在调试上需要各位用心，并且在各函数的使用上也要比较谨慎。但是由于工作量繁多，会时常出现一些bug，要在使用时才可能被发现。今天，就发现了一个问题，在IE8打开网页时，左下角有黄色警告提示，说明网页JS有问题了。经过一番捣鼓之后，发现原来是window.innerWidth这个写法的问题，该写法在IE8里原来是无效的，出现undefined错误提示。window.innerWidth能获得什么数据？在自适应设计中，需要用js来判断浏览器宽度，从而调整网页宽度和布局，我一开始用的是window.innerWidth。window.innerWidth能获取当前窗口的宽度(包含滚动条)，当浏览器宽度调整时，这个值也会跟着变化。但是，window.innerWidth在IE8浏览器是无效的。所以，需要使用一个代替品，那就是$(window).width()。$(window).width()与window.innerWidth有什么区别？$(window).width()也是获得浏览器宽度的方法，但它跟window.innerWidth是不同的。1）$(window).width()需要引用jquery.js文件，它是jquery方法。而window.innerWidth是js方法，不需要引用jquery.js文件。2）它们获取的数值是不同的，window.innerWidth获取当前窗口的宽度(包含滚动条)，$(window).width()获取当前窗口的宽度(不包含滚动条)。看下图所示：$(window).width()与window.innerWidth的区别知识扩展Javascript、Jquery获取浏览器和屏幕各种高度宽度Javascript:alert(document.body.clientWidth);&&&&&&& //网页可见区域宽(body)alert(document.body.clientHeight);&&&&&& //网页可见区域高(body)alert(document.body.offsetWidth);&&&&&& //网页可见区域宽(body)，包括border、margin等alert(document.body.offsetHeight);&&&&& //网页可见区域宽(body)，包括border、margin等alert(document.body.scrollWidth);&&&&&&& //网页正文全文宽，包括有滚动条时的未见区域alert(document.body.scrollHeight);&&&&&& //网页正文全文高，包括有滚动条时的未见区域alert(document.body.scrollTop);&&&&&&&&&& //网页被卷去的Top(滚动条)alert(document.body.scrollLeft);&&&&&&&&&& //网页被卷去的Left(滚动条)alert(window.screenTop);&&&&&&&&&&&&&&&&&&&& //浏览器距离Topalert(window.screenLeft);&&&&&&&&&&&&&&&&&&&& //浏览器距离Leftalert(window.screen.height);&&&&&&&&&&&&&&& //屏幕分辨率的高alert(window.screen.width);&&&&&&&&&&&&&&&& //屏幕分辨率的宽alert(window.screen.availHeight);&&&&&&&&& //屏幕可用工作区的高alert(window.screen.availWidth);&&&&&&&&&& //屏幕可用工作区的宽Jquery:alert($(window).height());&&&&&&&&&&&&&&&&&&&&&&&&&& //浏览器当前窗口可视区域高度alert($(document).height());&&&&&&&&&&&&&&&&&&&&&&& //浏览器当前窗口文档的高度alert($(document.body).height());&&&&&&&&&&&&&&& //浏览器当前窗口文档body的高度alert($(document.body).outerHeight(true));& //浏览器当前窗口文档body的总高度 包括border padding marginalert($(window).width());&&&&&&&&&&&&&&&&&&&&&&&&&&& //浏览器当前窗口可视区域宽度alert($(document).width());&&&&&&&&&&&&&&&&&&&&&&& //浏览器当前窗口文档对象宽度alert($(document.body).width());&&&&&&&&&&&&&&& //浏览器当前窗口文档body的宽度alert($(document.body).outerWidth(true));& //浏览器当前窗口文档body的总宽度 包括border padding margin实例&!DOCTYPE html&&script src=&& type=&text/javascript& &&/script&&html&& &head&&&& &title&Javascript、Jquery获取浏览器和屏幕各种高度宽度&/title&& &/head&& &body&& &h1&aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&/h1&&&&p&Welcome to aaa&/p&&&&h1&aaa&/h1&&&&h1&aaa&/h1&&&&h1&aaa&/h1&&&&h1&aaa&/h1&&&&h1&aaa&/h1&&&&h1&aaa&/h1&&&&h1&aaa&/h1&&&&h1&aaa&/h1&&&&h1&aaa&/h1&&&&h1&aaa&/h1&&&&h1&aaa&/h1&&&&h1&aaa&/h1&&&&h1&aaa&/h1&& &/body&&/html&&script type=&text/javascript&&var str = &document.body.clientWidth=&+document.body.clientWidth+&\n&;str = str + &document.body.clientHeight=&+document.body.clientHeight+&\n&;str = str + &document.body.offsetWidth=&+document.body.offsetWidth+&\n&;str = str + &document.body.offsetHeight=&+document.body.offsetHeight+&\n&;str = str + &document.body.scrollWidth=&+document.body.scrollWidth+&\n&;str = str + &document.body.scrollHeight=&+document.body.scrollHeight+&\n&;str = str + &document.body.scrollTop=&+document.body.scrollTop+&\n&;str = str + &document.body.scrollLeft=&+document.body.scrollLeft+&\n&;str = str + &window.screenTop=&+window.screenTop+&\n&;str = str + &window.screenLeft=&+window.screenLeft+&\n&;str = str + &window.screen.height=&+window.screen.height+&\n&;str = str + &window.screen.width=&+window.screen.width+&\n&;str = str + &window.screen.availHeight=&+window.screen.availHeight+&\n&;str = str + &window.screen.availWidth=&+window.screen.availWalert(str);&/script&&&
把文章分享到：
QQ交流群（）