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

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

This topic created in 4294 days ago, the information mentioned may be changed or developed.

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

width

JavaScript

宽度

24 replies • 2014-08-14 10:50:01 +08:00

frontman

Aug 13, 2014

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

jsonline

Aug 13, 2014 via Android

什么问题？

dingyaguang117

Aug 13, 2014

同求

honk

Aug 13, 2014

window.screen.width
window.screen.height

NemoAlex

Aug 13, 2014

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

frontman

Aug 13, 2014

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

frontman

Aug 13, 2014

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

ant_sz

Aug 13, 2014

为何不写 CSS 解决

cute

Aug 13, 2014

css 100%

frontman

Aug 13, 2014

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

frontman

Aug 13, 2014

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

frontman

Aug 13, 2014

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

cute

Aug 13, 2014

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

kokdemo

Aug 13, 2014

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

learnshare

Aug 13, 2014

body>img

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

这个是你要的效果么？

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

frontman

Aug 13, 2014

@learnshare 我试试看

Biwood

Aug 13, 2014

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

Biwood

Aug 13, 2014

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

seki

Aug 13, 2014

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

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

ant_sz

Aug 13, 2014

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

kokdemo

Aug 13, 2014

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

ximan

Aug 13, 2014

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

frontman

Aug 14, 2014

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

frontman

Aug 14, 2014

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