V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Tankpt
V2EX  ›  问与答

求助==!关于移动端的页面的问题

  •  
  •   Tankpt · 2014-07-05 11:46:43 +08:00 · 4021 次点击
    这是一个创建于 3798 天前的主题,其中的信息可能已经有所发展或是发生改变。
    情况是这样的。之前没怎么接触过移动端页面的制作==!
    然后这回我按照psd的图切了,几个背景,都放到一个大图里,用的时候就定位用,接着我将整体的 宽度设置为640px,meta中禁止缩放,但是在实际结果中,发现页面瘫了,貌似呈现的效果就是感觉就是感觉宽度设定不对,有部分溢出了,如果在meta中设置了width为640px。就又能用了!!

    问题是这是个什么情况。是不是不能将整体设置为640px的?

    不晓得我的表诉是不是太渣了==!
    14 条回复    2014-07-05 14:15:55 +08:00
    Tankpt
        1
    Tankpt  
    OP
       2014-07-05 12:35:29 +08:00
    ==大神周末不在吗
    jsonline
        2
    jsonline  
       2014-07-05 12:37:28 +08:00 via Android
    代码放到 jsbin 再来讨论。
    coraline
        3
    coraline  
       2014-07-05 12:49:32 +08:00
    iphone 的 viewport 是320px android的viewport 各不相同, 所以你是不能直接定义px
    Tankpt
        4
    Tankpt  
    OP
       2014-07-05 12:52:30 +08:00
    @jsonline == 感觉有些东西不太好拿出来==所以就这么问了。不好意思了
    Tankpt
        5
    Tankpt  
    OP
       2014-07-05 12:53:08 +08:00
    @coraline 那是不是一些背景图这里的东西。都是用background-size进行设置的?
    coraline
        6
    coraline  
       2014-07-05 12:57:15 +08:00
    @Tankpt 移动端的话最好是百分比来布局,背景不一定要用background-size来设置,background-size用来2x图片避免模糊。
    Tankpt
        7
    Tankpt  
    OP
       2014-07-05 12:58:52 +08:00
    @coraline 那那些图应该怎么处理呢?设计给的都是640px的宽度。我看到backgound-size:contain貌似就能让背景包含进去。自适应
    vexfisher
        8
    vexfisher  
       2014-07-05 13:05:40 +08:00
    我也经常要做移动端页面,于是做了iMobile组件,希望可用帮到你。
    https://github.com/ikitty/iMobile

    原理是通过动态调整viewport的值来自动适应各种分辨率的手持设备。对于apple机器直接设置viewport中的width,对于android机器,则是设置dpi。
    coraline
        9
    coraline  
       2014-07-05 13:08:46 +08:00
    @Tankpt 图片是web ui图还是展示图片? 如果是展示图片的话,可以设定 max-width: 90%;
    max-height: 90%; 反正就是不超过100% , 这样就不会超出页面
    Tankpt
        10
    Tankpt  
    OP
       2014-07-05 13:09:21 +08:00
    @vexfisher = =!依然谢谢了
    Tankpt
        11
    Tankpt  
    OP
       2014-07-05 13:09:58 +08:00
    @coraline 我觉得应该就是UI图,我是用来当背景的
    vexfisher
        12
    vexfisher  
       2014-07-05 13:14:22 +08:00
    @Tankpt 如果方便的话,可用把代码托管到github上,这样大家可用帮你看看

    另外按你的描述,在viewport中写死width,那你的网页在大屏幕的android手机是无法填充整个屏幕(右侧会有白条)
    zhoufenfens
        13
    zhoufenfens  
       2014-07-05 14:09:48 +08:00
    设计给的当然是640x960像素的设计稿,你放在手机页面上涉及到retina屏的问题,所以你需要把基准设置到320px,然后用background-size:100% 100%去控制
    Tankpt
        14
    Tankpt  
    OP
       2014-07-05 14:15:55 +08:00
    @zhoufenfens 问下这个基准是怎么处理呢==第一次做,好尴尬
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5489 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 09:04 · PVG 17:04 · LAX 01:04 · JFK 04:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.