用javascript怎么能准确的获取手机的屏幕js获取图片宽度和高度度

来源：蜘蛛抓取(WebSpider) 时间：2016-04-23 09:49 标签： javascript 获取宽度
用javascript 怎样才能很好的获取手机的屏幕宽度和高度_百度知道
用javascript 怎样才能很好的获取手机的屏幕宽度和高度
提问者采纳
documentElement.clientHeight都是兼容性很好的screen.documentElement，浏览器的宽高使用document无论是手机端还是 PC 端.clientWidthdocument
来自团队：
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁用javascript怎么能准确的获取手机的屏幕宽度和高度_百度知道
用javascript怎么能准确的获取手机的屏幕宽度和高度
我有更好的答案
window.innerHeightwindow.innerWidth
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁怎样用 JavaScript 准确获取手机屏幕的宽度和高度？
&img src=&/894bdb554a66d75fbf0c56d29ae10192_b.jpg& data-rawwidth=&576& data-rawheight=&960& class=&origin_image zh-lightbox-thumb& width=&576& data-original=&/894bdb554a66d75fbf0c56d29ae10192_r.jpg&&&br&&br&&br&这是qq音乐分享到微信里显示的页面 类似这样的 图片铺满整个屏幕 &br&&br&javascript怎么能准确的获取手机屏幕宽高度呢
按投票排序
document.documentElement.clientW document.documentElement.clientH这个得到的是设备像素可见宽高，比如iPhone 4s在微信内设置了viewport为1的时候为320*416(手机480 - 微信状态栏64), iPhone 5里为320*504我是做移动端html5 web开发的，为了得到个手机宽高折腾了不少，度娘谷歌出来基本都不对，一般情况下没事，但项目上线会出问题，小部分手机获取到的宽高并不正确。比如上面说的screen.width screen.height这些数据在有的手机上并不准确，比如三星的某些型号(具体型号，当时测的，现在忘了)。
一般来说在移动浏览器上是拿不到屏幕真实分辨率的，因为页面渲染是在一个叫viewport的页面绘制区域内。viewport和屏幕的真实尺寸并不是对应的，如在Safari Mobile中viewport默认宽度（320px）是屏幕真实尺寸（640px）的一半，这里不管是用window.innerHeight还是window.screen.width拿到的都是320px。当然我们可以通过meta设置改变viewport的比例，如initial-scale=.5就可以让viewport和屏幕一致的尺寸，这个比例在不同的手机上并不一定是2倍关系，特别是Android手机。而且改变viewport比例后可能会导致后续制作中出现一系列问题。另外Android系统中可以在viewport设置target-densitydpi=device-dpi让viewport的尺寸和屏幕真实尺寸保持一致，但iOS不起作用，所以这个方法不具有普遍性。所以我认为不要纠结一定要拿到屏幕真实尺寸，就把viewport的尺寸当成屏幕的尺寸进行页面设计和制作肯定是没有问题的。给一个viewport设置的示例：&!DOCTYPE html&
&meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/&
&title&Document&/title&
每项设置的具体含义我就不拷贝粘贴了，可以自行搜索下。吐槽：好多设计师在制作手机页面效果图时都是使用640的宽度，这是iPhone屏幕的真实尺寸，但页面呈现时真的不是这个尺寸，制作页面时会因为宽度不够导致内容无法像效果图一样
window.innerHeight属性，window.innerWidth属性 这两个属性返回网页的CSS布局占据的浏览器窗口的高度和宽度，单位为像素。很显然，当&用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。注意，这两个属性值包括滚动条的高度和宽度。screen对象screen对象包含了显示设备的信息。screen.height：显示设备的高度，单位为像素。screen.width：显示设备的宽度，单位为像素。以上两个属性，除非调整显示设备的分辨率，否则看作是常量，不会发生变化。下面是根据屏幕分辨率，将用户导向不同网页的代码。if ((screen.width&=800) && (screen.height&=600)) {
window.location.replace('small.html');
window.location.replace('wide.html');
已有帐号？
无法登录？
社交帐号登录用javascript获取屏幕高度和宽度等信息_小组_ThinkSAAS
用javascript获取屏幕高度和宽度等信息
用javascript获取屏幕高度和宽度等信息
网页可见区域宽： 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
$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
官方1群：【已满】
让ThinkSAAS更好，把建议拿来。　　Javascript:　　网页可见区域宽： 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 　　JQuery:　　$(function(){　　alert($(window).height()); //浏览器当前窗口可视区域高度　　alert($(document).height()); //浏览器当前窗口文档的高度　　alert($(document.body).height());//浏览器当前窗口文档body的高度　　alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin　　alert($(window).width()); //浏览器当前窗口可视区域宽度　　alert($(document).width());//浏览器当前窗口文档对象宽度　　alert($(document.body).width());//浏览器当前窗口文档body的宽度　　alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin　　})
楼主发言：1次 发图：0张
请遵守言论规则，不得违反国家法律法规

我要回帖

更多关于 javascript 获取宽度 的文章

 

随机推荐