V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
abelyao
V2EX  ›  问与答

(●'◡'●)ノ♥ 大家帮帮忙!测试一下各种手机中微信浏览器的分辨率,谢谢!

  •  1
     
  •   abelyao · 2015-07-23 21:03:40 +08:00 · 9393 次点击
    这是一个创建于 3197 天前的主题,其中的信息可能已经有所发展或是发生改变。

    正在做一个专门针对微信浏览器访问的页面,但因为安卓手机各种分辨率太多了,身边也没太多机型可以测试,想请各位有安卓手机的 V 友帮个忙,用你身边的安卓手机的 微信浏览器 访问一下页面,然后回帖跟我说一下 机型/分辨率 就好了。

    只要访问一下这个页面就有分辨率: http://watt.sinaapp.com/test.html (非微信打开则是空白的)
    为了方便大家用微信打开,我做了个二维码,扫一下就好:
    二维码

    先跟各位说谢谢!(●'◡'●)ノ♥

    第 1 条附言  ·  2015-07-24 00:15:37 +08:00
    谢谢大家的帮忙,现将目前收集到的结果整理出来,给有需要的朋友做个参考。
    PS. 我用图片插入到帖子中,这样以后更新的话,我只要替换图片就可以啦。

    http://upyun-v2ex.b0.upaiyun.com/wechat-browser-viewport.png
    第 2 条附言  ·  2015-07-24 22:45:29 +08:00
    2015-07-24 22:43:55 更新:

    已经更新上面图片中的部分尺寸信息(包括 iPhone 6+ 原先的数据是来自楼主妈妈的 6+,可能更字体放大了有关,变得和 6 一样了),如果遇到图片没更新,请尝试强制刷新;

    另外,提供 Excel 格式的数据,方便大家做进一步整理和统计:
    http://upyun-v2ex.b0.upaiyun.com/wechat-browser-viewport.xlsx

    再次谢谢大家的帮忙~!
    111 条回复    2015-07-30 13:58:25 +08:00
    1  2  
    Roboo
        1
    Roboo  
       2015-07-23 21:21:34 +08:00 via Android   ❤️ 1
    moto g 360x519
    abelyao
        2
    abelyao  
    OP
       2015-07-23 21:23:34 +08:00
    @Roboo 等了20分钟,有人回复了,好激动,谢谢!!
    Ellison
        3
    Ellison  
       2015-07-23 21:28:38 +08:00   ❤️ 1
    三儿子 360x519
    abelyao
        4
    abelyao  
    OP
       2015-07-23 21:30:34 +08:00
    @Ellison 是 Galaxy Nexus 吗?跟 MOTO G 一样,谢谢~~~
    scream7
        5
    scream7  
       2015-07-23 21:31:57 +08:00   ❤️ 1
    魅蓝note 360*567
    xiaojj
        6
    xiaojj  
       2015-07-23 21:33:28 +08:00   ❤️ 1
    nexus4 384*519

    华为6plus360*519
    奇了怪了
    Whoiu
        7
    Whoiu  
       2015-07-23 21:33:48 +08:00
    魅蓝note 360*567
    kikyous
        8
    kikyous  
       2015-07-23 21:34:51 +08:00   ❤️ 1
    mi 2s 360*567
    CinderellaCiCi
        9
    CinderellaCiCi  
       2015-07-23 21:38:44 +08:00 via Android   ❤️ 1
    魅族mx4 pro
    384*567
    abelyao
        10
    abelyao  
    OP
       2015-07-23 21:42:10 +08:00
    @CinderellaCiCi
    @kikyous
    @xiaojj
    @scream7

    谢谢各位朋友的帮忙~!
    Ellison
        11
    Ellison  
       2015-07-23 21:42:50 +08:00   ❤️ 1
    @abelyao 嗯,是 Galaxy Nexus
    还有台当热点用的红米 Note, 360x567
    扫完马上把微信卸载辣
    Xs0ul
        12
    Xs0ul  
       2015-07-23 21:43:48 +08:00   ❤️ 1
    nexus5 360*519
    分辨率有这么低吗。。
    abelyao
        13
    abelyao  
    OP
       2015-07-23 21:44:06 +08:00
    @Ellison 太感谢你啦!专门装了个微信,谢谢!!
    crs0910
        14
    crs0910  
       2015-07-23 21:44:29 +08:00 via iPhone
    不改设计一定会变形。这是诅咒。😁
    abelyao
        15
    abelyao  
    OP
       2015-07-23 21:45:42 +08:00
    @Xs0ul 因为浏览网页不会按照物理分辨率来显示的,系统会自动缩放,加上微信浏览器有个顶部工具条,所以可用区域会剩下得比较少。谢谢帮忙~~~
    abelyao
        16
    abelyao  
    OP
       2015-07-23 21:47:00 +08:00
    @crs0910 做的是一个小游戏,要考虑竖向分辨率(高)内可以放多少东西,然后高分辨率的再用媒体查询把元素之间的距离拉开一点,不然显得挤到一块去了。
    Tyler1989
        17
    Tyler1989  
       2015-07-23 21:47:22 +08:00 via Android   ❤️ 1
    moto x2013,360 x 567
    buli
        18
    buli  
       2015-07-23 21:48:05 +08:00 via Android   ❤️ 1
    oneplus 360 x 567
    Huadb
        19
    Huadb  
       2015-07-23 21:50:15 +08:00   ❤️ 1
    5C 320x504
    abelyao
        20
    abelyao  
    OP
       2015-07-23 21:50:42 +08:00
    @Tyler1989 谢谢~~
    @buli 谢谢~ 请问是一加哪个型号?我看了一下有 One / One Mini / Two,不知道有没有区别
    abelyao
        21
    abelyao  
    OP
       2015-07-23 21:51:52 +08:00
    @Huadb 谢谢~ iPhone 比较好测,5/5c/5s 都一样,6/6p 也一样,4 和 4s 貌似也都一样
    buli
        22
    buli  
       2015-07-23 22:02:46 +08:00 via Android   ❤️ 1
    @abelyao one和onemini配置都一样(只是移动和联通区别)把 two 这月28号才开发布会。
    abelyao
        23
    abelyao  
    OP
       2015-07-23 22:04:54 +08:00
    @buli 明白啦,谢谢~~
    guojing
        24
    guojing  
       2015-07-23 22:15:05 +08:00   ❤️ 1
    Nexus 5 360x519
    qiayue
        25
    qiayue  
       2015-07-23 22:16:02 +08:00   ❤️ 1
    小米4 360*572
    abelyao
        26
    abelyao  
    OP
       2015-07-23 22:24:48 +08:00
    @guojing @qiayue 谢谢两位~~
    Laobai
        27
    Laobai  
       2015-07-23 22:35:24 +08:00   ❤️ 1
    Oneplus One 360*567
    hahamy
        28
    hahamy  
       2015-07-23 22:40:07 +08:00
    galaxy nexus,也就是谷歌三儿子 360*519

    然后感谢楼主,我也是做微信web前端的, cnzz和百度后台统计的分辨率不准,好像是统计的手机屏幕分辨率,不是viewport后的实际容器分辨率(device pixel)。
    每天都要做适配,用的chrome的浏览器模拟工具,减64(微信状态条高度),可是实际上这个并不是很准,因为安卓有些手机下面是虚拟按键,会占据一部分高度

    另外请教下楼主,适配用的什么策略,因为设计稿一般是按320*1008设计的,在4s下面320*416根本放不下
    Yokira
        29
    Yokira  
       2015-07-23 22:41:20 +08:00 via Android   ❤️ 1
    Moto X Pro 411*610
    zi
        30
    zi  
       2015-07-23 22:42:08 +08:00   ❤️ 1
    荣耀6 360*519
    hahamy
        31
    hahamy  
       2015-07-23 22:47:18 +08:00   ❤️ 1
    提醒下
    element.innerHTML = document.body.clientWidth + ' x ' + document.body.clientHeight;
    这个得到的分辨率不一定准确,一小部分机型上会得到手机物理分辨率,比如三星部分机型,当时一个项目上线后有人反馈三星几个型号显示乱了,才发现这个问题

    pageWidth = document.documentElement.clientWidth;
    pageHeight = document.documentElement.clientHeight;
    用上面这个,暂时还没发现不准的情况
    bidu
        32
    bidu  
       2015-07-23 22:49:21 +08:00 via Android   ❤️ 1
    Galaxy S4 360 x 567
    chanssl
        33
    chanssl  
       2015-07-23 22:52:35 +08:00 via Android   ❤️ 1
    MOTO X 2013 360x519
    nicktogo
        34
    nicktogo  
       2015-07-23 22:53:31 +08:00   ❤️ 1
    MOTO X 2014 360 519
    TwoBall
        35
    TwoBall  
       2015-07-23 22:53:38 +08:00   ❤️ 1
    水果6 375 x 603
    Cavolo
        36
    Cavolo  
       2015-07-23 23:03:18 +08:00 via iPhone   ❤️ 1
    5s 320*504
    wwqgtxx
        37
    wwqgtxx  
       2015-07-23 23:09:50 +08:00 via Android   ❤️ 1
    nubia z9max 360*567
    edward1992
        38
    edward1992  
       2015-07-23 23:12:25 +08:00   ❤️ 1
    meizu mx3 432*599
    abelyao
        39
    abelyao  
    OP
       2015-07-23 23:14:11 +08:00
    @hahamy 超出这么多也不好做适配啊,实在不行就滚屏吧,因为我这个在做的只要一屏显示完,对于 iPhone 4 的情况我是直接把部分元素缩小了。目前收集到的其它机型(包括安卓)至少也都有 500 多的高度,足够我要展示的元素啦~

    @hahamy 谢谢提醒,可能是因为我的 CSS 中先让 html 和 body 撑到 100% 了,目前 V 友反馈到的数据来看应该都还是准确的,起码不是物理分辨率。
    abelyao
        40
    abelyao  
    OP
       2015-07-23 23:17:18 +08:00
    @chanssl @nicktogo 奇怪,你们的 MOTO X 怎么和 @Tyler1989 的高度不一样呢…
    abelyao
        41
    abelyao  
    OP
       2015-07-23 23:20:12 +08:00
    @Laobai
    @Yokira
    @zi
    @bidu
    @TwoBall
    @Cavolo
    @wwqgtxx
    @edward1992

    谢谢大家的帮忙~~
    hahamy
        42
    hahamy  
       2015-07-23 23:45:41 +08:00   ❤️ 1
    @abelyao 嗯,适配不是个容易的活,安卓手机的分辨率太多了,像我做的适配,500多也不一定能放得下,psd里320*504,那么在360宽的手机里按等比缩放就需要504 * 360 / 320 = 567高,因为里面的元素,比如图片,要跟着屏幕的宽度变化
    另外,楼主我们做的事情可能差不多,有时间做兼职吗?我这边有时候活做不过来
    Tyler1989
        43
    Tyler1989  
       2015-07-23 23:49:27 +08:00 via Android   ❤️ 1
    @abelyao 不知道额,我的是S版
    yyork
        44
    yyork  
       2015-07-23 23:50:08 +08:00 via Android   ❤️ 1
    红米2A 360*567
    abelyao
        45
    abelyao  
    OP
       2015-07-24 00:10:13 +08:00
    @Tyler1989 还好 567 和 519 都是两个常见高度,会不会和开启/关闭虚拟按键有关呢…

    @hahamy 谢谢~ 最近手里的事比较多,时间也错不开,我看了您之前的帖子,好像也是微信小游戏哈,不过我这个小游戏是自己一个人做全部,没人搞设计什么的,看你还有人出设计稿啥的,真羡慕。前端本来坑就不少,微信接口和 JSSDK 也一堆坑,真心蛋疼。

    @yyork 谢谢帮忙~~
    mxymarcos
        46
    mxymarcos  
       2015-07-24 00:18:13 +08:00   ❤️ 1
    我的 Moto X 2013 也是 360×519 的…
    reyi
        47
    reyi  
       2015-07-24 00:18:24 +08:00   ❤️ 1
    小米2s 360*567
    abelyao
        48
    abelyao  
    OP
       2015-07-24 00:21:44 +08:00
    @mxymarcos
    @reyi

    谢谢帮忙~~
    mamk1222
        49
    mamk1222  
       2015-07-24 00:24:38 +08:00 via iPad   ❤️ 1
    Sony Xperia Z 360x519
    243205964
        50
    243205964  
       2015-07-24 00:36:07 +08:00   ❤️ 1
    一加A0001 360 x 567
    hahamy
        51
    hahamy  
       2015-07-24 00:38:21 +08:00   ❤️ 1
    @abelyao 嗯嗯,canvas的游戏在v2找了个朋友,挺不错的,现在缺的是做移动端web页面的人
    twor2
        52
    twor2  
       2015-07-24 01:11:53 +08:00   ❤️ 1
    红心一片
    abmin521
        53
    abmin521  
       2015-07-24 05:45:37 +08:00 via Android   ❤️ 1
    @guojing
    @Xs0ul
    nexus5 360*534
    i8s301a
        54
    i8s301a  
       2015-07-24 05:46:25 +08:00 via Android   ❤️ 1
    大法 Xperia Z3 360 x 519
    Tyler1989
        55
    Tyler1989  
       2015-07-24 08:08:30 +08:00 via Android   ❤️ 1
    @abelyao 是的,我隐藏了虚拟键,防止烧屏顺便屏幕看起来大了不少😂
    lightning1141
        56
    lightning1141  
       2015-07-24 08:13:16 +08:00 via Android   ❤️ 1
    荣耀X2 480X664
    honk
        57
    honk  
       2015-07-24 08:15:49 +08:00 via Android   ❤️ 1
    Nexus 5 : 360 X 520

    为何很多人是 519 ? 难道因为我的系统是 M Preview ?
    myywin
        58
    myywin  
       2015-07-24 08:20:58 +08:00 via iPhone   ❤️ 1
    320 x 504 水果5乱入
    zhjits
        59
    zhjits  
       2015-07-24 08:27:47 +08:00   ❤️ 1
    OnePlus One 360*567
    qq651438555
        60
    qq651438555  
       2015-07-24 08:27:47 +08:00   ❤️ 1
    360*567红米NOTE移动4G增强版
    hinate
        61
    hinate  
       2015-07-24 08:50:06 +08:00 via Android   ❤️ 1
    384*519 mx4
    journey
        62
    journey  
       2015-07-24 08:51:49 +08:00   ❤️ 1
    小米2 360*567
    hinate
        63
    hinate  
       2015-07-24 08:52:06 +08:00 via Android   ❤️ 1
    去掉sb是 384*567 mx4
    liiihhhh
        64
    liiihhhh  
       2015-07-24 09:10:52 +08:00   ❤️ 1
    一加 360*567
    solupro
        65
    solupro  
       2015-07-24 09:20:38 +08:00   ❤️ 1
    iPhone6 Plus 414&672
    tenione
        66
    tenione  
       2015-07-24 09:26:25 +08:00   ❤️ 1
    LG G4 360*525
    yhxx
        67
    yhxx  
       2015-07-24 09:29:56 +08:00   ❤️ 1
    320*486
    NOKIA 925
    虽然不是安卓
    DT27
        68
    DT27  
       2015-07-24 09:34:23 +08:00   ❤️ 1
    Sony Z3 360 x 567
    DT27
        69
    DT27  
       2015-07-24 09:35:06 +08:00   ❤️ 1
    我这个是把底部的虚拟按键隐藏了
    DT27
        70
    DT27  
       2015-07-24 09:37:56 +08:00   ❤️ 1
    屏幕分辨率1920*1080的,
    没有虚拟按键,微信分辨率就是360*567,
    有虚拟按键,微信分辨率就是360*519
    Ansen
        71
    Ansen  
       2015-07-24 09:42:39 +08:00   ❤️ 1
    iPhone 5 320 x 504
    sunyang
        72
    sunyang  
       2015-07-24 09:50:32 +08:00   ❤️ 1
    MX3 432x599
    lele140
        73
    lele140  
       2015-07-24 09:51:35 +08:00   ❤️ 1
    mx4
    384*567
    joodo
        74
    joodo  
       2015-07-24 10:19:33 +08:00   ❤️ 1
    sony z3 compact 360 x 519
    smg
        75
    smg  
       2015-07-24 10:21:25 +08:00   ❤️ 1
    锤子T1

    360*566
    sunchuo
        76
    sunchuo  
       2015-07-24 10:36:50 +08:00   ❤️ 1
    iPhone 6


    375x603
    ximan
        77
    ximan  
       2015-07-24 10:52:08 +08:00   ❤️ 1
    MX2
    400x519
    abelyao
        78
    abelyao  
    OP
       2015-07-24 10:52:36 +08:00
    @hahamy
    @twor2
    @abmin521
    @i8s301a
    @Tyler1989
    @lightning1141
    @honk
    @myywin
    @zhjits
    @qq651438555
    @hinate
    @journey
    @hinate
    @liiihhhh
    @solupro
    @tenione
    @yhxx
    @DT27
    @Ansen
    @sunyang
    @lele140
    @joodo
    @smg
    @sunchuo

    谢谢大家!!大家好热心!!谢谢!!
    今晚回去我再整理一下,更新 APPEND 中的图片,现在知道为什么那么多 519 和 567 了,哈
    WenJimmy
        79
    WenJimmy  
       2015-07-24 10:54:32 +08:00   ❤️ 1
    MX4 384 X 567
    imNull
        80
    imNull  
       2015-07-24 11:07:07 +08:00   ❤️ 1
    Coolpad 5892 361*569
    linxy
        81
    linxy  
       2015-07-24 11:28:08 +08:00 via Android   ❤️ 1
    sony z2
    360*519
    CtrlF
        82
    CtrlF  
       2015-07-24 11:31:58 +08:00   ❤️ 1
    LG vs980

    393*630
    iamzcd
        83
    iamzcd  
       2015-07-24 11:35:27 +08:00   ❤️ 1
    Sony ZIc 360 x 519
    ilili
        84
    ilili  
       2015-07-24 12:13:26 +08:00   ❤️ 1
    Nubia Z7 mini 360*567
    小米3 360*572
    红米NOTE 360*567

    好像360*567这个分辨率非常多,为什么呢?
    lance26
        85
    lance26  
       2015-07-24 12:54:39 +08:00   ❤️ 1
    貌似还没人回复诺基亚的, LUMIA920, 320*486
    mawing
        86
    mawing  
       2015-07-24 12:59:32 +08:00 via Android   ❤️ 1
    魅族 MX3
    393 x 581
    chairuosen
        87
    chairuosen  
       2015-07-24 13:01:44 +08:00   ❤️ 1
    适配的话参考这个里面的rem方法 http://www.w3ctech.com/topic/979
    不同分辨率只要考虑长宽比就好了
    wyongzhi
        88
    wyongzhi  
       2015-07-24 13:02:09 +08:00   ❤️ 1
    小米Note,393*630
    abelyao
        89
    abelyao  
    OP
       2015-07-24 13:09:29 +08:00
    @chairuosen 谢谢,另外 @hahamy 可以看看 87 楼给出的参考~
    abelyao
        90
    abelyao  
    OP
       2015-07-24 13:12:04 +08:00
    @ilili 70 楼的 @DT27 有给出答案,我也解惑了。大多数手机都是 1920x1080 的分辨率,有虚拟按键的就是 519,没虚拟按键的则是 567 哈
    chenshaoju
        91
    chenshaoju  
       2015-07-24 13:12:31 +08:00   ❤️ 1
    Nexus 4 384x568

    隐藏了海带条。
    abelyao
        92
    abelyao  
    OP
       2015-07-24 13:13:08 +08:00
    @WenJimmy
    @lovefree13
    @linxy
    @CtrlF
    @iamzcd
    @ilili
    @lance26
    @mawing
    @wyongzhi

    谢谢大家帮忙~ 谢谢!
    iyaozhen
        93
    iyaozhen  
       2015-07-24 13:42:15 +08:00   ❤️ 1
    华为荣耀6 360*519
    iyaozhen
        94
    iyaozhen  
       2015-07-24 13:44:19 +08:00   ❤️ 1
    @iyaozhen 隐藏虚拟按键后是360*567

    话说这分辨率是怎么决定的?和 720p 和 1080p 有什么区别和联系
    jdlau
        95
    jdlau  
       2015-07-24 14:12:27 +08:00   ❤️ 1
    中兴v5s 360X567
    ThreeBody
        96
    ThreeBody  
       2015-07-24 14:40:10 +08:00 via Android   ❤️ 1
    三星 Glaxy S5 360 x 567
    unknownservice
        97
    unknownservice  
       2015-07-24 16:39:19 +08:00   ❤️ 1
    Sharp 305SH 360*519
    limitsy
        98
    limitsy  
       2015-07-24 17:03:01 +08:00   ❤️ 1
    iPhone 6 和 6Plus 不一样的吧。
    6Plus 找人测了一下是 414 x 672
    jackielin
        99
    jackielin  
       2015-07-24 17:07:20 +08:00   ❤️ 1
    小米 3 360 x 572
    mgcnrx11
        100
    mgcnrx11  
       2015-07-24 17:14:02 +08:00   ❤️ 1
    @hahamy 只做微信的话,现在微信都统一了Android上的内核了,估计这种不一致应该不会有,当然,我猜的。


    @abelyao iPhone 6 Plus 图上显示错了
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   986 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 19:56 · PVG 03:56 · LAX 12:56 · JFK 15:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.