美文网首页
移动端尺寸

移动端尺寸

作者: Johnson杰 | 来源:发表于2017-05-18 21:46 被阅读529次

一、名词解释

分辨率

说明:分辨率,又称显示分辨率、屏幕分辨率,确定手机屏幕上显示多少信息的设置,以水平和垂直的像素来衡量

分辨率.png
逻辑像素和物理像素

逻辑像素(pt):又称为逻辑分辨率
物理像素(px):又称为物理分辨率

主要在PPI与DPI中使用

屏幕尺寸

说明:屏幕大小的物理尺寸,以屏幕对角线长度衡量,单位是英寸,1英寸=2.54厘米

屏幕尺寸.png
像素密度PPI

说明:每英寸所拥有的像素数量,PPI越高,画面细节越丰富

PPI计算公式.png
举个例子:
PPI.png
点密度DPI

说明:每英寸所拥有的点(pt)的数量,DPI越大,手机屏幕显示的内容越多

dp(android)

说明:android开发中用于描述模块间布局大小的单位,类似于pt

sp(android)

说明:sp和dp一样,只是用于描述字体大小的单位,1dp=1sp

二、手机屏幕数据

iPhone

下面是网上引用的数据


iPhone界面尺寸.jpg
iPhone图标尺寸.jpg

目前市场上iPhone手机的适配还是以主流的5/5S及以上
iphone 5/5S:
  物理分辨率:1136px 640px
  逻辑分辨率:568pt 320pt
  1pt = 2px
iphone 6/6S:
  物理分辨率:1334px 750px
  逻辑分辨率:667pt 375pt
  1pt = 2px
iphone 6/6s Plus:
  物理分辨率:2208px 1242px
  逻辑分辨率:736pt 316pt
  1pt = 3px

Android

下面是网上引用的数据


Android SDK模拟机尺寸.jpg
Android dp_sp_px换算表.jpg

目前市场上Android手机的适配还是以DPI的xxhdpi及以上
xxhdpi (320-480]
  常见物理分辨率:1080px 1920px
  1dp = 3px
xxxhdpi (480-640]
  常见物理分辨率:2560px 1440px
  1dp = 4px

iPad

下面是网上引用的数据


iPad设计尺寸.jpg
iPad图标尺寸.jpg
PC(额外拓展)

下面是网上引用的数据


主流浏览器的界面参数与份额.jpg

相关文章

  • 移动端尺寸

    一、名词解释 分辨率 说明:分辨率,又称显示分辨率、屏幕分辨率,确定手机屏幕上显示多少信息的设置,以水平和垂直的像...

  • 移动端界面尺寸

    本篇文章主要收集了移动各端的界面尺寸规范,方便自查。

  • 移动端字体尺寸

    主要介绍一下移动各端的字体使用规范,以及在视觉上字号使用建议。

  • 移动端尺寸规范

    http://www.68design.net/work/558044

  • 关于像素问题收藏的好文章

    移动端尺寸基础知识从设备像素比到移动适配弄清移动端网页中viewport、retina、高清图、dp单位等

  • 手机APP UI设计尺寸基础知识

    写给移动端设计和开发的同学们,理清关于尺寸的所有细节。 现象 首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片...

  • 流式布局&flex布局

    流式布局 1. 移动端基础 1.1浏览器现状 1.2手机屏幕的现状 1.3常见移动端屏幕尺寸 1.4移动端调试方法...

  • 浅谈移动端适配

    手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑在安卓/IOS的各种尺寸设备上的兼容,所谓移动端适配,就是在不...

  • 移动端开发基础第一节

    一、设备事件 移动端事件都要在head里面设置: 获取移动端设备的尺寸:screen.width,screen.h...

  • rem

    // 移动端设计尺寸(function (doc, win) {var docEl = doc.documentE...

网友评论

      本文标题:移动端尺寸

      本文链接:https://www.haomeiwen.com/subject/ytsjxxtx.html