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

This topic created in 4370 days ago, the information mentioned may be changed or developed.

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

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

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

640px

meta

页面

14 replies • 2014-07-05 14:15:55 +08:00

Tankpt

Jul 5, 2014

==大神周末不在吗

jsonline

Jul 5, 2014 via Android

代码放到 jsbin 再来讨论。

coraline

Jul 5, 2014

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

Tankpt

Jul 5, 2014

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

Tankpt

Jul 5, 2014

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

coraline

Jul 5, 2014

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

Tankpt

Jul 5, 2014

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

vexfisher

Jul 5, 2014

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

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

coraline

Jul 5, 2014

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

Tankpt

Jul 5, 2014

@vexfisher = =！依然谢谢了

Tankpt

Jul 5, 2014

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

vexfisher

Jul 5, 2014

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

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

zhoufenfens

Jul 5, 2014

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

Tankpt

Jul 5, 2014

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