Android dp 和 CSS px

最近在给WebView前端传递标题栏高度的时候,传递的是实际像素Pixel,结果前端直接设置这个数值的时候,发现太高了。搜索了一下,发现前端的CSS样式设置的像素值是逻辑像素,这个逻辑像素跟实际像素是不同的,对于Android来说,就是设备的dp数值。

参考文章如下:

前情提要:设计师给的设计稿是1242分辨率的(iPhone6p),标注的字体大小是54px,前端工程师写的H5页面是18px,效果正常且能自适应iPhone6。来调查一下 为什么是标注数值除以3?为什么自动适应iPhone6?css里的px和Android的dp有怎样的关系?

在进行具体的分析之前,首先得知道下面这些关键性基本概念(术语)。

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。

设备独立像素(density-independent pixel)

设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。

所以说,物理像素和设备独立像素之间存在着一定的对应关系,这就是接下来要说的设备像素比

设备像素比(device pixel ratio)

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系,它的值可以按如下的公式的得到:

在javascript中,可以通过window.devicePixelRatio获取到当前设备的dpr。

在css中,可以通过-webkit-device-pixel-ratio-webkit-min-device-pixel-ratio-webkit-max-device-pixel-ratio进行媒体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。


iPhone6的物理像素是750 x 1334,设备像素比(devicePixelRatio)是2,设备独立像素是375 x 667 (750/2 x 1334/2)

iPhone6p的物理像素是1080 x 1920,但logic pixel是1242 x 2208, 设备像素比(devicePixelRatio)是3,设备独立像素是414 x 736 (1242/3 x 2208/3)

css里面有物理像素逻辑像素的概念,在这里,逻辑像素可以理解为设备独立像素

其实,logic point更适合翻译成逻辑点。无论是逻辑像素还是逻辑点,只需要理解一个逻辑点(逻辑像素)需要一个或一个以上的物理像素来展示就可以了。

那么,为什么iPhone6p是这样奇葩的逻辑点呢?

  • 如果逻辑点分辨率用 360x640, 360x640@3x 正好是 1080x1920。但是逻辑pt分辨率 360x640 就会比 iPhone 6的 375x667 还低,也就是说相同字号的情况下,iPhone 6如果一行显示了25个字,而 iPhone 6 Plus按这个逻辑pt方案,一行就会只能显示24 个字了。
  • 如果逻辑点分辨率用 540x960,540x960@2x 正好是 1080x1920。但是iOS UI 元素尺寸在屏幕上的实际物理面积一下子就变小了,比如标签栏或导航栏按钮的物理高度只有原来的 81.5% ,点击面积就只有iPhone 6 的0.815*0.815=66.4%,用户点击就困难了。
  • 如果物理分辨率做到1242x2208就减少了一个从1242压缩到1080的过程,但是1242的物理分辨率是在1080p和2k屏之前的尺寸,功耗和成本都会提升,而且这样非1440的2k分辨率的屏幕采购也是问题。

至于为什么一定是 414x736,有人估计应该是在 5.5inch 和 ppi=461 这两个前提限定的情况下,按这个 414x736 pt 分辨率,屏幕上 UI 元素操作物理大小最接近 iPhone 6上的表现。


Android世界中更加复杂,这里列举了几款手机的基本数据

  Nexus 4 Nexus 6 Nexus 6p LG L24 Mi 4c
物理像素 768 x 1280 1440 x 2560 1440 x 2560 1440 x 2560 1080 x 1920
设备像素比(dpr) 2 3.5 3.3 4 3
设备独立像素(dip/dp) 384 x 640 412 x 732 435 x 773 360 x 640 360 x 640

Android提供了获取density的方法:

density的官方定义是The logical density of the display,翻译过来是屏幕的逻辑密度,其实就是之前提到的设备像素比(dpr)


在浏览器中,获取设备像素比就比较简单:

比如,我写了一个网页,用手机浏览器打开:

结果显示与Android的density的结果是一致的。

注:<meta name="viewport" content="width=device-width, initial-scale=1">
By specifying width=”device-width”, you are asking the browser to apply a scaling factor to its screen pixels. One css pixel occupies one or more screen pixels. How many more? This value is called the css pixel ratio.


回顾一下

同一台设备,它的设备像素比(dpr)是确定的,无论通过Android api 获取还是浏览器 js/css 获取。
The css px is actually Device Independent Pixel(dip), and it is a common pattern to use px as dp in css.
css中的px具有与Android中的dp等同的效果

参考链接


Python发送form-data请求提交表单数据

最近在处理服务器接口的时候,需要使用Python模拟发送表单数据到服务器,搜索了一下,找到如下例子:

参考链接


rsync同步报告错误"cannot delete non-empty directory"

最近在执行rsync的时候,发现报告错误信息cannot delete non-empty directory,如下:

解决方法是增加--delete-excluded即可,如下:

参考链接


ubuntu 18.04更新snap慢或者失败

参考链接


Jenkins阻止Execute shell输出命令内容

默认情况下,Jenkins在构建的时候会输出脚本中命令的具体内容,原因是在执行脚本的时候,使用的是-e参数执行的。

但是当我们的脚本中存在用户名,密码等关键信息的时候,这些内容会被输出到编译日志中,这样就容易导致安全问题。

解决办法是在脚本的最前面增加#!/bin/bash,来覆盖脚本执行的默认参数,如下图:

继续阅读Jenkins阻止Execute shell输出命令内容

Centos 7配置Jenkins构建Android持续集成(离线内网环境)

安装配置Jenkins

为了安全考虑,首先需要解锁Jenkins

继续阅读Centos 7配置Jenkins构建Android持续集成(离线内网环境)

Gradle传递System Property

最近在搭建Jenkins环境,实现Android自动化编译的过程中,由于内网服务器不能访问外网,因此只能配置Robolectric访问内网的服务器。

根据官方文档 Configuring Robolectric,发现如果要更改Robolectric默认的下载服务器链接地址,需要在项目的每个lib库中都配置如下参数,才能实现:

但是这样配置有一个问题,就是没办法动态调整链接地址。

而我们使用

手工指定的参数,并没有在编译的时候生效。

参数丢失的原因是因为测试用例在新的JVM中执行,传入的参数不会自动带给新创建的JVM

这时需要在Gradle脚本中将读到的值重新设到系统属性里面,才可以被Java程序读到。

每个项目的build.gradle中都增加上面的配置之后,就可以保证在外部编译的时候动态指定参数了。

Android Studio Chipmunk | 2021.2.1 Patch 1 以及以上的版本,可能会发生如下报错:

该报错的原因是 Android Studio 没有正确读取我们配置的 robolectric.dependency.repo.url 环境变量,导致无法成功下载,当然也可能是由于高版本不支持 HTTP ,链接地址必须是 HTTPS 导致此问题,这个没有深究。

解决方法是,在命令行执行

确保在当前用户目录下的 .m2 目录下,成功完成 robolectric 需要的全部文件的下载。这样,执行测试用例的时候,就可以从本地获取依赖文件,而不需要再去服务器上获取。

参考链接


Ubuntu Server 18.04 LTS隐藏Tomcat-9.0.16.0的版本号与操作系统类型

推荐方案

另外更推荐的方法是通过 Tomcat 的配置文件完成,而不是修改代码,具体配置方法为:

conf/server.xml 配置文件中的 <Host> 配置项中添加如下配置:

配置项说明:

  • showReport:默认值为true,默认显示报错信息
  • showServerInfo:默认值为true,默认显示Tomcat的版本号

其他方案

其他的方案跟  Ubuntu 14.04隐藏Tomcat-7.0.52的版本号与操作系统类型 是一致的,但是具体的细节上存在不小的差异,还是需要记录一下。

可以看到里面的内容如下:

直接注释掉里面的内容,如下:

修改完成后,把修改完成的数据存储到catalina.jar中。

把修改后的catalina.jar放回到Tomcat的目录下面:

重启Tomcat的服务

参考链接


腾讯云Ubuntu Server 16.04.7 LTS升级系统到Ubuntu Server 18.04.5 LTS之后letsencrypt证书更新出现异常“ImportError: cannot import name _remove_dead_weakref”

腾讯云Ubuntu Server 16.04.7 LTS升级系统到Ubuntu Server 18.04.5 LTS之后,letsencrypt证书更新出现异常,如下:

原因为系统版本变化过大导致以前安装的Python组件不能适应最新的系统,最简单的方法就是删除之前安装的Python组件,让letsencrypt重新安装即可。

参考链接


Cannot renew certificate “ImportError: cannot import name _remove_dead_weakref”

腾讯云Ubuntu Server 16.04.7 LTS升级系统到Ubuntu Server 18.04.5 LTS

参考 阿里云ECS ubuntu 14.04.5 LTS升级到ubuntu 16.04.2 LTS / 阿里云从ubuntu16.04.5升级到ubuntu 18.04.3后调整PHP 7.0到PHP 7.2 整个的升级步骤是差不多的,腾讯的升级流程更加顺利。

但是在升级完成之后,遇到了一个域名解析问题,报错如下:

这个原因是因为我们在安装过程中,覆盖了腾讯设置的域名解析服务配置文件。

这个配置文件是/etc/resolv.conf

但是,在Ubuntu Server 18.04.5 LTS系统上,直接修改/etc/resolv.conf的话,重启系统之后,设置会被还原。我们需要修改/etc/systemd/resolved.conf才行。

根据地域的不同,服务器的地址存在差异,参考下面的脚本即可。

广州服务器:

上海服务器:

香港服务器:

参考链接