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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3402 天前的主题，其中的信息可能已经有所发展或是发生改变。

正在做一个专门针对微信浏览器访问的页面，但因为安卓手机各种分辨率太多了，身边也没太多机型可以测试，想请各位有安卓手机的 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

2015-07-23 21:21:34 +08:00 via Android

moto g 360x519

abelyao

2015-07-23 21:23:34 +08:00

@Roboo 等了20分钟，有人回复了，好激动，谢谢！！

Ellison

2015-07-23 21:28:38 +08:00

三儿子 360x519

abelyao

2015-07-23 21:30:34 +08:00

@Ellison 是 Galaxy Nexus 吗？跟 MOTO G 一样，谢谢~~~

scream7

2015-07-23 21:31:57 +08:00

魅蓝note 360*567

xiaojj

2015-07-23 21:33:28 +08:00

nexus4 384*519

华为6plus360*519
奇了怪了

Whoiu

2015-07-23 21:33:48 +08:00

魅蓝note 360*567

kikyous

2015-07-23 21:34:51 +08:00

mi 2s 360*567

CinderellaCiCi

2015-07-23 21:38:44 +08:00 via Android

魅族mx4 pro
384*567

abelyao

2015-07-23 21:42:10 +08:00

@CinderellaCiCi
@kikyous
@xiaojj
@scream7

谢谢各位朋友的帮忙~！

Ellison

2015-07-23 21:42:50 +08:00

@abelyao 嗯,是 Galaxy Nexus
还有台当热点用的红米 Note, 360x567
扫完马上把微信卸载辣

Xs0ul

2015-07-23 21:43:48 +08:00

nexus5 360*519
分辨率有这么低吗。。

abelyao

2015-07-23 21:44:06 +08:00

@Ellison 太感谢你啦！专门装了个微信，谢谢！！

crs0910

2015-07-23 21:44:29 +08:00 via iPhone

不改设计一定会变形。这是诅咒。😁

abelyao

2015-07-23 21:45:42 +08:00

@Xs0ul 因为浏览网页不会按照物理分辨率来显示的，系统会自动缩放，加上微信浏览器有个顶部工具条，所以可用区域会剩下得比较少。谢谢帮忙~~~

abelyao

2015-07-23 21:47:00 +08:00

@crs0910 做的是一个小游戏，要考虑竖向分辨率（高）内可以放多少东西，然后高分辨率的再用媒体查询把元素之间的距离拉开一点，不然显得挤到一块去了。

Tyler1989

2015-07-23 21:47:22 +08:00 via Android

moto x2013，360 x 567

buli

2015-07-23 21:48:05 +08:00 via Android

oneplus 360 x 567

Huadb

2015-07-23 21:50:15 +08:00

5C 320x504

abelyao

2015-07-23 21:50:42 +08:00

@Tyler1989 谢谢~~
@buli 谢谢~ 请问是一加哪个型号？我看了一下有 One / One Mini / Two，不知道有没有区别

abelyao

2015-07-23 21:51:52 +08:00

@Huadb 谢谢~ iPhone 比较好测，5/5c/5s 都一样，6/6p 也一样，4 和 4s 貌似也都一样

buli

2015-07-23 22:02:46 +08:00 via Android

@abelyao one和onemini配置都一样（只是移动和联通区别）把 two 这月28号才开发布会。

abelyao

2015-07-23 22:04:54 +08:00

@buli 明白啦，谢谢~~

guojing

2015-07-23 22:15:05 +08:00

Nexus 5 360x519

qiayue

2015-07-23 22:16:02 +08:00

小米4 360*572

abelyao

2015-07-23 22:24:48 +08:00

@guojing @qiayue 谢谢两位~~

Laobai

2015-07-23 22:35:24 +08:00

Oneplus One 360*567

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

2015-07-23 22:41:20 +08:00 via Android

Moto X Pro 411*610

2015-07-23 22:42:08 +08:00

荣耀6 360*519

hahamy

2015-07-23 22:47:18 +08:00

提醒下
element.innerHTML = document.body.clientWidth + ' x ' + document.body.clientHeight;
这个得到的分辨率不一定准确，一小部分机型上会得到手机物理分辨率，比如三星部分机型，当时一个项目上线后有人反馈三星几个型号显示乱了，才发现这个问题

pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
用上面这个，暂时还没发现不准的情况

bidu

2015-07-23 22:49:21 +08:00 via Android

Galaxy S4 360 x 567

chanssl

2015-07-23 22:52:35 +08:00 via Android

MOTO X 2013 360x519

nicktogo

2015-07-23 22:53:31 +08:00

MOTO X 2014 360 519

TwoBall

2015-07-23 22:53:38 +08:00

水果6 375 x 603

Cavolo

2015-07-23 23:03:18 +08:00 via iPhone

5s 320*504

wwqgtxx

2015-07-23 23:09:50 +08:00 via Android

nubia z9max 360*567

edward1992

2015-07-23 23:12:25 +08:00

meizu mx3 432*599

abelyao

2015-07-23 23:14:11 +08:00

@hahamy 超出这么多也不好做适配啊，实在不行就滚屏吧，因为我这个在做的只要一屏显示完，对于 iPhone 4 的情况我是直接把部分元素缩小了。目前收集到的其它机型（包括安卓）至少也都有 500 多的高度，足够我要展示的元素啦~

@hahamy 谢谢提醒，可能是因为我的 CSS 中先让 html 和 body 撑到 100% 了，目前 V 友反馈到的数据来看应该都还是准确的，起码不是物理分辨率。

abelyao

2015-07-23 23:17:18 +08:00

@chanssl @nicktogo 奇怪，你们的 MOTO X 怎么和 @Tyler1989 的高度不一样呢…

abelyao

2015-07-23 23:20:12 +08:00

@Laobai
@Yokira
@zi
@bidu
@TwoBall
@Cavolo
@wwqgtxx
@edward1992

谢谢大家的帮忙~~

hahamy

2015-07-23 23:45:41 +08:00

@abelyao 嗯，适配不是个容易的活，安卓手机的分辨率太多了，像我做的适配，500多也不一定能放得下，psd里320*504，那么在360宽的手机里按等比缩放就需要504 * 360 / 320 = 567高，因为里面的元素，比如图片，要跟着屏幕的宽度变化
另外，楼主我们做的事情可能差不多，有时间做兼职吗？我这边有时候活做不过来

Tyler1989

2015-07-23 23:49:27 +08:00 via Android

@abelyao 不知道额，我的是S版

yyork

2015-07-23 23:50:08 +08:00 via Android

红米2A 360*567

abelyao

2015-07-24 00:10:13 +08:00

@Tyler1989 还好 567 和 519 都是两个常见高度，会不会和开启/关闭虚拟按键有关呢…

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

@yyork 谢谢帮忙~~

mxymarcos

2015-07-24 00:18:13 +08:00

我的 Moto X 2013 也是 360×519 的…

reyi

2015-07-24 00:18:24 +08:00

小米2s 360*567

abelyao

2015-07-24 00:21:44 +08:00

@mxymarcos
@reyi

谢谢帮忙~~

mamk1222

2015-07-24 00:24:38 +08:00 via iPad

Sony Xperia Z 360x519

243205964

2015-07-24 00:36:07 +08:00

一加A0001 360 x 567

hahamy

2015-07-24 00:38:21 +08:00

@abelyao 嗯嗯，canvas的游戏在v2找了个朋友，挺不错的，现在缺的是做移动端web页面的人

twor2

2015-07-24 01:11:53 +08:00

红心一片

abmin521

2015-07-24 05:45:37 +08:00 via Android

@guojing
@Xs0ul
nexus5 360*534

i8s301a

2015-07-24 05:46:25 +08:00 via Android

大法 Xperia Z3 360 x 519

Tyler1989

2015-07-24 08:08:30 +08:00 via Android

@abelyao 是的，我隐藏了虚拟键，防止烧屏顺便屏幕看起来大了不少😂

lightning1141

2015-07-24 08:13:16 +08:00 via Android

荣耀X2 480X664

honk

2015-07-24 08:15:49 +08:00 via Android

Nexus 5 : 360 X 520

为何很多人是 519 ? 难道因为我的系统是 M Preview ?

myywin

2015-07-24 08:20:58 +08:00 via iPhone

320 x 504 水果5乱入

zhjits

2015-07-24 08:27:47 +08:00

OnePlus One 360*567

qq651438555

2015-07-24 08:27:47 +08:00

360*567红米NOTE移动4G增强版

hinate

2015-07-24 08:50:06 +08:00 via Android

384*519 mx4

journey

2015-07-24 08:51:49 +08:00

小米2 360*567

hinate

2015-07-24 08:52:06 +08:00 via Android

去掉sb是 384*567 mx4

liiihhhh

2015-07-24 09:10:52 +08:00

一加 360*567

solupro

2015-07-24 09:20:38 +08:00

iPhone6 Plus 414&672

tenione

2015-07-24 09:26:25 +08:00

LG G4 360*525

yhxx

2015-07-24 09:29:56 +08:00

320*486
NOKIA 925
虽然不是安卓

DT27

2015-07-24 09:34:23 +08:00

Sony Z3 360 x 567

DT27

2015-07-24 09:35:06 +08:00

我这个是把底部的虚拟按键隐藏了

DT27

2015-07-24 09:37:56 +08:00

屏幕分辨率1920*1080的，
没有虚拟按键，微信分辨率就是360*567，
有虚拟按键，微信分辨率就是360*519

Ansen

2015-07-24 09:42:39 +08:00

iPhone 5 320 x 504

sunyang

2015-07-24 09:50:32 +08:00

MX3 432x599

lele140

2015-07-24 09:51:35 +08:00

mx4
384*567

joodo

2015-07-24 10:19:33 +08:00

sony z3 compact 360 x 519

smg

2015-07-24 10:21:25 +08:00

锤子T1

360*566

sunchuo

2015-07-24 10:36:50 +08:00

iPhone 6

375x603

ximan

2015-07-24 10:52:08 +08:00

MX2
400x519

abelyao

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 了，哈