当前位置:380元网站建设 虎网站 > 行业新闻 > 正文

手机网站页面设计尺寸

发布日期:2019-11-14

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


做网站怎样给访客营造一种亲切感

    网站往往都是为了让访客进行下一步的行动,以内容形式应该让访客理解。在内容建设中,很多传统的企业网站往往采取的是结构化的介绍。比方企业是科技企业,拥有科技研究开发能力,以科技为重点为全球用户提供完善的解决方案,这样的内容过于正规。然而如果是从吸引客户方面来讲,这样的内容基本一无是处,既没有告诉客户可以从企业获取什么,也没有突出自己的品牌。用户根本不需要这样的内容,要说服客户继续浏览页面,充分地拉近用...

       龙岗横岗华利二手场和虎网站签下网站建设协议 华利是经深圳市龙岗区工商局审核的有资质公司,统一社会信用代码:91440300561541018N。华利选用虎网站经济型入门级网站案例,其功能比较简单的程序,广告单图(无动漫),页面较简单,适合小微企业产品展示型网站。华利在深圳市龙岗区横岗街道大康路口粤骏二手车市场A8部。   华利公司经营范文:收购、置换、销售二手名车、寄卖及售后服务。代办新车落户,交强险,旧机动车业务咨询、专业鉴定、免费上门评...

       做网站之前要解决的几个问题 1.建设网站的目的和意义是什么? 很多企业建设网站都是认为企业网站是一个必需品,这没有错。可是,企业网站除了是一个企业必须具备的经营工具以外,还有什么作用呢?它对于企业在什么方面有帮助呢?企业网站的价值又在何处?只有弄清楚这些问题,才能在网站建设和网站后期的使用过程中充分地实现利益最大化。否则,网站建设所投入的资金将会被浪费。 2.网站受众群体定位是哪些人 ? 建立网站首先需要知道网站受众群体定...

       企业网站设计中药配上必要的图片 人类天生用图像思考、文字是由图像抽象简化而来的。人看到文字时,常常先把文字转化为图像,再处理。这个转换过程必然会消耗一部分脑力,所以图像比文字更直观,信息传达效率高。就像一本书,如果配上形象生动的图片,会让书的内容增色不少。另外,配图还有以下好处。 1、配图让阅读更轻松愉快 过于密集的文字会给阅读带来压力。尽量为文字配上内容相关的图片,让用户轻松愉快耐心地浏览页面。  

       最适合新建企业网站的推广方法 对于新网站,毫无疑问推广应该摆到第一位,但新网站该如何推广才能赚足曝光率是网站运营人员比较头痛的问题,这里为大家提几点思路,希望能给网站运营者带来启示:   活动宣传推广   通过举行一系列活动,让更多的用户参与到活动中,在与用户互动的过程中,逐步达到网站推广的目的,这种推广方法的最显著特点是可以达到网站认知度高。要做好活动宣传推广,一个重要的前提是有一个好的策划。活动宣传推广常见的形式有举办...

       企业网站建设的基本程序 企业网站建设的程序:   1、需要有一个网站域名和网站空间   域名的选择可以根据你的企业进行选择,一般都会用和自己企业名称有关系的域名;你要在刚开始就选择好存放网站的空间,是选择云虚机主机还是云服务器,机房是选择是在国内的还是国外的。   2、确定网站搭建的形式   企业网站的建设就两种形式,一种就是使用开源程序的网站定制开发,另一种就是智能建站系统。   3、企业网站的整体风格和网站结构   ...

最新模板
少儿英语培训机构网站建设 培训公司网站建设
成人自考网站建设 成人培训网站制作设计版面
智能家居摆设设计网站建设 智能家居装修企业网站建设
铜螺母,铜螺丝,螺栓,螺钉工厂网站建设
废气处理设备,如活性炭吸附箱、RTO蓄热式氧化处理设备、光氧等离子复合设备 低温等离子设备 光氧催化设备等网企业网站建设
图文阅读