这是一个创建于 3826 天前的主题，其中的信息可能已经有所发展或是发生改变。
自从 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 解决问题:
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 解决问题:
 |
1
botao1 2015 年 8 月 14 日
用了media query，就要配合弹性布局啊~
|
 |
2
learnshare 2015 年 8 月 14 日  1
http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoints
Google Design 给出的宽度分界线 |
 |
4
ariesjia 2015 年 8 月 14 日
用 rem + 动态 Viewport 完美解决这个问题
|
|
5
ariesjia 2015 年 8 月 14 日 1
|
|
7
learnshare 2015 年 8 月 14 日
@wingyiu em/rem 只适用于文字相关的属性
|
 |
8
banri 2015 年 8 月 14 日
|
|
9
banri 2015 年 8 月 14 日
可以使用
|
|
10
banri 2015 年 8 月 14 日
补充个。。。建议不要使用html{font-size:100%} 这样定义
浏览器的默认font-size还是有差异的，大多数浏览器都是16px，但是Firefox是15px 所以不用百分比，直接用像素会好一些 |
|
11
learnshare 2015 年 8 月 14 日
@banri 我说的是适用于文字，不是说绝对不可以用在其他地方 :)
|
 |
12
q84629462 2015 年 8 月 14 日
我有两个疑问：
1、手机横屏后，宽还需要设为360px吗？ 2、平板类（ipad mini,nexus 7）也需要设为360px宽吗？ |
 |
13
TiramisuDoo 2015 年 8 月 15 日
@ariesjia 同用
|
Select Language