手机网站页面设计尺寸

不管是我们是在做手机网站、手机APP页面，甚至微信公众号运营的时候，移动端设备的字体、图片显示是否清晰、精致，是否给手机端用户带来良好体验，都是我们值得深思的问题。

而移动端的用户体验跟移动端设备的屏幕分辨率密切不可分，移动终端设备的屏幕分辨率很多都不一样，手机就分很多种大小的，然后还有一些平板电脑等等，大小很难统一，浏览器也各式各样。小狐狸seo在这里总结了一些关于手机端网页设计行之有效的要点。

一、广州网站推广倍率与逻辑像素

移动端设备屏幕尺寸非常多，碎片化严重，尤其是Android ,你会听到很多种分辨率：480x800,480x854，540x960 ，720x1280 , 1080x1920，而且还有传说中的2 K屏，近年来iPhone的碎片化也加剧了：640x960,640x1136 , 750x1334,1242x2208。

Android把各种设备的像素密度划成了好几个范围区问，给不同范围的设备定义了不同的倍率,来保证显示效果相近，像素密度概念虽然重要，但用不看我们自己算，iOS与Android都帮我们算好了。

像素密度在120左右的屏蟇归为Idpi, 16左右的归为mdpi,以此类推，这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率：

　　Idpi [0,75倍]

　　mdpi [1 倍]

　　hdpi [1.5倍]

　　xhdpi [2倍]

　　xxhdpi [3倍]

　　xxxhdpi [4倍]

各型号iPhone的倍率比较简单，我们后面会讲到，那么Android手机那么多，具体怎么分?哪些手机是几倍的倍率呢?我们先看一张素，这是2014年10月到2015年03月的数据：

　　3倍：lpt=ldp = 3px ( xxhdpi、iPhone 6 )

　　4倍：lpt=ldp=4px ( xxxhdpi)

单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为1080x1920，有的喜欢设成720x1280。给出的界面元素尺寸就不统一了。Android的更小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。

二、广州网站推广移动端设备的屏幕尺寸及分辨率

1、Iphone

尺寸以及分辨率

主流分辨率640*1136，750x1334,1242x2208， 网页和移动的UI用72px

界面基本组成元素

iPhone的APP界面一般由状态栏、导航栏、主菜单栏和中间的内容区域组成。因为宽度是固定的，所以设计开发起来很方便。下面我们说说这些“栏”的尺寸吧：

　　状态栏：高度 40px

　　导航栏：高度 88px

　　主菜单栏：高度 98px;

　　内容区域：高度为：734px

　　如果640*1136是910px

　　iPhone5/5s的640*1136的尺寸，其实就是中间的内容区域高度增加到910px。

3.字体

窗体顶端

32~36px 32px，注释等提示文本28px。

2、Android

广州网站推广尺寸以及分辨率

Android界面比较主流的分辨率：854*480、720*1280、1080*1920。

界面基本组成元素

与ios的一样，还是有状态栏、导航栏和主菜单栏，以720*1280的尺寸,状态栏的高度应为50px，导航栏的高度96px，主菜单栏的高度96px。内容区域高度为：1038px(1280-50-96-96=1038) 窗体底端

Android系统采用可自适应的屏幕支持,由于屏幕尺寸种类繁多,简单可归为ldpi(240*320)、mdpi(320*480)、hdpi(480*800)、xhdpi(720*1280)

字体：android原生的字体，与微软雅黑很像。字体大小范围为16px-32px

随着移动手机的发展，高分辨率如1080x1920手机逐渐普及，我们在考虑网页设计时候，可以结合目前的主流移动设备的分辨率相匹配，这样有利于提高大部分的移动端用户体验。同时，有必要结合不同的主流手机浏览器如：百度浏览器、QQ浏览器等，保证每个浏览器能够有良好的浏览效果。