苹果触摸图标的正确像素尺寸是多少？

苹果触摸图标的正确像素尺寸是50x50像素。这个尺寸可以确保在不同设备和分辨率下都能正常显示。在设计苹果触摸图标时，请确保图标是简洁明了的，并且易于识别。同时，也可以考虑使用多种尺寸的图标，以适应不同的设备和场景。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

屏幕边缘上有趣的 1 个像素，看不见、摸不到

如果你的屏幕分辨率是 1920×1080，那么一个全屏的窗口程序尺寸是多少呢？想都不用想，是 1920×1080。那么输入设备输入的坐标是多少呢？是 X∈[0, 1919] ？...这意味着 X∈[0, 1919] 或者 X∈[1, 1920] 的取值范围就能表示横向的所有像素了。那么实际上最左侧的点的输入数值是多少呢？最右侧的点的输入数值是多少呢？...我写了一个最大化全屏的程序专门用来测试鼠标和触摸输入的数值是多少。...于是，你可能遇到的问题是：如果你在屏幕的左侧边缘触摸，你的程序可以一直收到触摸事件，你能够得到正确的响应；如果你在屏幕的右侧边缘触摸，你将仅能偶尔收到零星的刚好超出窗口大小的触摸坐标，大多数时候收不到触摸事件...防踩坑秘籍林德熙小伙伴告诉我说可以特意把窗口的尺寸做大一个像素。

1742 0

CALayer的寄宿图

kCAGravityResizeAspectFill 使用代码如下： view.layer.contentsGravity = kCAGravityCenter; contentsScale contentsScale属性定义了寄宿图的像素尺寸和视图展示大小的比例...假设目前是在plus的设备上，通过设置layer的contents来展示一张图片，那么获取到的图片是一个3倍图，如果不设置contentsScale的值，那么就会展示图的原始像素大小，所以此时要将layer...和bounds、frame不同，contentsRect不是按点来计算的，而是使用的单位坐标，单位坐标指定在0到1之间，是一个相对值（像素和点都是绝对值），所以contentsRect是相对于寄宿图的尺寸而言的...点就像是一个虚拟的像素，也被称为逻辑像素。在标准设备上，一个点就是一个像素；但是在Retina屏幕上，按照不同的屏幕尺寸，一个点可以表示一到多个像素。...contentsRect的默认值是{0,0,1,1}，它表示的是，从寄宿图像素尺寸的原点（0，0）开始，分别截取宽、高的1倍长度，其实就是展示整个寄宿图。

1K2 0

什么是移动端开发【重点学习系列—干货十足–一万字详解】

逻辑像素位图像素位图和矢量图像素之间的关系像素密度像素比 / N倍屏视口 PC 端移动端布局视口视觉视口理想视口 2-缩放 PC 端移动端真机测试流程（重点） 3-viewport...普通屏幕下 1 设备独立像素等于 1 物理像素高清屏幕下 1 设备独立像素等于 N 物理像素 Retina 屏幕 Retina 是苹果公司 2010 年推出的一种显示标准，是把更多的像素点压缩至一块屏幕里...设备独立像素的出现，使得即使在高分辨率的屏幕下，也可以正常尺寸的显示元素，代码不受到设备的影响。...位图像素是栅格图像（如：png，jpg，gif等）最小的数据单元。位图和矢量图位图图像是由称作像素（图片元素）的单个点组成的。放大后会失真。...矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。放大后不会失真。

2.5K2 1

【特征提取】Hog特征原理简介与代码实践

以下图为例(图源：[1])，黑色像素点值为0，白色像素点值为1，分别求X方向梯度和Y方向梯度，从后两幅图可以看出，当箭头从0突变到1时，梯度为正值，图像中以白色边缘表示，反之为负值，以黑色的阴影表示。...还是拿这张猫图举例，假设block的大小为2 X 2，那么就包含2 X 2个cell，所占据的尺寸为(16，16)个像素。...至于这里的大小设置，个人理解是和目标的尺寸有关。例如，行人检测的最佳参数设置是：3×3细胞/区间、6×6像素/细胞、9个直方图通道[3]。...移动block，计算维度下面就到最后一步，一张图里有多个像素，那么通过计算之后，整张图的hog特征的维度是多少呢？这里我们进入实践，来通过实践来理解block是如何移动的。...：水平方向block个数=(256-128)/8 + 1 =17 垂直方向block个数=水平方向block个数=17 那么总维度=16x16x9x17x17=665856 结果证实，该思路是正确的

7422 0

【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

background-size 缩小一半 , 也就是精灵图缩小一半 ; 最终测量后 , 在缩小一半的精灵图中 , 放大镜图标的左上角在 81, 0 坐标位置 , 设置 background-position...position: absolute; /* 设置放大镜图标的绝对定位位置 */ top: 8px; left: 50px; /* 设置盒子模型尺寸 */ width...{ /* 二倍精灵图 */ /* 设置精灵图中的放大镜图标 */ /* 该图标是绝对定位 */ position: absolute; /* 设置放大镜图标的...; /* 字体大小 14 像素 */ font-size: 14px; /* 如果是苹果就是用苹果默认字体如果不是苹果手机就使用后啊面的字体 */ font-family...{ /* 二倍精灵图 */ /* 设置精灵图中的放大镜图标 */ /* 该图标是绝对定位 */ position: absolute; /* 设置放大镜图标的

2K3 0

【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )

对应的 css 样式为 : .slider img { /* 设置 Banner 栏大图宽度尺寸为 100% */ width: 100%; } 设置了...; /* 字体大小 14 像素 */ font-size: 14px; /* 如果是苹果就是用苹果默认字体如果不是苹果手机就使用后啊面的字体 */ font-family...{ /* 二倍精灵图 */ /* 设置精灵图中的放大镜图标 */ /* 该图标是绝对定位 */ position: absolute; /* 设置放大镜图标的...设置精灵图以及精灵图中的放大镜图标位置 */ background: url(.....} .slider img { /* 设置 Banner 栏大图宽度尺寸为 100% */ width: 100%; } 3、展示效果

1.7K2 0

【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

*/ font-size: 12px; } 4、二倍精灵图下图中的 5 个图标 , 都定义在一个精灵图中 , 这里需要使用精灵图作为背景 ; 精灵图如下 , 尺寸为 64 x 320...像素 , 每个图标的尺寸为 64 x 64 像素 , 这又是一个二倍精灵图 ; 二倍精灵图设置步骤 : 缩小精灵图 : 在 Firework 中 , 将精灵图缩小一半 ; 测量坐标 : 在缩小一半的精灵图中测量坐标.../images/localnav_bg.png) no-repeat 0 0; /* 二倍精灵图将精灵图尺寸设置为原来的 1/2 */ background-size: 32px auto...; /* 字体大小 14 像素 */ font-size: 14px; /* 如果是苹果就是用苹果默认字体如果不是苹果手机就使用后啊面的字体 */ font-family.../images/localnav_bg.png) no-repeat 0 0; /* 二倍精灵图将精灵图尺寸设置为原来的 1/2 */ background-size: 32px auto

4952 0

新iPhone 13iPhone 12s 谣言汇总

hone 产品介绍苹果概念和谣言苹果产品介绍苹果产品新闻谣言是什么？我整理了目前知道的信息（包括泄漏和谣言）。机身尺寸似乎基本上与iPhone12系列相同。...生物识别是人脸 ID+ 触摸 ID 的恢复吗？ 4. 新闻资讯 1. 缺口可能很小。...几乎与iPhone12系列类似显示尺寸微型LED或迷你LED Pro Pro Max系列是否采用三星Display制造的LTPO（LowTemperature Polycrystalline...6400 万像素传感器和 6 倍广角 1 倍光学变焦数字变焦 4000 万像素传感器和 3 到 5 倍光学变焦 15 到 20 倍数字变焦 4000 万像素传感器和 0.25 倍超广角光学变焦 LiDAR...苹果似乎也意识到了触摸ID的便利性。在这种情况下，Touch ID 的复活谣言又出现了。但是，有两种方法可以恢复此触摸 ID。

4882 0

进入移动Web世界

Pixel px: CSS pixels 逻辑像素，浏览器使用的抽象单位； dt,pt: 设备无关像素； dpr: 设备像素缩放比；公式：1px = (dpr)2 * dp 默认缩放比例： ldpi...也就是说，最终目的，是为了排版正确。但是由于一般默认情况下，给出的viewport像素宽对页面来说是不友好、不规范的，因此我们还需要解决一个规范问题。...检查设备横屏竖屏处向（landscape横，portrait竖）设计点百分比布局：使切换css不同媒体样式时更加平滑弹性图片：图片根据盒子百分比，改变盒子宽高即可重新布局，显示和隐藏：同比例缩减元素尺寸...： /* 错误案例 */ div{ border-top: 0.5px; } /* 正确案例 */ div:before{ border-top: 1px; -webkit-transform...事件属性 touches：跟踪触摸操作的touch对象数组 targetTouches：特定事件目标的touch对象数组 changeTouches：上次触摸改变的touch对象数组 c.

1K2 0

嵌入式：人机交互接口设计详解

四线电阻触摸屏原理 S3C2410A的触摸屏接口 CPU与触摸屏连接图触摸屏编程实例键盘和LED的接口原理 HA7279A是一片具有串行接口并可同时驱动8位共阴式数码管或64只独立LED的智能显示驱动芯片...HD7279A与S3C2410A的连接原理图键盘和LED控制的编程实例举例：通过按键来控制LED的显示。...这两个字段的值由LCD的显示尺寸和显示模式决定： HOZVAL = (水平显示尺寸 / 有效 VD 数据行数)- 1 （在彩色显示模式水平显示尺寸= 3 ×水平像素数；在4位单扫描和4位双扫描模式，有效...四线电阻触摸屏原理在触摸点X、Y坐标的测量过程中，测量电压与测量点的等效电路图所示，图中P为测量点 S3C2410A的触摸屏接口 S3C2410A支持触摸屏接口，它由一个触摸屏面板、四个外部晶体管...CPU与触摸屏连接图触摸屏编程实例举例：在触摸屏上按下的位置画一个点。

5772 1

dotnet X11 的多屏触摸行为测试

故事的背景是我在给 Avalonia 加上触摸尺寸的支持时，代码审查过程中大佬提出了在多屏上的 X11 行为问题，为此我找了两个触摸屏进行测试 X11 的多屏触摸行为。...由于我的设备有限，本文只记录我所测试到的行为给 Avalonia 加上触摸尺寸支持的功能的代码： https://github.com/AvaloniaUI/Avalonia/pull/16498 基础环境...18950.00/10000 = 1.895 米由于 CVT 的设备报告的逻辑值和物理值都是相同的最大值最小值，因此以上代码我不确定拿到的是逻辑值还是物理值通过以上代码也可以看到，我无法直接获取到正确的多屏不同尺寸的设备的多个屏幕的物理尺寸...这是因为我无法直接知道输入的是哪个屏幕以及其比例值但像素值倒是很好获取到，只需获取到其触摸点报告的 TouchMajor 值，与 TouchMajorXIValuatorClassInfo 的最大值和最小值相比...触摸右边 2400x2160 屏幕，获取到的 TouchMajorValuatorValue 是大概 160 的值分别求像素大小：左边屏幕： 100/18950*3840=20.2638522427

1061 0

前端如何提高用户体验：增强可点击区域的大小

为了更加清楚，请参见下图，左图可点击区别(圈红部分)明显比右图的小很多，所以右图的实现用户体验会更好。 ? 对于本文，会介绍一些事例，并通过事例演示如何增加可点击区别，提高用户体验。...用户应该能够使用台式机/笔记本电脑上的键盘以及移动设备或平板电脑上的触摸屏来操作输入。不要在移动设备屏幕上将按钮设置得太小，以免按下正确的按钮。触摸目标的最小尺寸最好至少为44 x 44像素。...如果使用了正确的元素，就不会发生这种情况。 ?...正确的方法是在a 标签本身上添加padding。...这个想法是，伪元素属于其父元素，因此当我们创建具有特定宽度和高度的伪元素时，它将充当其父元素的单击/触摸/悬停区域。

4.8K2 0

【移动端网页布局】流式布局案例 ⑤ ( 连续排列的链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

; /* 字体大小 14 像素 */ font-size: 14px; /* 如果是苹果就是用苹果默认字体如果不是苹果手机就使用后啊面的字体 */ font-family...需要在父容器设置 overflow: hidden */ margin-top: 7px; } .jd-icon { /* 搜索框中插入 JD 图标 */ /* 设置 JD 图标的宽高...{ /* 二倍精灵图 */ /* 设置精灵图中的放大镜图标 */ /* 该图标是绝对定位 */ position: absolute; /* 设置放大镜图标的...设置精灵图以及精灵图中的放大镜图标位置 */ background: url(.....} .slider img { /* 设置 Banner 栏大图宽度尺寸为 100% */ width: 100%; } /* 设置水平方向上连续排列的图片链接 */ .brand

3.5K2 0

【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

3.3K4 0

iPhone 各屏幕尺寸及解析

一.iPhone 各屏幕尺寸表手机型号屏幕尺寸(inch) 像素密度（PPI）逻辑分辨率（point）物理分辨率（屏幕分辨率）（pixel）缩放因子（scale factor）宽高比...在iPhone 3GS上： 1 pt = 1 px 到了iPhone 4开始，苹果引入了Retina屏幕。在一定物理单位内可以显示2倍的像素。...物理分辨率：显示屏的最佳分辨率，即屏幕实际存在的像素行数乘以列数的数学表达方式，是显示屏固有的参数，不能调节，其含义是指显示屏最高可显示的像素数。物理尺寸（物理分辨率）：是指屏幕的实际大小。...大的屏幕同时必须要配备高分辨率，也就是在这个尺寸下可以显示多少个像素，显示的像素越多，可以表现的余地自然越大。...，比如标签栏或导航栏按钮的物理高度只有原来的 81.5% ，点击面积就只有iPhone 6的 0.815*0.815=66.4%，用户点击就困难了，总不至于苹果考虑触摸手指操作，为 <= iPhone

3.1K2 0

翻译_iOS视图编程指南(View Programming Guide for iOS)之视图和窗口体系

9984 0

移动端开发的几点建议

简单点说，我想知道怎么获取设备的真实开发尺寸（根据这几天查资料所得，这个概念叫逻辑像素）。...苹果设备大多都能查到它的开发尺寸是多少。但安卓设备不是，没有这种条件，所以要靠其他手段了。根据查资料所得，目前有两种方法可以获得移动设备的真实开发尺寸。...第一种方法：设备像素比真实开发尺寸 = 分辨率 / 设备像素比通过 window.devicePixelRatio 可以获取设备像素比，例如 iphone 6 的设备像素比是 2，即分辨率 / 2...获取到它们的真实开发尺寸分别为 960 x 600 1024 x 640，根据分辨率和真实开发尺寸还能得知两个设备的设备像素比分别为 2 和 2.5。如图所示（华为 m5） ?...为了证明推断是正确的，我拿了一个专门在 m5 pro 上使用的 app 放在 chrome 上运行（模拟该设备的开发尺寸），完美适配。 ?

9672 0

［ISUX译］iOS 9 人机界面指南(五)：图标与图形设计 - 腾讯ISUX

不要在icon中使用苹果的硬件产品标志。代表苹果产品的各个标志都是受版权保护的，不允许复用到你的icon或者图形中。...尝试创造多数用户都能正确理解的标志，并不让它们感到攻击性。重要：确保你的设计中没有复用苹果官方产品的图形。这些标志受版权保护，而且相关产品的设计会频繁变化。...具体来说，使用 1-point 描边(也就是在 @2x 分辨率下是 2 像素描边) 不管图标的是怎样的视觉风格，都需要按照尺寸表表格 45-1来创建自定义工具栏、导航栏以及标签栏的图标。...据你所提供的可缩放图片，iOS会进行拉伸或者平铺，直到图片可以正确填充当前UI元素的背景区域。拉伸指的是在不考虑图片原始比例的情况下放大图片。拉伸图片的性能较高，但对于多像素图片来说，会出现失真现象。...一般来说，提供一张不包含端盖的最小尺寸可缩放图像即可达到想要的效果，比如：如果你需要不包含渐变的实色图，制作1×1像素的图片。

1.6K3 1

WPF 触摸屏应用需要了解的知识

注意这个 xx 像素是因为软件里面只能知道像素，而不知道物理距离尺寸。因此需要根据具体触摸框和屏幕测试出这个像素值。...而逻辑值是根据当前屏幕的分辨率和尺寸等给定一个逻辑上计算出来的值，逻辑值主要是让不同的触摸框上报给应用一个大概相同的值而应用显示触摸面积的大小也是一个神坑，原因是上面说的屏幕分辨率可不是系统分辨率。...而分辨率和像素相关，应用程序能控制的仅仅是像素。因此就需要应用程序知道当前运行过程中像素和物理尺寸的换算比例是多少，这部分需要应用程序和硬件配合，应用程序询问硬件当前的型号以及显示屏幕的尺寸。...同时知道当前系统的分辨率，以此进行缩放，拿到当前像素和物理尺寸转换的参数。...然后和触摸框部分协议报告上来的面积的含义，以此转换为实际渲染像素需要注意的是 WPF 默认是像素无关的，这部分想要达到更好的控制，还需要了解 DPI 和分辨率的关系等细节。

1.6K3 0

android学习笔记----关于图形的基本处理讲解

然后 Android 会确保所有这些图片在各种不同的设备上大概保持相同的尺寸，无论是每英寸的像素数量是多少。...应用运行时，Android 设备不会对图片做出太多的拉伸或缩小处理，设计师要知道提供哪些尺寸的资源，他们可以遵守一定的独立像素与像素转换比例。...版本要比 mdpi 版本大了很多，那是因为 xxxhdpi 设备的屏幕上有更多的像素，最终这些图片在用户的设备上看起来尺寸将保持相同现在再仔细研究下我们提供的图片的像素尺寸我们打开 drawable-mdpi...x 88dp，所以该版本的尺寸必须为 88px x 88px 因为对于 mdpi 设备来说 1dp=1px，那么对于同一图片的 xxxhdpi 版本来说，像素尺寸是多少？...，但放在屏幕上却不是这个200*175的尺寸 // 因为图在drawable-640dpi文件夹下，而屏幕420dpi，会让这个图适应屏幕而进行自动缩放显示。

6272 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云