移动web开发之屏幕三要素

×

目录

[1]屏幕尺寸 [2]分辨率 [3]像素密度

前面的话

  实际上,并没有人提过屏幕三要素这个词,仅是我关于移动web开发屏幕相关部分总结归纳的术语。屏幕三要素包括屏幕尺寸、屏幕分辨率和屏幕像素密度。

屏幕尺寸

  我们常常听说5.5英寸大屏幕手机,实际上屏幕尺寸是指屏幕的对角线长度。常见的屏幕尺寸有3.5、4、4.3、4.8、5.0、5.2、5.5、6.0等

  对于英寸没有什么概念,可以通过转换公式转换成常用的厘米

1英寸 = 2.54厘米
3.5in = 3.5*2.54cm = 8.89cm
4.0in = 4.0*2.54cm = 10.16cm
4.3in = 4.3*2.54cm = 10.922cm
4.8in = 4.8*2.54cm = 12.192cm
5.0in = 5.0*2.54cm = 12.7cm
5.2in = 5.2*2.54cm = 13.208cm
5.5in = 5.5*2.54cm = 13.97cm
6.0in = 6.0*2.54cm = 15.24cm

屏幕分辨率

  屏幕分辨率是指屏幕的像素点数,一般以纵向像素*横向像素来表示分辨率。显示常用分辨率有如800*600、1024*768、1280*720、1600*900、1920*1080,单位是px

  [注意]关于像素的相关知识移步至此

   若存在retina视网膜屏幕,需注意单位px和pt的区别。若屏幕为普通屏幕,则1px = 1pt,相当于单位无关

  如iphone6的屏幕尺寸为375pt*667pt,DPR=2,所以换算成px,屏幕分辨率为750px*1334px

【HD和4K】

  现在移动设备、智能电视宣传最多的两个关键词估计就是HD、4K,这二者都是用来描述显示设备分辨率的标准,到底二者之间有什么区别?

  HD:没有固定的标准,基本上只要宽度为720px的都算是HD

  full HD(全高清): 1920*1080分辨率

  4K: 4k也叫QHD或UHD(超高清),最小分辨率是3840*2160,主要是现在高端电视的分辨率;其还有一个更高的4096x2160的标准,主要用于电影放映机或者专业相机。

【关于相机像素】

  我们常常听过相机支持1000万像素。相机所说的像素,其实是最大像素的意思,像素是分辨率的单位,这个像素值仅仅是相机所支持的有效最大分辨率。

640*480 = 307200 = 30万像素
1600*1200 = 1920000 = 200万像素
3264*2488 = 8120832 = 800万像素
4536*3024 = 13716864 = 1400万像素

DPI和PPI

  DPI(Dots Per Inch)是印刷行业中用来度量空间点密度用的,这个值是打印机每英寸可以喷的墨汁点数。计算机显示设备从打印机中借鉴了DPI的概念,由于计算机显示设备中的原子单位不是墨汁点而是像素,所以就创造了PPI(Pixels Per Inch),这个值是屏幕每英寸的像素数量,即像素密度(Screen density)。由于各种原因,目前PPI(主要是iOS)和DPI(比如在Android中)都会用在计算机显示设备的参数描述中,不过二者的意思是一样的,都是代表屏幕像素密度。

  屏幕像素密度(DPI或PPI) = 对角线分辨率 / 屏幕尺寸

  勾股定理算出对角线的分辨率:√(1920²+1080²)≈2203

  对角线分辨率除以屏幕尺寸:2203/5≈440dpi

DPI = 对角线分辨率 / 屏幕尺寸

  以iphone3s和iphone4为例,二者屏幕尺寸一样,屏幕分辨率相差一倍,屏幕像素密度也相差一倍

  Google官方指定按照下列标准区分不同设备的dpi

  苹果的区分则更为简单:非高清屏、高清屏、超高清屏

//1242*0.87=1080 2208*0.87=1920 3*0.87=2.61

  从数值上看,苹果和安卓有这样的对应关系

时间: 2024-12-19 23:13:43

移动web开发之屏幕三要素的相关文章

Java Web开发Tomcat中三种部署项目的方法

一般情况下,开发模式下需要配置虚拟主机,自动监听,服务端口,列出目录文件,管理多个站点等功能 准备工作: 软件包:apache-tomcat-6.0.20.rar 将软件包解压至硬盘一分区,进入%TOMCAT_HOME%/conf目录 一:server.xml 配置 1.配置端口,修改server.xml. <Connector port="80" protocol="HTTP/1.1" connectionTimeout="20000"

移动web开发中屏幕适配问题

1.首先屏幕的尺寸就是屏幕对角线的长度 尺寸是固定的 2.开发中遇到的单位 相对单位(即相对于屏幕):px em pt 绝对单位(固定的大小,与设备屏幕无关):in cm 3.像素密度 像素密度指的是1英寸里面的像素的数量,比如1英寸里面是10px,通常有两种163(3gs) 330(4s)通常超过320的像素密度就是高清屏,计算方式:屏幕的分辨率高的平方+屏幕分辨率宽的平方 ,然后再开根号,再除以屏幕的英寸. 4.设备独立像素 设备独立像素表示真实像素和分辨率像素的一个比例,比如3gs手机高度

[Python web开发] 路由实现 (三)

一.路由 1.1 什么是路由 简单说,就是路怎么走.就是按照不同的路径分发数据. URL就是不同资源的路径,不同路径应该对应不同的应用程序来处理. 所以,代码中要增加对路径的分支处理. 一个简单的路由需求: 路径 内容 / 返回欢迎信息 /python 返回Hello Python 其它路径 返回404 1.2 什么时候处理路由 路由的处理需要在WSGI Server接收到HTTP请求后,WSGI Server解包封装服务器环境变量,随后就应该对request.path做处理,根据path调用相

Flask web开发之路三

今天写一个URL传参.反转URL.页面跳转和重定向 URL传参 主app文件代码: from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello World!' @app.route('/article/<id>') def article(id): return '您请求的参数是: %s' %id if __name__ == '__main__': app.run

PHP和Java的主要区别有哪些?哪个最适合Web开发语言?

一.前言 PHP和Java都是现在比较流行的二种编程语言. 对于许多新手来说,都会思考如果学的时候,该学哪种语言呢?下面这篇文章给大家整理两者的区别以及一些选择建议,一起来看看吧. 二.简介 PHP与Java作为两种截然不同的程序开发语言,无论是技术层面还是发展空间,亦或是市场份额占比,都有着不同的表现方式,理念上的不同导致了Java和PHP在Web应用开发上显示了不同的结果.若要一定追根到底,深究PHP与Java究竟哪个更好? 简而言之:PHP是一种解释执行的脚本语言,语法和C语言类似,易学易

【web开发学习笔记】Structs2 Action学习笔记(三)action通配符的使用

action学习笔记3-有关于通配符的讨论 使用通配符,将配置量降到最低,不过,一定要遵守"约定优于配置"的原则. 一:前端htm <前端代码html> </head> <body> <a href="<%=context %>/actions/Studentadd">添加学生</a> <a href="<%=context %>/actions/Studentdel

spring boot 1.5.4 之web开发(三)

上一篇:springboot 1.5.4 入门和原理(二) spring Boot 之web开发 更多更详细的配置参考文件:application.properties和<SpringBoot之application配置详解>(新版本新增属性缺失)  或参考官网http://projects.spring.io/spring-boot/ 注意:Spring Boot工程默认沿用前文中的project,如有变动,各章节会明确说明 注释springboot工程中的application.prope

【web开发】★☆之基于Map实现(用户登录三次失败后)24小时之内限制登录!

[web开发]★☆之基于Map实现(用户登录三次失败后)24小时之内限制登录! 近期在改一个老项目(struts1做的),客户现在想实现如下效果,用户在登录失败三次之后,锁定用户,需要信息部管理人员进行解锁!我第一想法,是在其数据库User表中加一个字段,记录登录失败的次数,但是数据库添加字段需要远程操作数据库,而对方的数据库又被各种加密软件包围!不是很方便,所以想了一下解决方案,利用Map来进行处理! 首先说一个思路,新建实体类,只有两个属性,登录失败次数,登录时间,实现get,set方法!

Web开发中获取Spring的ApplicationContext的三种方式

在 WEB 开发中,可能会很少需要显示的获得 ApplicationContext 来得到由 Spring 进行管理的某些 Bean, 今天我就遇到了,在这里和大家分享一下, WEB 开发中,怎么获取 ApplicationContext 一       要想怎么获取 ApplicationContext, 首先必须明白 Spring 内部 ApplicationContext 是怎样存储的.下面我们来跟踪一下源码 首先:从大家最熟悉的地方开始 Java代码   <listener> <