V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
iugo
V2EX  ›  程序员

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

  •  
  •   iugo ·
    iugo · 2015-08-14 13:21:52 +08:00 · 3290 次点击
    这是一个创建于 3384 天前的主题,其中的信息可能已经有所发展或是发生改变。
    自从 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 解决问题:
    16 条回复    2015-08-20 17:04:07 +08:00
    botao1
        1
    botao1  
       2015-08-14 13:35:59 +08:00
    用了media query,就要配合弹性布局啊~
    learnshare
        2
    learnshare  
       2015-08-14 13:42:25 +08:00   ❤️ 1
    iugo
        3
    iugo  
    OP
       2015-08-14 14:27:25 +08:00
    @botao1 就是想减少一些.

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

    想减轻工作量.
    ariesjia
        4
    ariesjia  
       2015-08-14 16:30:57 +08:00
    用 rem + 动态 Viewport 完美解决这个问题
    ariesjia
        5
    ariesjia  
       2015-08-14 16:35:26 +08:00   ❤️ 1
    wingyiu
        6
    wingyiu  
       2015-08-14 17:18:21 +08:00
    @ariesjia border宽度也能rem吗?之前用double px+动态viewport在安卓下边框线条会有问题
    learnshare
        7
    learnshare  
       2015-08-14 17:26:06 +08:00
    @wingyiu em/rem 只适用于文字相关的属性
    banri
        8
    banri  
       2015-08-14 17:40:33 +08:00
    @learnshare
    rem的基准值是html标签的font-size,但它的适用范围不止于font-size

    @wingyiu
    可是使用
    banri
        9
    banri  
       2015-08-14 17:40:47 +08:00
    可以使用
    banri
        10
    banri  
       2015-08-14 17:43:35 +08:00
    补充个。。。建议不要使用html{font-size:100%} 这样定义
    浏览器的默认font-size还是有差异的,大多数浏览器都是16px,但是Firefox是15px
    所以不用百分比,直接用像素会好一些
    learnshare
        11
    learnshare  
       2015-08-14 18:40:45 +08:00
    @banri 我说的是适用于文字,不是说绝对不可以用在其他地方 :)
    q84629462
        12
    q84629462  
       2015-08-14 19:15:58 +08:00
    我有两个疑问:
    1、手机横屏后,宽还需要设为360px吗?
    2、平板类(ipad mini,nexus 7)也需要设为360px宽吗?
    TiramisuDoo
        13
    TiramisuDoo  
       2015-08-15 09:48:00 +08:00
    @ariesjia 同用
    iugo
        14
    iugo  
    OP
       2015-08-16 09:22:27 +08:00
    @q84629462

    1 与 2 均是宽度超过 600 后的情况. 目前小项目不做适配, 也就是说任何情况, 只要支持 Viewport 就变成宽 360px. 实际使用中可以灵活判断, 比如当设备宽为 450 内的统一设为 360, 超过后显示另一种布局.
    botao1
        15
    botao1  
       2015-08-20 15:32:57 +08:00
    @iugo media query 只是设定断点,容器不要设为定宽的,而是用百分比,也就弹性布局!
    iugo
        16
    iugo  
    OP
       2015-08-20 17:04:07 +08:00
    @botao1 在布局以外, 在个别情况下百分比不好解决问题, 比如 canvas 这类有固定宽高的.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5643 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 08:07 · PVG 16:07 · LAX 00:07 · JFK 03:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.