iPhone X 适配方案 2017年9月苹果发布了 iPhone X 机型，对于它的“刘海儿”和底部 Home Indicator，QQ空间 H5 也在第一时间做了兼容适配。...(safe-area-inset-X) 和 env(safe-area-inset-X) ，这些属性是与 iOS 11 以上的所有 iPhone 机型 (不仅仅包括 iPhone X ) 都相关的，故以...针对 iOS 11.0 - iOS 11.1 的系统： 当设置了 viewport-fit=cover，H5 页面会覆盖页面安全区域全屏展示，但是这样会带来页面元素被“刘海儿”和底部 Home Indicator...针对 iOS 11.2 及 iOS 11.2 以上的系统： constant() function 改成了 env()，其他与 iOS 11.2 以下表现一样 (详见第2点) 。...或者让客户端开发编译一份模拟器版本的 .app 文件，将其拖进运行的模拟器屏幕，应用就成功安装了。
image.png 2017年9月苹果发布了iPhone X机型，对于它的“刘海儿”和底部Home Indicator。我们可以通过以下三种方案进行适配~下面就让我来逐一介绍吧！...)和env(safe-area-inset-X) ，这些属性是与iOS11以上的所有iPhone机型（不仅仅包括iPhone X）都相关的，故以iOS版本为区别具体分析一下全屏下的H5页面： 1....针对于iOS11.0-iOS11.1的系统： 当设置了viewport-fit=cover，H5页面会覆盖页面安全区域全屏展示，但是这样会带来页面元素会被“刘海儿”和底部Home Indicator遮挡问题...针对iOS11.2及iOS11.2以上的系统： constant() function改成了env()，其他与iOS11.2以下表现一样（详见第2点）。...或者让客户端开发编译一份模拟器版本的.app文件，将其拖进运行的模拟器屏幕，应用就成功安装了。
在新 iPhone 12 系列中，屏幕高度分别为： Device Retina 屏幕点(pt) 物理像素 (px) iPhone 12 Pro Max 6.7″ 3X 926 x 428 2778 x...目前 App Store 里运行有问题的 App，如斗鱼，都是用了最新版本 Xcode 12.1 上传的 ipa。 所以二者的的差别在哪里？...这个兼容规则也用着显示模式的设置里（在用户在设置 -> 显示和亮度 -> 放大显示 里设置了放大效果）。...真实 iPhone 11 Pro 的顶部安全距离是 44，底部安全距离是 34；而 iPhone 11 Pro Max 运行在放大显示（Display Zoom）下，虽然屏幕分辨率和 iPhone 11...bottomOffset 是否大于 0 来确认是否是刘海屏，进而设置不同尺寸。
大家好，又见面了，我是你们的朋友全栈君。 iPhone手机屏幕尺寸一般指：物理像素，ps像素。 iPhone的app现在一般适配2倍图和3倍图。...但是若你在iphone 4/iphone 4s手机上画条0.5像素的线是显示不出来的，但是在iphone 6及更高版本画一条1/([UIScreen mainScreen].scale)（就是0.5或1...,iphone8 plus实际像素点： 5.5英寸屏 （414/736） iphontX若不设置启动图片相当于iPhone8的放大模式（375/667） ，若设置了启动图片才是他的实际像素 实际像素点...iPhone8的放大模式（375/667） ，若设置了启动图片才是他的实际像素，实际像素点： 5.4英寸屏（iPhone 12 mini）（375/812） 5.8英寸屏（iPhone X，iPhone...iphone6，7，8的放大模式屏幕像素是：（320/568）。iphone6 plus，7 plus，8 plus的放大模式屏幕像素是：（375/667）。
一、屏幕尺寸 1、规格： iPhone X 的屏幕宽度同 iPhone 6、iPhone 6s、iPhone 7 和 iPhone 8 的 4.7 英寸屏幕宽度相同，即 375pt。... 2、提供全屏用户体验，这里主要是指列表要延展到屏幕底部。  3、避免将可交互控件放在屏幕底部或者屏幕圆角区域，防止视觉遮挡和系统边缘手势冲突。... 4、不要刻意遮挡和和引导屏幕的关键位置，比如用纯黑色的navigationbar和toolbar遮住上下区域，或者用闪亮的背景强调底部指示器区域。...上图为官方标准的黑色背景，注意不是纯黑色的，还能分辨传感器区域  三、SafeArea安全区域 安全区域是指在屏幕顶部和底部区域之间能正常显示内容的区域。...支持target最低版本号是iOS9，可以使用锚点布局NSLayoutAnchor： NSLayoutConstraint *top = [contentView.topAnchor constraintEqualToAnchor
iOS 6 —— Auto Layout（自动布局） 随着 iPhone5 \ iPhone5s 等的发布苹果设备不同尺寸的屏幕变得越来越多, 不仅要求能根据控件父子 关系来设置相对位置，也要求能根据任意控件之间的关系来设置位置因为...Autoresizing 只能设置当前控件 与父控件之间的相对关系，当遇到要设置兄弟控件之间的关系的时候 Autoresizing 就无能为力了 举例: 在竖屏下, 屏幕底部有两个按钮，这两个按钮的间距为一个固定的值...（宽度不指定） 当切换为横屏的时候要求这两个按钮还显示在屏幕底部 并且按钮间的间距不变, 按钮可以随之变宽 Auto Layout 技术主要解决的问题：控件位置的参照关系不再局限于父控件 iOS 8...通过 Size Classes + Auto Layout 的方式, 可以为不同尺寸的屏幕设置不同的约束 举例: iPhone 下的计算器，在横屏、竖屏下的不同表现 Size Classes 技术主要解决的问题...: "主要解决了iPhone横竖屏适配及iPhone和iPad开发时共用一个SB的问题" iOS 9 —— Size Classes + Auto Layout + StackView StackView
这是此文档的第一篇文章，写在之前要说的话。里面设计的技术点可能有些新人不是太了解，我只会说我遇到的难点和思路，文章也是想到那里写到那里。...获取资源文件和图片 我们利用电脑的iTunes下载最新的百思不得姐的应用，我下载的是4.5版本的应用，后续的版本可能有一些不同。...我们只支持iOS8.0以上，只支持iPhone，所以只支持下面的机型。...因为我之前命名按照屏幕的分辨率+@屏幕的倍数，我们就需要方法获取屏幕的尺寸和倍数就可以合成图片的名称。...我们定义常量KAppScreenWidth标识屏幕的宽度，定义常量KAppScreenHeight标识屏幕的高度，定义常量KappScreenScale标识屏幕的倍数。
使用正确的iPhone X画板尺寸 与之前的iPhone不同，iPhone X屏幕比前一代高145点（约为前一代的20％），并有圆角。如下图所示： ?...2．避免在屏幕底部设置手势交互 由于Home键现在已经被放置在底部的细条交互式控件所取代，除非非常必要，否则不要轻易设置手势交互，它可能会遮挡住Home提示条。...在iPhone X的内容被显示在一个小于4.5英寸设备上的情况下，该设计甚至可以把多余的屏幕留白（图中两边垂直的白边）收起来。为了交付这样的好图像，为不同的长宽比创建独立的屏幕适配也是值得的。 ?...参考正确的解锁方法 关于解锁，iPhone X并没有一如既往地采用Touch ID，而是使用Face ID； 通过投射和分析超过3万多个不可见的点，从而创建一张精确的面部深度图。...使用正确的分辨率导出正确的颜色 iPhone X具有很高的分辨率，因为相较以往几代，它具有更长的新屏幕。它的新超级视网膜显示屏具有2346 x 1125分辨率和458 PPI的像素密度。
屏幕尺寸 在纵向方向上，iPhone X上的显示屏的宽度与iPhone 6，iPhone 7和iPhone 8的4.7 寸显示屏的宽度相匹配。...iPhone X具有比例因子为@ 3x的高分辨率显示。对于字形和其他平面的矢量图形，最好提供独立于分辨率的PDF。对于光栅化图稿，您可以提供@ 3x和@ 2x版本的作品。...请注意，当背景任务（如录音和位置跟踪）处于活动状态时，iPhone X上的状态栏不会改变高度。 如果您的应用程序目前隐藏状态栏，请重新考虑iPhone X上的决定。...iPhone X具有不同于4.7 寸iPhone的长宽比，因此，全屏4.7 寸iPhone图形在iPhone X上全屏显示时出现裁剪或letterboxed。...同样，全屏iPhone X图稿在显示时被裁剪或被柱状显示全屏显示在4.7 寸iPhone上，确保重要的视觉内容保持在两种显示尺寸上。 避免将交互式控件明确放置在屏幕底部和角落。
iPhone XSMax 和 iPhone SE的分辨率分别为 2688x1242和 1136x640。这表示手机分别在垂直和水平上所具有的像素点数。...在上面描述手机分辨率的图片中，我们可以看到： iPhone XSMax 和 iPhone SE的 PPI分别为 458和 326，这足以证明前者的屏幕更清晰。...当然，上面的规则也有例外， iPhone6、7、8Plus的实际物理像素是 1080x1920，在开发者工具中我们可以看到：它的设备独立像素是 414x736，设备像素比为 3，设备独立像素和设备像素比的乘积并不等于...我们来看一下它的计算公式： $$ a=2arctan(h/2d) $$ a代表人眼视角， h代表像素间距， d代表肉眼与屏幕的距离，符合以上条件的屏幕可以使肉眼看不见单个物理像素点。...如：在 dpr=2的屏幕上展示两倍图 (@2x)，在 dpr=3的屏幕上展示三倍图 (@3x)。 ?
目前的H5页面可以分为通栏页面和非通栏页面两种，每种页面都可能有底部操作栏，具体如下： 通栏页面 顶部通栏 某些业务的一级页面多数使用了顶部通栏banner的效果，由于iPhone X在状态栏增加了24px...这个问题涉及到安全区域，iOS11 和先前版本的不同之处在于，webview 比较重视安全区域了。这意味着，如果给页面元素设置 top: 0, 它会渲染在屏幕顶部的44px之下，也就是状态栏下面。...如果给页面元素设置 bottom: 0, 它会渲染在屏幕底部的34px之上，也就是底部安全区域上面。...另外提一点，经过2个版本的webview测试，发现WKWebView在渲染页面的时候，底部按钮在位置表现上不一致，可能是一个还未解决的bug： 使用web方案： 根据以上的设计方案，可以这样处理： 修改页面..._bid=278&_wvx=10&_wvxBclr=0xf7f7f8 （这里的wvx=10为2和8两个特性数字相加） 这样，无需写一行代码，只需要给页面链接增加适配参数，就可以完美适配iPhone X
iPhone X/XS 的屏幕宽度（开发尺寸）与 4.7 英寸的 iPhone 8 相同，都为 375pt，只是在高度上增加了 145pt； iPhone XR 和 iPhone XS Max 的屏幕宽度...（开发尺寸）与 5.5 英寸 iPhone 8 Plus 相同，都为 414pt，只是在高度上增加了 160pt； 因此，设计师在出图时，仍然可以以 iPhone 8 和 iPhone 8 Plus...的屏幕宽度为基准分别进行 UI 布局，而对于不同高度的屏幕只要在纵向上进行内容延伸即可。...备注：这里所说的 iPhone X 泛指上述介绍的屏幕大小为 5.8、6.1、6.5 英寸三种尺寸，且带有顶部刘海和底部操作条的 iPhone 设备。...后面我们想了一个简便的方法，即获取屏幕的宽度和高度，取较大一方进行比较是等于 812.0 或 896.0，代码如下： 方式三：通过底部安全区域的高度来判断 在去年 iPhone X 发布后，为了适配顶部的浏览和底部的操作条
以现在的电脑屏幕情况，还没有一种单位可以保证，在不同分辨率下，一个文字大小可以“固定不变”。...iPhone3GS时代，我们为一个应用提供图标（或按钮提供贴图），只需要icon.png。针对现在的iPhone4~6 Retina显示屏，需要制作额外的@2x高分辨率版本。 ...从分辨率的角度来看，iPhone6沿用二倍图（@2x），但需为iPhone6+提供更高的三倍图（@3x）；从屏幕尺寸角度来看，需要重新对UI元素尺寸和布局进行适配，以期视觉协调。...假如交互按照iPhone5(s)下绝对标注，则在iPhone4(s)上可能挤出屏幕底部，而在iPhone6(+)上则可能横向偏左或纵向偏上。 ...苹果在WWDC2012 iOS6中已提出了Auto Layout的概念，即使用约束条件来定义视图的位置和尺寸，以适应不同尺寸和分辨率的屏幕。
目前，iOS系统版本已经更新到9.3，XCode的最新版本已经是7.3，仅iPhone历史产品的尺寸就已经有4种：3.5英寸、4.0英寸、4.7英寸、5.5英寸。...被引入，比autoresizing更加高级，旨在替代autoresizing，可以设置任何控件之间的关系)->sizeClass(iOS8出现，用于解决越来越多的屏幕尺寸的适配问题)。...在iPhone3gs时代，手机的屏幕尺寸有且只有一种，也就是3.5英寸。开发app的时候，根本不用考虑同一个视图在不同尺寸的屏幕上显示的问题。...iOS开发者完全可以用纯代码的方式把一个控件的frame写死。 后来apple公司推出了4.0英寸的iPhone5和iPhone5S，所以，针对于不同尺寸的屏幕，再把控件的frame写死就不可取了。...但sizeclass是对不同尺寸的屏幕的区分，sizeclass把不同尺寸（包括横屏和竖屏）的屏幕进行了分类，无论是iPhone还是iPad设备，其宽度和高度都被划分为三种类型：compact（紧凑）、
在iOS开发及测试中，文字和图片的机型适配是一项重要工作，这篇文章给大家介绍下常用的iPhone的屏幕分辨率相关概念及各个机型的屏幕适配技术。 屏幕适配相关概念 1....屏幕尺寸 屏幕尺寸是指屏幕的对角线长度。 ? 一般情况下，我们说iPhone 8的屏幕是4.7寸屏，就是指iPhone 8的屏幕对角线为4.7英寸。...从比例可以看出，在iPhone 5和iPhone X进行了加长处理。中间的各个版本的比例是一致的。 3....1x, 2x, 3x 的含义：屏幕模式，描述的就是屏幕中一个点有多少个 Rendered Pixels 渲染，对于2倍屏(又称 Retina 显示屏)，会有 2 * 2 = 4 个像素的面积渲染，对于3...以上是小编对屏幕适配的相关概念和适配技术方案的学习分享，屏幕适配测试具体关注哪些内容，后续会进行总结再分享，如果大家有其他更好的方法或建议，欢迎留言补充~ ?
所以说，移动端web开发面临的最大问题就是就是多屏适配，这是一个设计师、开发和测试都要面临的问题，如何做到在不同分辨率，不同屏幕密度上的手机上，同样大小的UI元素，看起来是一样大的。...2倍图 后来苹果发明了retina，就有了屏幕像素比这个概念，2倍图就是屏幕像素比为2的图，这种比例以iphone 4起为代表，iphone4它的尺寸是320x480，但是它的分辨率是640x960。...即：分辨率 = 屏幕宽高 x 像素比 3倍图 到了iphone plus又出了三倍图的概念，它的尺寸是是414x736 ，而分辨率达到了1242x2208。...下面是iphone系列各个宽高及像素比： 安卓的屏幕尺寸更加多样，分辨率有很多种，相应地，设备像素比也不一致，有1、1.5、2、2.25、3等等。也有1.5倍图等概念。...一些手机浏览器底部会有导航，也有些会在顶部和底部都有占位，比如导航栏、状态栏。顶部的占位会把内容往下挤，底部的占位会把内容遮盖住。如果做只有一屏的H5，高度要注意一下。
9月8日，苹果在秋季新品发布会上正式发布了全新的iPhone 14系列手机。全新的iPhone 14系列首次全系加入了双向卫星通信功能。...iPhone 14拆解 在iPhone 14的拆解上，与之前一样，先是要取出SIM卡托（美版已升级eSIM，无需卡托），然后卸下手机底部的两颗螺丝，划开屏幕的粘胶后即可打开屏幕。...这里需要指出的是，全新的iPhone 14和iPhone 14 Plus（Pro系列则不是）均采用了不同以往的“三明治”式的内部结构设计，屏幕和背壳都是可以轻松单独拆卸下来的，这样非常便于屏幕和后盖的维修或更换...△iPhone 14 Pro（左）和iPhone 14（右）打开屏幕后对比 卸下主板上的8颗螺丝，即可取出主板上的盖板。...底部的副板结构和上代一样，集成有气压计，两个麦克风以及一个充电口。底部扬声器出窗口内侧有防尘防水的胶圈。
Apple 发布了 iOS 16 的第一个公开测试版，这个版本支持 iPhone 8 以上机型安全测试软件更新。...自定义锁定屏幕 iOS 16 的主要新功能是能够使用多层壁纸、日期和时间的自定义字体以及即将到来的日历事件、天气、电池电量、警报、时区、活动环等小部件来个性化锁定屏幕。...在 iOS 15 及更早版本上，已编辑的消息作为一条新消息接收，显示“已编辑为 [X]”。...Apple 上次在 2016 年在 iOS 10 的锁定屏幕上提供全屏音乐播放器。如果您不喜欢该功能，可以点击显示屏底部以最小化音乐播放器并恢复为标准锁定屏幕壁纸。...这是自去年发布 iOS 14.5 以来 iPhone 与 PS5 DualSense 和 Xbox Series X 控制器的现有兼容性的基础之上。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
