V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
StackGao
V2EX  ›  程序员

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

  •  
  •   StackGao · 2014-11-24 14:24:57 +08:00 · 3707 次点击
    这是一个创建于 3653 天前的主题,其中的信息可能已经有所发展或是发生改变。
    需求是判断客户端是手机则推广手机app,客户端是平板则推广平板app,所以只拿到分辨率区分不出来. 如果用UA判断的话,市面上山寨pad太多了根本统计不过来. 谢谢大家
    第 1 条附言  ·  2014-11-24 16:21:44 +08:00
    [已解决] 找到了一个歪门邪道... UA里如果同时有android和mobile两个字段则一定是手机,如果缺了一个就一定是android pad! 进而推广不同的app,希望可以帮到更多人.


    @patr0nus
    @akeyz
    @abelyao
    @leer561
    @rayps
    @learnshare
    @anjianshi

    谢谢各位的帮助,受教了!
    12 条回复    2014-11-24 16:54:05 +08:00
    hackwjfz
        1
    hackwjfz  
       2014-11-24 14:27:08 +08:00   ❤️ 1
    StackGao
        2
    StackGao  
    OP
       2014-11-24 14:28:14 +08:00
    @hackwjfz 这个只能拿到分辨率,拿不到PPI就没办法知道是不是平板.... 不过还是很感谢
    hackwjfz
        3
    hackwjfz  
       2014-11-24 14:38:27 +08:00
    @StackGao

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

    试试这个,看看行不行
    abelyao
        6
    abelyao  
       2014-11-24 15:18:51 +08:00   ❤️ 1
    现在很多手机的分辨率,比两年前小尺寸的平板的分辨率都要高了,当然是指物理分辨率,所以物理分辨率已经不能用来判断 phone 或者 pad 了。
    但是可以用渲染分辨率来判断,比如拿 iPhone 来说,4 到 5s 都是物理分辨率 ÷ 2,也就是 320 像素的宽度,4 之前就直接是 1:1 的比例。
    而到底宽度多少,比例多少,是可以在 head 的 viewport 中设置的,几句话也说不清楚,楼主看看 http://www.cnblogs.com/2050/p/3877280.html 这一类相关帖子吧
    leer561
        7
    leer561  
       2014-11-24 15:34:23 +08:00   ❤️ 1
    这两天正在做,遇到了部分问题
    //屏幕适配
    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
        8
    leer561  
       2014-11-24 15:37:53 +08:00
    sorry,回答错了,完全没应对楼主问题
    rayps
        9
    rayps  
       2014-11-24 15:49:31 +08:00
    learnshare
        10
    learnshare  
       2014-11-24 15:55:03 +08:00   ❤️ 1
    1. 永远不要判断设备和浏览器!

    2. 用 mediaquery 做相应页面,去适应不同的分辨率;
    3. 用 js test(如 if(document.querySelectorAll()))测试浏览器对函数的支持情况,来做向下兼容
    anjianshi
        11
    anjianshi  
       2014-11-24 16:09:04 +08:00   ❤️ 1
    @learnshare 审题啊,楼主是要根据设备决定推广哪种 APP
    learnshare
        12
    learnshare  
       2014-11-24 16:54:05 +08:00
    @anjianshi 我是针对标题的,嗯
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   950 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 19:33 · PVG 03:33 · LAX 11:33 · JFK 14:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.