(●''●) 大家帮帮忙!测试一下各种手机中微信浏览器的分辨率,谢谢! - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
abelyao
V2EX    问与答

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

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

    正在做一个专门针对微信浏览器访问的页面,但因为安卓手机各种分辨率太多了,身边也没太多机型可以测试,想请各位有安卓手机的 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 2130:34 +08:00
    @Ellison 是 Galaxy Nexus 吗?跟 MOTO G 一样,谢谢~~~
    scream7
        5
    scream7  
    PRO
       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  
    PRO
       2015-07-23 22:16:02 +08:00   1
    小米 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根本放不下
    yizi
        29
    yizi  
       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
    solu
        65
    solu  
       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
        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
    @wyongzh

    谢谢大家帮忙~ 谢谢!
    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
    Yinnfeng
        98
    Yinnfeng  
       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   span class="small fade"> 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     Solana     991 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 39ms UTC 18:51 PVG 02:51 LAX 11:51 JFK 14:51
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86