移动端分辨手机像素显示计算

最新推荐文章于 2023-05-15 14:19:33 发布
最新推荐文章于 2023-05-15 14:19:33 发布
阅读量283 收藏
点赞数
分类专栏： 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43623056/article/details/111871233
版权

移动端手机根据设备独立像素显示

设备独立分辨率 = 设备分辨率 / 设备像素比(DPR)

设备分辨率：指的就是物理像素(DP)。

设备独立分辨率：设备独立像素(DIP)。

设备像素比获取：

window.devicePixelRatio

可参考以下文章便于理解
CSS像素、设备独立像素、设备像素之间关系

completist00
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android手机分辨率基础知识（DPI,DIP计算）
linghu_java的专栏
10-22 4550
1.术语和概念 概念解释 名词 解释 Px （Pixel像素） 不同设备显示效果相同。这里的“相同”是指像素数不会变，比如指定UI长度是100px，那不管分辨率是多少UI长度都是100px。也正是因为如此才造成了UI在小分辨率设备上被放大而失真，在大分辨率上被缩小。 Screen Size （屏幕尺寸）
关于移动端viewport，物理像素，设备独立像素，设备像素比的详解
qingliuFu的博客
06-06 2261
物理像素：也可成为设备像素，是设备屏幕中能显示的最小的物理元件，可以理解为屏幕中的排列的发光二极管。设备独立像素：也可以称为CSS像素或者逻辑像素，在不同屏幕中，相同的CSS像素呈现的尺寸是一致的。设备像素比：等于物理像素除以设备独立像素。上图中可以看到当CSS像素相同时，在不同屏幕下的物理尺寸是一致的，但是由于他们的设备像素比不同，所以物理像素是不同的。这是因为Retina屏幕的分辨率更高，它的...
22-移动端布局方式-rem
保持好奇
10-24 1228
原理：需要媒体查询去设置常见的终端下面的font-size的值，rem单位会自动相对于根元素计算写法：html {html {html {html {计算物理像素 / dpr = 逻辑像素Q（单位是px）Q/相对应的font-size的值即可。
物理像素，逻辑像素，设备像素比，分辨率以及为何移动端需要适配(通俗易懂)
justgolden的博客
05-15 357
以下内容均为个人理解，如有问题，欢迎指正！！
android计算手机的分辨率/像素/密度/屏幕尺寸/DPI值的方法
qq_31753145的博客
04-12 5453
手机分辨率基础知识（DPI,DIP计算） 1.术语和概念 术语 说明 备注 Screen size（屏幕尺寸) 指的是手机实际的物理尺寸，比如常用的2.8英寸，3.2英寸，3.5英寸，3.7英寸 摩托罗拉milestone手机是3.7英寸 Aspect Ratio(宽高比率) 指的是实际的物理
移动端开发教程之像素的显示问题汇总
09-22
最近在开发中，发现了移动端像素的一些问题，是之前一直没注意过的，这篇文章主要给大家介绍了关于移动端开发教程之像素显示问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或工作具有一定的参考学习...
移动端1像素问题
01-23
在一些高清二倍屏的移动端设备中，如果你设置1px的边框，实际上是指1px的css样式大小，而在二倍屏移动设备中显示的是2px的物理像素，所以我们需要引入下面的border.css来解决移动端1px边框问题
橙色风格仿移动端小米手机官网商城wap
07-13
注：无后台 橙色风格仿移动端小米手机官网商城wap
jQuery手机移动端日期时间选择插件
06-10
这是一款实用的jQuery手机移动端日期时间选择插件，手机日期选择网页特效代码。
手机移动端demo
04-26
以前做过的一个手机端的demo,页面设计合理，包含数据列表，文件下载列表，表单等，一整套的东西。
手机分辨率计算器
10-14
在表格中填写屏幕尺寸和分辨率后，自动计算出屏幕的DPI
手机屏幕宽高像素计算_最全手机科普！看完小白变大神！
weixin_34093753的博客
01-01 5129
关于电脑硬件的科普多之又多，关于手机的科普少之又少。而事实上，手机的圈子一点不比电脑浅，甚至还要深一些，因为一份电脑的配置里不会有键盘，音箱，耳机，屏幕这些外设，而在手机里可就不一样了，马达，音质，屏幕都是手机爱好者们讨论的内容。如果需要实时关注这篇文章的更新，请在评论区发一句留言，重大更新我会在评论区告诉你。目录SoC摄像头屏幕马达与扬声器充电外观其他SoC在手机这边，CPU，GPU等等是集合起...
深入理解移动端像素知识与Viewport知识
aiolos1111的专栏
07-20 1万+
在做移动端网页开发时，首先要搞清楚三种viewport和三种像素，只有明白了这些概念，才能更好地开发出适配不同分辨率设备的网页。 但参阅的博客越多，对这些概念越是混乱，同样的一个概念，在一篇博客中是这种说法，在另一篇博客中又变成了另外一种说法，越看越成了一团乱麻！ 本文试着去综合一下多篇博客中的这些概念，并尝试去理顺这些概念间的复杂关系，如有错误，欢迎指正！        声明: 本人在
移动端-像素和分辨率
L990614的博客
10-13 1537
1.像素分辨率 重点：像素 分辨率的关系 难点：印刷不同产品时的不同分辨率设置的理解 像素概念 网页中的像素单位 像素(pixel)概念 一般而言，pixel（像素）是图像的基本采样单位。详细解释见维基像素条目。所以它不是一个确定的物理量，也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），而是一个抽象概念。 CSS像素(css pixel) CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。 在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relati
viewport手机逻辑像素与物理像素原理（附完整手机各版本尺寸）
热门推荐
谢泽的网络日志
12-27 2万+
每英寸有多少个像素，称为ppi(pixel per inch)。我们可以简单算算，iPhone 4是640 x 960像素，对角线就是1154像素，除以3.5英寸，应该是330ppi。而官方给出的数字是326ppi。当像素太密，超过300ppi的时候，人眼 也就不能区分出每个像素。因此iPhone 4的屏幕叫作Retina显示屏。Retina在英文中，是视网膜的意思。
移动端分辨率和像素的基本知识
qq_31041847的博客
12-20 1801
关于移动端分辨率和像素的基本知识： 屏幕 移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。 通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）如下图所示 而分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成，如下图所示 长度单位 在...
rem与px换算的计算方式
weixin_30335353的博客
01-19 2119
前言 这段时间的小项目中算是真正意义上使用了rem来进行移动端的页面布局，项目结束了我反思了一下之前的对于rem的使用...原来我以前对rem用法完全是在搞笑啊！！结合这次这个小项目，我觉得我也有必要对rem布局以及用法进行一次总结。 ps.文笔可能不太好... 1.什么是rem 来自于鹅厂ISUX团队的解释如下：rem（fontsizeoftherootelement）是指相...
移动端web页面知识小结之像素、物理像素、逻辑像素
aiolos1111的专栏
07-11 1万+
一直以来，本人对移动端分辨率、像素等概念傻傻分不清，特查阅多位牛人博客后总结如下要点，以便日后查看。 文档来源http://weizhifeng.net/you-should-know-about-dpi.html http://www.chinaz.com/manage/2015/0902/441624.shtml http://www.cnblogs.com/2050/p/3877280
移动端布局 - 物理像素和物理像素比
qq_33962481的博客
06-01 556
文章目录前言一、物理像素比二、二倍图三、背景缩放单位 前言 手机和电脑的屏幕都是由一个个的像素点排列组成的. 电脑端的1px和一个物理像素是一一对应的. 一、物理像素比 一个px能显示的物理像素点的个数, 称为物理像素比. 二、二倍图 如果一个图片的像素为5050, 直接放到手机端, 就会放到2倍, 图片就会变得模糊. 解决方法是放一个100100的图片, 然后手动把这个图片缩小为50*50 img { width: 50px; height: 50px; } .box { /* 原始图片为100
移动端像素适配 750计算
最新发布
08-25
移动端像素适配是指在开发移动应用或网页时，使元素在不同设备上显示一致。常见的移动端像素适配方案是基于CSS像素和设备独立像素的概念。 在移动设备中，设备独立像素是一个虚拟像素单位，可以认为是计算机坐标系...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值