手机 web 适应 各种屏幕，不出现上下和左右的滚动条 大神们来帮忙了_html/css_WEB-ITnose

rt
现在有一个手机web , psd 设计稿是 640x1130 (w/h) 的， 现在要求是能在各种大小屏幕的手机里，不出现滚动条， 设计稿里的图片和按钮不被拉长和压扁，就是要等比缩放；

我第一次的做法就是 width:100%, height:100% 然后计算设计稿的图片占的百分比写的css 样式，在不同的手机里，页面里元素均出现不同的拉长或压扁 ，被打回重做

我现在的思路是 在 body 里先做一个 长宽比为 1136/640 的容器，然后把页面中的元素在这个容器里，在按百分比布局，现在问题是 这个1136/640 的容器，什么时候给他设置长宽比？ 我的实现步骤就是用 zepto.js

$(document).ready(function(){        // code   //...在屏幕中间，取出一个面积最大的 1136/640的容器，然后使其居中，左右留白})

但这样一来，页面dom都加载完了，才做这个动作，有点晚了， 我下面的想法就是之前在 1136/640 容器里的标签，全部写在 js 里， 等容器设置好 1136/640 这个长宽比后，再将标签 append 到 这个容器里

不知道这个方法可行不，这样一来，后台程序该怎么写，我觉得这是个很糟糕的设计，求大神们给出宝贵的意见、建议、想法或者解决方案，不胜感激

回复讨论(解决方案)

请搜 响应式设计

简单的
复杂的用css媒体查询试试

@ 二楼， 三楼
这些都有的，我有接触， 但是目前市面这么多手机，媒体查询 如何是好啊
可能是我没把问题描述清楚：

psd 设计稿只有 640 x 1136 (wxh)， 要求是

1.设计稿中的内容全屏显示，允许左右留白，下方留白
2.不能出现滚动条
3.在各种不同尺寸的手机上，设计稿的元素不能被压缩 拉伸，实现等比缩放

如下图， 如果响应式设计、 媒体查询能够实现的话，该怎么设置分界点，麻烦讲一下详细的步骤，谢谢

用js计算吧，设备高度减去头尾高度就是内容区域的高度了，设备宽度即内容区域宽度，然后按设计图的图片比例，计算到底是宽度较小还是高度较小（比如图片宽高比例2：3，即使内容区域尺寸为220：300，仍然认为是高度较小），然后以较小的那个尺寸计算图片尺寸即可（比如按高度计算，则不设置宽度令其自动缩放）
至于居中这些，相信不会有难度

用js计算吧，设备高度减去头尾高度就是内容区域的高度了，设备宽度即内容区域宽度，然后按设计图的图片比例，计算到底是宽度较小还是高度较小（比如图片宽高比例2：3，即使内容区域尺寸为220：300，仍然认为是高度较小），然后以较小的那个尺寸计算图片尺寸即可（比如按高度计算，则不设置宽度令其自动缩放）
至于居中这些，相信不会有难度

嗯 ， 谢谢，基本我们找到共同点了，我也是这么考虑的，但是代码实现，我应该是在dom 加载完后 读取 显示区域的宽 高比吧，若用两套css ， 就是浏览器宽高比 大于图片宽高比的时候，一套css， 小于的时候，另一个套css， 如何引用所需要的样式文件呢 ？

百分比图片变形的话，你只要给图片设置宽度百分比，不要设置高度就好了

外层容器
上
中（9宫格子）
下
布局


假定 上 中 下 三个区域 全部是相对 外层容器
上中下 三个 全部用百分比设置
9宫格全部是 33%宽高

1）你要控制的就是 外层容器的大小 css或者js 随便
2） 全部等比缩放是不可能的 比如 上 那幅图 在等比例 拉伸情况下 必然发生 有部分边缘不能显示

另外 要考虑 设备横过来时候 外层容器大小的定义

是继续 满屏 还是 高度满屏 宽度比例拉伸剧中 还是 设置 min-height

百分比图片变形的话，你只要给图片设置宽度百分比，不要设置高度就好了

嗯嗯，主要问题是对整个页面的设置