`
towaywu
  • 浏览: 14715 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

前端,移动开发者,UI须懂: 不同设备的之间的尺寸

 
阅读更多

在开发前端,移动APP,以及设计UI的时候,我们经常会去搜索不同设备之间的尺寸,来开始自己的工作,以保证显示效果达到更好,这里收集了现在常用的设备.

设备更新速度快,有些没罗列的,大家可以谷歌或者百度一下.

常见智能手机

name

phys.
width

phys.
height

CSS
width

CSS
height

pixel
ratio

phys. ppi

CSS ppi

AppleiPhone 6 750 1334 375 667 2 326 192
AppleiPhone 5 640 1136 320 568 2 326 192
AppleiPhone 4 640 960 320 480 2 326 192
AppleiPhone 3 320 480 320 480 1 163 96
AppleiPod Touch 640 1136 320 568 2 326 192
LGG4 1440 2560 360 640 4 538 384
LGG3 1440 2560 360 640 4 538 384
LGOptimus G 768 1280 384 640 2 318 192
SamsungGalaxy Note 2 720 1280 360 640 2 267 192
SamsungGalaxy Note 800 1280 400 640 2 285 192
SamsungGalaxy S5 1080 1920 360 640 3 441 288
SamsungGalaxy S4 1080 1920 360 640 3 441 288
SamsungGalaxy S4 mini 540 960 360 640 1.5 256 144
SamsungGalaxy S3 720 1280 360 640 2 306 192
SamsungGalaxy S3 mini 480 800 320 533 1.5 233 144
SamsungGalaxy S2 480 800 320 533 1.5 217 144
SamsungGalaxy S 480 800 320 533 1.5 233 144
SamsungGalaxy Nexus 720 1200 360 600 2 316 192
LGNexus 5 1080 1920 360 640 3 445 288
LGNexus 4 768 1280 384 640 2 320 192
MicrosoftLumia 1020 768 1280 320 480 2.4 332 220
MicrosoftLumia 925 768 1280 320 480 2.4 332 220
MicrosoftLumia 920 768 1280 320 480 2.4 332 220
MicrosoftLumia 900 480 800 320 480 1.5 217 144
MicrosoftLumia 830 720 1280 320 480 2 294 192
MicrosoftLumia 620 480 800 320 480 1.5 252 144
HTCOne 1080 1920 360 640 3 468 288
HTC8X 720 1280 320 480 3 341 288
HTCEvo 3D 540 960 360 640 1.5 256 144
SonyXperia Z3 1080 1920 360 598 3 424 288
SonyXperia Z 1080 1920 360 640 3 443 288
SonyXperia S 720 1280 360 640 2 342 192
SonyXperia P 540 960 360 640 1.5 275 144
XiaomiMi 4 1080 1920 360 640 3 441 288
XiaomiMi 3 1080 1920 360 640 3 441 288
LenovoK900 1080 1920 360 640 3 401 288
PantechVega n°6 1080 1920 360 640 3 373 288
BlackberryLeap 720 1280 390 695 2 294 177
BlackberryPassport 1440 1440 504 504 3 453 274
BlackberryClassic 720 720 390 390 1.8 294 177
BlackberryQ10 720 720 346 346 2 328 192
BlackberryZ30 720 1280 360 640 2 295 192
BlackberryZ10 768 1280 384 640 2 355 192
BlackberryTorch 9800 360 480 360 480 1 187 96
ZTEGrand S 1080 1920 360 640 3 441 288
ZTEOpen (Firefox OS) 480 720 320 480 1.5 165 144

常见平板手机

name

phys.
width

phys.
height

CSS
width

CSS
height

pixel
ratio

phys. ppi

CSS ppi

AppleiPhone 6 Plus 1080 1920 414 736 3 401 249
MotorolaNexus 6 1440 2560 412 690 3.5 493 336
MicrosoftLumia 1520 1080 1920 432 768 2.5 367 240
SamsungGalaxy Note 4 1440 2560 360 640 4 515 384
SamsungGalaxy Note 3 1080 1920 360 640 3 386 288

常见平板电脑

name

phys.
width

phys.
height

CSS
width

CSS
height

pixel
ratio

phys. ppi

CSS ppi

AppleiPad Pro 2048 2732 1024 1366 2 265 192
AppleiPad 3, 4, Air 1536 2048 768 1024 2 264 192
AppleiPad 1, 2 768 1024 768 1024 1 132 96
AppleiPad mini 2, 3 1536 2048 768 1024 2 326 192
AppleiPad mini 768 1024 768 1024 1 163 96
SamsungGalaxy Tab 3 10" 800 1280 800 1280 1 149 96
SamsungGalaxy Tab 2 10" 800 1280 800 1280 1 149 96
SamsungGalaxy Tab (8.9") 800 1280 800 1280 1 170 96
SamsungGalaxy Tab 2 (7") 600 1024 600 1024 1 170 96
SamsungNexus 10 1600 2560 800 1280 2 300 192
HTCNexus 9 1538 2048 768 1024 2 281 192
AsusNexus 7 (v2) 1080 1920 600 960 2 323 192
AsusNexus 7 (v1) 800 1280 604 966 1.325 216 127
LGG Pad 8.3 1200 1920 600 960 2 273 192
AmazonKindle Fire HD 8.9 1200 1920 800 1280 1.5 254 144
AmazonKindle Fire HD 7 800 1280 480 800 1.5 216 144
AmazonKindle Fire 600 1024 600 1024 1 167 96
MicrosoftSurface Pro 3 1440 2160 1024 1440 1.5 / 1.4 216 144
MicrosoftSurface Pro 2 1080 1920 720 1280 1.5 207 144
MicrosoftSurface Pro 1080 1920 720 1280 1.5 207 144
MicrosoftSurface 768 1366 768 1366 1 148 96
BlackberryPlaybook 600 1024 600 1024 1 169 96

另外的设备

name

phys.
width

phys.
height

CSS
width

CSS
height

pixel
ratio

phys. ppi

CSS ppi

GoogleGlass 640 360 427 240 1.5 ? 144

本文属于吴统威的博客,微信公众号:bianchengderen的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=142 ,欢迎大家传播与分享.


分享到:
评论

相关推荐

    中国首个开源 HTML5 跨屏前端框架 Amaze UI.zip

    Amaze UI的目标帮助开发者提高开发效率,提升网页效果,即用最短的时间做出最赞的网页,使更多的前端开发者不再受前端复杂代码困扰。下面是特性硬广Amaze UI 是中国首个开源 HTML5 跨屏前端框架,基于 React.js 开发...

    cola-ui:支持双向数据绑定的一站式前端UI框架

    Cola UI遵循Mobile First的策略,特别适合于移动设备应用开发。 Cola UI整合了jQuery和Semantic UI,同时提供更多常用的List、Table、Tree等高级控件。 相关链接 产品官网 客户端API 快速入门 QQ交流群: 群名称:...

    HarmonyOS JS UI前端开发

    型的即时编译型的编程语言在移动应用开发中得到了开发者的青睐, 其在微信 小程序开发和uni-App开发中得到了较多使用。 不同与小程序, HarmonyOS JS 框架拥有独特的代码优化模式, JS代码可以在HarmonyOS系统中快速...

    GMTC北京 2017年全球前端技术大会PPT合集(46份).zip

    移动开发的未来-来自一个移动开发者的自白 移动Web的现在与未来 移动分析助力App精细化运营 一站式短视频技术架构的新解读 移动电商中的图像算法应用 出行IOS端瘦身实践 Instagram Direct:高效可靠的数据端到端传输...

    agile:HTML5移动应用前端框架

    Agile移动应用前端框架既解决了前端UI层的显示,达到高性能的UI展示效果,也提供了一整套完善的页面切换和交互效果,并融入了数据注入的理念,使界面和数据分离,代码维护难度降低,重用性高。整体运行效率接近于...

    AKjs手机移动端前端ui框架模板 v1.2.5

    AKjs前端框架是Andrew.Kim和他的团队一起研发的基于jQuery的一个轻量级前端框架。它是只要懂jQuery的语法很容易上手的框架。该框架里面现在发布了很多移动端常用的功能效果;开发者们

    HTML5移动Web开发指南.pdf

    2011年也是移动互联网高速发展的一年,随着iPhone、Android等智能设备的迅速普及,以及Web技术跨平台等优点更广泛的为人所知,移动Web技术逐渐成为大家关注的新热点之一。国内移动Web技术中文资源相对缺乏,社区尚待...

    Telerik react是一个集于一身的应用程序,它为。net开发者提供了他们开发应用程序所需的每一个工具

    整套组件称为Telerik DevCraft, HTML组件称为Kendo UI, Telerik平台是所有移动设备的通用术语。 这个伟大的工具提供了一个完整的体验,并为您带来了您需要为现代应用程序提供响应性UI的功能。 它允许您通过集成组件...

    ShopXO国内领先企业级B2C免费开源电商系统

    前端基于AmazeUI v2.7.2 组件丰富,模块化 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。 本地化支持 相比国外框架,Amaze UI 关注中文排版,根据用户代理...

    WeyUI是一款基于微信公众号、微信小程序、企业微信管理高度封装的UI组件库,帮助开发者更快速完成页面开发工作.zip

    包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...

    UniApp之源码案例(36个案例):实例分享,助力开发

    适用人群: 本资源适用于Web开发者、移动应用程序开发者以及希望学习UniApp框架的初学者。如果你有一些前端开发经验,那么这个资源将帮助你更快地上手UniApp。 能学到什么: 学习这些源码案例将让你了解如何使用...

    weixin103h5 移动网赚项目设计与实现+springboot(源码+部署说明+演示视频+源码介绍+lw).rar

    Bootstrap:作为前端UI框架,构建响应式的页面布局。 Git:作为代码管理工具,方便团队协作开发。 通过以上技术和功能的结合,本项目为用户提供了一个便捷、高效的移动网赚平台,帮助用户实现在线赚钱的目标。同时...

    Flutter实战之企业站APP

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的用户界面。本课程通过一个企业站APP的实例让大家能够快速的编写一个完整的APP项目。 功能模块: 启动页面 首页 Banner轮播 最新产品 产品列表 产品...

    Web前端框架Angular.zip

    Angular 是一款十分流行且好用的 Web 前端框架,目前由 Google 维护。这个条目收录的是 Angular 2 及其后面的版本。由于官方已将 Angular 2 和之前的版本 Angular.js 分开维护(两者的 GitHub 地址和项目主页皆不...

    基于WEB校园电子商城设计与实现.zip

    该资源包通常包含了一系列的文件和文件夹,涉及网站前端设计、后端开发、数据库管理以及可能的移动应用开发等多个方面。在内容上,这个压缩包可能会包含如下几个主要部分:用户界面设计(UI): 使用HTML, CSS, ...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 GCF 谷歌内嵌浏览器框架, 使用此插件,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式...

    基于Flutter的移动跨平台动态UI框架-Flutter开发

    Thresh提供了一个简单、高效的应用开发框架和丰富的组件及API,帮助开发者在前端开发中具有原生 APP 体验的服务,是满帮集团开源的一套稳定、高性能的跨端动态化方案。 一、Thresh特性与整体架构 Thresh项目推出...

    HashDish:送餐移动应用HashDish的餐馆老板的管理网站。 技术领域

    Material-UI和CSS媒体查询,用于响应式布局 特征 用户登录 使用Google Places API注册餐厅 JWT刷新令牌流 添加/编辑/删除记忆项目 在菜单项上添加可选和必需的选项 上传菜单项和餐厅徽标图像 编辑营业时间 未来的...

    thresh:基于Flutter的移动跨平台动态UI框架

    Thresh提供了一个简单,高效的应用开发框架和丰富的组件以及API,帮助开发者在前端开发中具有原生APP体验的服务,是满帮集团开源的一套稳定,高效的跨端动态化方案。 体验包下载地址 一,主要核心亮点 1,适用于前端...

Global site tag (gtag.js) - Google Analytics