解决移动端 Web 页面宽度的分裂

[iugo]

自从 iPhone 开始使用 [Viewport], 移动端页面布局就被定义成目前这样了: 页面宽度的像素与屏幕分辨率无关, 与屏幕物理尺寸也没有直接关系, 宽度听凭浏览器或操作系统的安排.

device-width 这个属性, 目前流行的值有以下几个:

- 320px: iPhone 5s 等
- 360px: Android 中流行
- 375px: iPhone 6
- 414px: iPhone 6 Plus

可以看到, 自从苹果发布 iPhone 6 就开始打算利用屏幕宽度. 这样会有更好的体验, 无疑. 但是开发复杂度被增大了.

屏幕宽度越宽, 容纳的内容就越多, 这样可以体现出大屏的优势.

移动端的页面像素宽度基本无关乎屏幕分辨率, 大家现在的表现都不错. 主要影响页面像素宽度的是屏幕物理尺寸. iPhone 在小屏时代的物理宽度大概是 5 厘米, 实际像素 640, 页面像素默认 320. 我觉得 5 厘米, 320 像素大概是个黄金搭档了.

那么大屏时代的黄金搭档是什么?

不好找. 4.7 英寸, 5.0 英寸, 5.5 英寸. 太麻烦了.

考虑到三星 Note 3 这样的大屏也遵从了 Android 常用的 360px, 所以我想将所有大屏的页面宽度统一设置为 360px. 这样能尽量减少开发复杂度.

[Viewport]: (https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html)

四行代码 + 类 jQuery 解决问题:

https://gist.github.com/iugo/04ad0531f47e5cf1b1b5  显示 Gist 代码 

[botao1]

用了media query，就要配合弹性布局啊~

[learnshare]

http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoints

Google Design 给出的宽度分界线

[iugo]

@botao1 就是想减少一些.

最近的一个项目同事做了三个版本 320, 360, 375~414

想减轻工作量.

[ariesjia]

用 rem + 动态 Viewport 完美解决这个问题

[ariesjia]

https://gist.github.com/ariesjia/7a2372feb8588c408811

[wingyiu]

@ariesjia border宽度也能rem吗？之前用double px+动态viewport在安卓下边框线条会有问题

[learnshare]

@wingyiu em/rem 只适用于文字相关的属性

[banri]

@learnshare
rem的基准值是html标签的font-size，但它的适用范围不止于font-size

@wingyiu
可是使用

[banri]

可以使用

[banri]

补充个。。。建议不要使用html{font-size:100%} 这样定义
浏览器的默认font-size还是有差异的，大多数浏览器都是16px，但是Firefox是15px
所以不用百分比，直接用像素会好一些

[learnshare]

@banri 我说的是适用于文字，不是说绝对不可以用在其他地方 :)

[q84629462]

我有两个疑问：
1、手机横屏后，宽还需要设为360px吗？
2、平板类（ipad mini,nexus 7）也需要设为360px宽吗？

[TiramisuDoo]

@ariesjia 同用

[iugo]

@q84629462

1 与 2 均是宽度超过 600 后的情况. 目前小项目不做适配, 也就是说任何情况, 只要支持 Viewport 就变成宽 360px. 实际使用中可以灵活判断, 比如当设备宽为 450 内的统一设为 360, 超过后显示另一种布局.

[botao1]

@iugo media query 只是设定断点，容器不要设为定宽的，而是用百分比，也就弹性布局！

[iugo]

@botao1 在布局以外, 在个别情况下百分比不好解决问题, 比如 canvas 这类有固定宽高的.