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

V2EX = way to explore

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

现在注册

已注册用户请登录

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

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

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

width

JavaScript

宽度

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

frontman

2014-08-13 16:49:14 +08:00

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

jsonline

2014-08-13 17:04:56 +08:00 via Android

什么问题？

dingyaguang117

2014-08-13 17:10:05 +08:00

同求

honk

2014-08-13 17:13:42 +08:00

window.screen.width
window.screen.height

NemoAlex

2014-08-13 17:15:03 +08:00

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

frontman

2014-08-13 18:03:25 +08:00

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

frontman

2014-08-13 18:03:43 +08:00

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

ant_sz

2014-08-13 18:13:28 +08:00

为何不写 CSS 解决

cute

2014-08-13 18:20:30 +08:00

css 100%

frontman

2014-08-13 18:23:27 +08:00

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

frontman

2014-08-13 18:24:09 +08:00

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

frontman

2014-08-13 18:24:31 +08:00

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

cute

2014-08-13 18:31:25 +08:00

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

kokdemo

2014-08-13 18:35:49 +08:00

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

learnshare

2014-08-13 18:43:39 +08:00

body>img

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

这个是你要的效果么？

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

frontman

2014-08-13 18:46:27 +08:00

@learnshare 我试试看

Biwood

2014-08-13 19:06:05 +08:00

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

Biwood

2014-08-13 19:07:52 +08:00

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

seki

2014-08-13 19:13:11 +08:00

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

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

ant_sz

2014-08-13 21:39:43 +08:00

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

kokdemo

2014-08-13 22:39:33 +08:00

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

ximan

2014-08-13 22:47:33 +08:00

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

frontman

2014-08-14 10:49:02 +08:00

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

frontman

2014-08-14 10:50:01 +08:00

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