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

[Tankpt]

情况是这样的。之前没怎么接触过移动端页面的制作==！
然后这回我按照psd的图切了，几个背景，都放到一个大图里，用的时候就定位用，接着我将整体的 宽度设置为640px，meta中禁止缩放，但是在实际结果中，发现页面瘫了，貌似呈现的效果就是感觉就是感觉宽度设定不对，有部分溢出了，如果在meta中设置了width为640px。就又能用了！！

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

不晓得我的表诉是不是太渣了==！

[Tankpt]

==大神周末不在吗

[jsonline]

代码放到 jsbin 再来讨论。

[coraline]

iphone 的 viewport 是320px android的viewport 各不相同， 所以你是不能直接定义px

[Tankpt]

@jsonline == 感觉有些东西不太好拿出来==所以就这么问了。不好意思了

[Tankpt]

@coraline 那是不是一些背景图这里的东西。都是用background-size进行设置的？

[coraline]

@Tankpt 移动端的话最好是百分比来布局，背景不一定要用background-size来设置，background-size用来2x图片避免模糊。

[Tankpt]

@coraline 那那些图应该怎么处理呢？设计给的都是640px的宽度。我看到backgound-size：contain貌似就能让背景包含进去。自适应

[vexfisher]

我也经常要做移动端页面，于是做了iMobile组件，希望可用帮到你。
https://github.com/ikitty/iMobile

原理是通过动态调整viewport的值来自动适应各种分辨率的手持设备。对于apple机器直接设置viewport中的width，对于android机器，则是设置dpi。

[coraline]

@Tankpt 图片是web ui图还是展示图片？ 如果是展示图片的话，可以设定 max-width: 90%;
max-height: 90%; 反正就是不超过100% ， 这样就不会超出页面

[Tankpt]

@vexfisher = =！依然谢谢了

[Tankpt]

@coraline 我觉得应该就是UI图，我是用来当背景的

[vexfisher]

@Tankpt 如果方便的话，可用把代码托管到github上，这样大家可用帮你看看

另外按你的描述，在viewport中写死width，那你的网页在大屏幕的android手机是无法填充整个屏幕（右侧会有白条）

[zhoufenfens]

设计给的当然是640x960像素的设计稿，你放在手机页面上涉及到retina屏的问题，所以你需要把基准设置到320px,然后用background-size：100% 100%去控制

[Tankpt]

@zhoufenfens 问下这个基准是怎么处理呢==第一次做，好尴尬