用 javascript 怎样才能很好的获取手机的屏幕宽度和高度？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 4173 天前的主题，其中的信息可能已经有所发展或是发生改变。

我用的$(window).width(), window.innerWidth, document.body.clientWidth; 都是试过了但是都会出一些问题都不准。

width

JavaScript

宽度

24 条回复 • 2014-08-14 10:50:01 +08:00

frontman

2014 年 8 月 13 日

怎么搞呢像qq音乐分享到微信的那样的效果

jsonline

2014 年 8 月 13 日 via Android

什么问题？

dingyaguang117

2014 年 8 月 13 日

同求

honk

2014 年 8 月 13 日

window.screen.width
window.screen.height

NemoAlex

2014 年 8 月 13 日

无论是手机端还是 PC 端，浏览器的宽高使用
document.documentElement.clientWidth
document.documentElement.clientHeight
都是兼容性很好的

frontman

2014 年 8 月 13 日

@jsonline 获取手机宽度高度然后把图片设置的跟屏幕一样宽但经常出现错误

frontman

2014 年 8 月 13 日

@honk 这个也是经常显示错误

ant_sz

2014 年 8 月 13 日

为何不写 CSS 解决

cute

2014 年 8 月 13 日

css 100%

frontman

2014 年 8 月 13 日

@ant_sz 因为要设置图片的宽度和屏幕宽度一样

frontman

2014 年 8 月 13 日

@cute 这个可以但是要设置图片的宽高度所以不知道怎么弄了

frontman

2014 年 8 月 13 日

@NemoAlex 是不是不同的手机显示也不一样

cute

2014 年 8 月 13 日

@frontman 宽度为100%,高度为auto试试。

kokdemo

2014 年 8 月 13 日

@ant_sz 宽度的话，图片很好解决，但是比如字体大小要随着变就不好解决了吧……

learnshare

2014 年 8 月 13 日

body>img

html,
body{
height: 100%;
overflow: hidden;
}
img{
display: block;
width: 100%;
height: 100%;
}

这个是你要的效果么？

不过我建议不要设置图片的高度，否则会拉伸图片，很难看的。

frontman

2014 年 8 月 13 日

@learnshare 我试试看

Biwood

2014 年 8 月 13 日

用什么JavaScript啊，CSS的Media Queries不是专门解决这种问题的吗，with设置为100%，高度可以用padding-top:100%来解决

Biwood

2014 年 8 月 13 日

看错了，这里不需要用padding-top，高度设为auto就行

seki

2014 年 8 月 13 日

如果是单张图片全 viewport 的话，我试过
jQuery.maxImage 1.1.8

后来想了想，写 background-size 也差不多能达到这个效果

ant_sz

2014 年 8 月 13 日

@kokdemo 用 media 选择器，或者使用相对大小的 font-size 都可以啊。

kokdemo

2014 年 8 月 13 日

@ant_sz ……感觉用media选择器不流畅啊……

ximan

2014 年 8 月 13 日

http://jsbin.com/yonepocuvixa/1
随手写了个，不知道是不是你要的效果。二维码：
http://cli.clewm.net/qrcode/2014/08/13/2246004675.png

frontman

2014 年 8 月 14 日

@seki 对用background的显示效果最好

frontman

2014 年 8 月 14 日

@ximan 恩恩我看了就是这样的效果非常感谢