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

2014-08-13 16:40:27 +08:00
 frontman
我用的$(window).width(), window.innerWidth, document.body.clientWidth; 都是试过了 但是都会出一些问题 都不准。
5969 次点击
所在节点    程序员
24 条回复
frontman
2014-08-13 16:49:14 +08:00
怎么搞呢 像qq音乐分享到微信的那样的效果
jsonline
2014-08-13 17:04:56 +08:00
什么问题?
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 都可以啊。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/127683

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX