随着各个手机操作系统以及设计类网站平台的不断涌现，多数设计网站的应用都在往手机设计上迁移。但是当前的国内外手机网种类繁多，手机屏幕的大小、比例各异，并且手机的屏幕本身就小，因此既要考虑应用在不同屏幕大小上的适配，又要保持其一致性。那么，国内外手机网站设计尺寸及界面布局是怎么样的呢?下面淄博手机网站设计公司十八度文化针对这个问题给大家讲解一下。

　　在客户端的手机网站设计及其网站设计方案过程中，针对不同的屏幕大小，应该如何来设计?是否每个大小的屏幕尺寸都需要一个新的界面布局，等等。那么在手机网站设计方案中手机网站界面设计该如何布局呢?

　　淄博手机网站设计一、屏幕大小正确理解

　　说起屏幕大小的时候，会有两种表达方式，1) 我的屏幕2.4吋，你的屏幕3.5吋。 2)这个屏幕分辨率 240*320，那个屏幕分辨率为320*480。但在设计过程中，屏幕的分辨率和屏幕的实际尺寸必须同时考虑。

　　这里首先有几个概念需要再澄清一下：

　　屏幕物理尺寸：屏幕对角线长的实际尺寸，如2.4吋，3.5吋等等;

　　屏幕分辨率：屏幕所能显示像素的多少。如，240*320等;

　　屏幕密度(pixel per inch)：以每英寸的像素数。每英寸的分辨率数，如160ppi。

　　物理尺寸决定了屏幕的实际尺寸，而分辨率可以表示屏幕上可以呈现的像素点数，屏幕密度决定了屏幕的精细程度。相同的屏幕大小，如果分辨率高，则屏幕元素更精细。一个界面元素在屏幕里的实际尺寸却是与屏幕密度相关，屏幕密度较小的屏上，界面元素的实际尺寸就会大些，反之亦然。

　　需要注意的是：在不同屏幕中，不同的图标点阵或者不同的字体及大小的汉字，在人的主观感知上，会有一个最优的结果值。在设计的过程中，我们需要根据这个最优值来进行界面的布局及手机版面设计。

　　淄博手机网站设计二、设计过程与屏幕适配思路

　　手机网站版面设计1、确定目标的屏幕大小

　　屏幕大小由宽度和高度两个因素决定，但是在布局手机客户端的过程中，最关心的是宽度值。宽度确定后，高度可以由滚动或者翻页来显示所有内容;文字可以在适当的位置折行;标题栏可以伸缩适配屏幕宽度等等。但并不是不考虑高度，图标、文字、特殊的组件不仅需要考虑宽度，也需要考虑整个屏幕的布局是否与之适配。由于不可能对所有的客户端进行单独的开发，因此，需要对手机屏幕的大小的归类。同时，在设计中也不会真的只考虑屏幕大小一个因素，屏幕大小和操作系统、手机类型等还是存在很大的相关性的。

　　首先，我们先来定义一下手机的屏幕大小的归类档次：

　　A. 小屏幕：宽度240 px 以下屏幕或者2.4 以下屏幕

　　一般以非智能机为主，归在这个分类中的手机屏幕，一般是以java版本的客户端为主。

　　B. 中等屏幕：宽度240~320 px，或者2.4~3.0吋屏幕

　　智能手机以Symbian或S60 v1,2,3，Windows mobile为主流;或者是非智能手机的客户端以java版本为主。同时包括240*320的宽屏手机。

　　C. 大屏幕：宽度320 px以上屏幕或者3.0吋以上的屏幕

　　iPhone 手机只有两个版本的适配，屏幕物理尺寸保持一致;Android 系统手机及衍生平台手机;Win phone 7 系统手机;Nokia S60 v5，symbian 3等

　　手机网站版面设计2、适配原则

　　1) 客户端的logo，在各个手机上都应该清晰地显示

　　2) 标题或者底部栏必须100%的与手机宽度适配

　　3) 文字内容如果显示不下的话，可以自动适配宽度进行折行

　　4) 图片可以根据宽度进行自动缩放，屏幕宽度超过图片本身时，显示图片本身的大小

　　5) 适配过程中，界面的元素的宽高最小值应该符合用户的主观舒适范围值

　　6) 不能完全使用分辨率的绝对比例来对界面布局进行缩放

　　3. 适配思路分析，根据我们前面的分析：

　　C类大屏幕大小主要以Android、iPhone、win phone 7 和Nokia V5等手机为主，它们都是触屏手机，在适配上可以划为一个档次。

　　B类中等屏幕大小智能机主要以Symbian 和Windows mobile为主，因此在适配这两个平台时，主要集中在B类屏幕间的适配。

　　B类中等屏幕大小还有一块是非智能手机，使用Java客户端，同时，A类小屏幕大小主要使用Java客户端，因此，Java类客户端需要适配的范围更广，至少应包括B类和A类的屏幕大小。