HTML5 + JS 能不能拿到屏幕尺寸?

2014-11-24 14:24:57 +08:00
 StackGao
需求是判断客户端是手机则推广手机app,客户端是平板则推广平板app,所以只拿到分辨率区分不出来. 如果用UA判断的话,市面上山寨pad太多了根本统计不过来. 谢谢大家
3725 次点击
所在节点    程序员
12 条回复
hackwjfz
2014-11-24 14:27:08 +08:00
StackGao
2014-11-24 14:28:14 +08:00
@hackwjfz 这个只能拿到分辨率,拿不到PPI就没办法知道是不是平板.... 不过还是很感谢
hackwjfz
2014-11-24 14:38:27 +08:00
@StackGao

soga。。
不好意思
patr0nus
2014-11-24 14:43:12 +08:00
@StackGao window.devicePixelRatio 可以拿到缩放比例,不知道有没有用
akeyz
2014-11-24 15:17:54 +08:00
https://github.com/tobie/ua-parser

试试这个,看看行不行
abelyao
2014-11-24 15:18:51 +08:00
现在很多手机的分辨率,比两年前小尺寸的平板的分辨率都要高了,当然是指物理分辨率,所以物理分辨率已经不能用来判断 phone 或者 pad 了。
但是可以用渲染分辨率来判断,比如拿 iPhone 来说,4 到 5s 都是物理分辨率 ÷ 2,也就是 320 像素的宽度,4 之前就直接是 1:1 的比例。
而到底宽度多少,比例多少,是可以在 head 的 viewport 中设置的,几句话也说不清楚,楼主看看 http://www.cnblogs.com/2050/p/3877280.html 这一类相关帖子吧
leer561
2014-11-24 15:34:23 +08:00
这两天正在做,遇到了部分问题
//屏幕适配
var ratio1 = 1/window.devicePixelRatio;
var ratio = ratio1.toFixed(3);
var highResSplash = "<meta name='viewport' content='initial-scale="+ratio+"' />";
$('head').append(highResSplash);

iphone,pad什么的都没问题,而且因为ios7不支持width=device-width,以及安卓4.4之后,不再支持target-densitydpi后,一般我都直接缩放了,至少比那些不努力只会放initial-scale=1.0要好一些。

另外,用phonegap打包,安卓4.4会有viewport缩放实效的问题,需要重新设置webview,不过我已经折腾半天也没把cordova-webview-setting 弄进去。
https://github.com/gitawego/cordova-webview-setting
暂时性放弃,按照360的搞了
leer561
2014-11-24 15:37:53 +08:00
sorry,回答错了,完全没应对楼主问题
rayps
2014-11-24 15:49:31 +08:00
learnshare
2014-11-24 15:55:03 +08:00
1. 永远不要判断设备和浏览器!

2. 用 mediaquery 做相应页面,去适应不同的分辨率;
3. 用 js test(如 if(document.querySelectorAll()))测试浏览器对函数的支持情况,来做向下兼容
anjianshi
2014-11-24 16:09:04 +08:00
@learnshare 审题啊,楼主是要根据设备决定推广哪种 APP
learnshare
2014-11-24 16:54:05 +08:00
@anjianshi 我是针对标题的,嗯

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

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

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

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

© 2021 V2EX