成都网站推广手机网站页面设计尺寸

　不管是我们是在做手机网站、手机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浏览器等，保证每个浏览器能够有良好的浏览效果。