iphone x_iphone xs - CSDN
精华内容
参与话题
  • iPhoneX适配方案

    万次阅读 2017-11-29 15:01:15
    绝对长度单位 英寸 厘米 毫米 磅 pc inch cm mm pt pica 相对长度单位是网页设计中使用最多的长度单位,包括px、em、rem等屏幕尺寸 指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米 iPhone 4/4S... iPhone

    绝对长度单位

    英寸 厘米 毫米 pc
    inch cm mm pt pica

    相对长度单位

    是网页设计中使用最多的长度单位,包括px、em、rem

    屏幕尺寸

    image

    指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米

    iPhone 4/4S iPhone 5/5C/5S/SE iPhone 6/6S iPhone 6S Plus iPhone 7 iPhone 7 Plus iPhone 8 iPhone 8 Plus iPhone X
    3.5英寸 4英寸 4.7英寸 5.5英寸 4.7英寸 5.5英寸 4.7英寸 5.5英寸 5.8英寸

    屏幕分辨率

    指在横纵向上的像素点数,单位是px,1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率,如1960*1080(这里的1像素指的是物理设备的1个像素点)

    机型 分辨率 机型 分辨率 机型 分辨率
    iPhone 4/4S 960*640 iPhone 6S Plus 1920*1080 iPhone 8 Plus 1920*1080
    iPhone 5/5S 1136*640 iPhone 7 1334*750 iPhone X 2436*1125
    iPhone SE 1136*640 iPhone 7 Plus 1920*1080
    iPhone 6/6S 1334*750 iPhone 8 1334*750

    屏幕像素密度

    image

    屏幕上每英寸可以显示的像素点的数量,单位是ppi,即pixels per inch的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小

    image

    • 屏幕上勾股定理算出对角线的分辨率:√(1920²+1080²)≈2203px
    • 对角线分辨率除以屏幕尺寸:2203/5≈440dpi
    1920^2 + 1080^22203^2  //3686400 + 1166400 = 4852800
    2203 / 5440

    PPI与DPI

    image

    PPI(Pixel Per Inch by diagonal):表示沿着对角线,每英寸所拥有的像素(Pixel)数目
    PPI数值越高,代表显示屏能够以越高的密度显示图像,即通常所说的分辨率越高、颗粒感越弱

    ppi与dpi 描述
    ppi pixels per inch,屏幕上每英寸可以显示的像素点的数量,即屏幕像素密度
    dpi dots per inch,最初用于衡量打印物上每英寸的点数密度,就是打印机可以在一英寸内打多少个点。当dpi的概念用在计算机屏幕上时,就称之为ppi。ppi和dpi是同一个概念,Android比较喜欢使用dpi,IOS比较喜欢使用ppi

    Viewport

    移动端开发中,通常我们都会采用meta标签设置viewport

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    viewport是什么?

    image

    通俗来讲,移动端的viewport就是我们所能看到的手机端浏览器的可视窗口大小,但viewport又不仅仅局限于可视窗口的大小,一般情况下,它是比默认窗口大小要大的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动端正常显示为桌面浏览器而设计的网页,移动端的浏览器都会默认把自己的默认的viewport设为980px到1024px不等,但其后果就是会出现横向滚动条,因为移动端浏览器可视区域的大小是比默认的viewport宽度要小的

    参数 描述
    width 设置layout viewport的宽度,为一个正整数,或字符串”device-width”
    initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
    minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
    maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
    height 设置layout viewport 的高度,这个属性对我们并不重要,很少使用
    user-scalable 是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许

    不同的设备对1px有不一样的定义

    在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。

    在移动端浏览器中以及某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方的定义为:设备物理像素和设备独立像素的比例,也就是devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该设备上一个css像素代表多少个物理像素。例如,在Retina屏的iphone上,devicePixelRatio的值为2,也就是说1个css像素相当于2个物理像素

    其实就是移动端和PC端的px是不同的,移动端的屏幕可视区域(viewport)小但像素多,所以跟PC相比的每个独立像素点的物理像素是多的,也就是移动端物理像素更密集,所以更PC的独立像素有dp的倍数转换

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

    物理像素(physical pixel)

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

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

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

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

    设备像素比(device pixel ratio )

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

    设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上,x方向或者y方向

    还可以通过window.devicePixelRatio获取到当前设备的dpr

    window.devicePixelRatio
    机型 iPhone 3G/3GS iPhone 4/4S iPhone 5/5C/5S/SE iPhone 6/6S iPhone 6S Plus iPhone 7 iPhone 7 Plus iPhone 8 iPhone 8 Plus iPhone X
    屏幕尺寸 3.5英寸 3.5英寸 4英寸 4.7英寸 5.5英寸 4.7英寸 5.5英寸 4.7英寸 5.5英寸 5.8英寸
    独立像素(CSS像素) 480*320 480*320 568*320 667*375 736*414 667*375 736*414 667*375 736*414 812*375
    物理像素(分辨率) 480*320 960*640 1136*640 1334*750 1920*1080(2208x1242) 1334*750 1920*1080 1334*750 1920*1080 2436*1125
    ppi/dpi(像素密度) 163 326 326 326 401 326 401 326 401 458
    dpr(倍图) 1 2 2 2 3(2.5) 3 3 3 3 3(2.9)

    如果APP要同时兼容iPhone3GS~iPhone6+,则需要提供icon.png/icon@2x.png/icon@3x.png三种分辨率的图片

    在Android中,规定以160dpi为基准,1dp=1px。如果密度是320dpi,则1dp=2px,以此类推

    2K分辨率指的是屏幕分辨率达到了一种级别,指屏幕横向像素达到2000以上(iPhone X是2K屏)

    iPhoneX的适配

    background-color

    如果网页设置了一个背景颜色,那么最简单解决方案是,在body节点设置background-color,使背景颜色填充整个屏幕,从而解决横屏显示左右白边的问题

    viewport-fit

    <!--默认值:可视窗口完全包含网页内容 相当于在安全区域展示-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=auto">
    <!--或-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=contain">
    <!--网页内容完全覆盖可视窗口-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    viewport-fit 描述 示例 示例 示例
    auto/contain 默认值,页面内容显示在safe area 示例1
    cover 页面内容充满屏幕 示例1 示例2 示例3
    横屏列表侧刘海 横屏下列表环绕刘海 示例1

    设置auto前
    image
    设置cover后
    image

    safe-area-inset-*

    在设置viewport-fit=cover之后,Web中会新增四个常量

    safe-area-inset-top
    safe-area-inset-right
    safe-area-inset-left
    safe-area-inset-bottom

    分别表示safe area和可视窗口viewport顶部,右边,左边,底部的间距,可以用于设置margin和padding或者绝对定位时left和top

    注意:在横屏和竖屏状态下,safe-area-inset-*的值不同

    image

    为了解决应用viewport-fit=cover之后,有些显示内容被裁剪的问题,我们可以通过添加边距使得网页主要内容处于safe area中不被裁剪,解决方式如下

    padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);

    image

    示例,比如下面是顶部导航条的适配,能让左上右都能出现padding来让元素保留在安全区域以内

    总结为,我们可以利用safe-area-inset-*做以下适配,详细请看DEMO

    • 竖屏下,对底部做padding-bottom: constant(safe-area-inset-bottom);,其他设置是无意义的
    • 横屏下,对底部设置左,下,右的safe-area-inset-*,对头部设置左和右的safe-area-inset-*,其他设置也是无意义的
    <header><button>返回</button> 头部</header>
    <style>
        * {margin: 0;padding: 0;}
        body {
            width: 100%;height: 100%;
            //设置背景颜色,也是一种适配方案
            background-color: #A4F4B0;
        }
        header {
            background-color: red;height: 50px;line-height: 50px;width: 100%;color: white;position: fixed;left: 0;right: 0;top: 0;bottom: 0px;
            //cover下元素出现对应的padding来适配
            padding-left: constant(safe-area-inset-left);
            padding-right: constant(safe-area-inset-right);
            //padding-bottom: constant(safe-area-inset-bottom);
            padding-top: constant(safe-area-inset-top);
        }
    
        button {
            display: inline-block;background-color: blue;color: white;border: none;height: 50px;width: 80px;
            //字体记得必须设置,不然按钮会有像素的误差
            font-size: 18px;
        }
    </style>

    媒体查询

    device-width
    device-height
    -webkit-device-pixel-ratio

    注意-webkit-device-pixel-ratio必须加前缀,否则无效

    /*iPhoneX的适配*/
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
        header {
            background-color: black;
        }
    }
    /*iPhone8P的适配*/
    @media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
        header {
            background-color: deepskyblue;
        }
    }

    参考文档

    iPhone X适配参考文档

    展开全文
  • 网络上有许多iPhone X 的UI设计文章。很多写的不够清楚,今天我们就集各家之所长,来系统的总结一下。   先来一波iPhone家族,初步的了解一下。 因为使用iPhone 5/5c/5s/SE的用户越来越少,4英寸的屏幕对于...

    Image title

    网络上有许多iPhone X 的UI设计文章。很多写的不够清楚,今天我们就集各家之所长,来系统的总结一下。

     

    先来一波iPhone家族,初步的了解一下。

    Image title

    因为使用iPhone 5/5c/5s/SE的用户越来越少,4英寸的屏幕对于现在大屏手机的时代显得过于小了,所以它们的尺寸已经不作为ios的设计尺寸,这里就不多赘述了。

     

    详细的屏幕尺寸分解再来一波。

    Image title

    这里应该有一处关于7 plus的物理尺寸:1080×1920px,基本上用不到,也就不赘述了,我也就没放上去。iPhone 8/8 Plus和iPhone 7/7 plus的显示屏相匹配,外观上并没有太多的变化,仅仅增加了无线充电等功能和处理器的提升,iPhone X才是我们设计时需要关注的焦点,它首次使用了OLED屏幕,分辨率达到1125×2436px @3x,PPI达到了458ppi。

    那么当我们进行设计时,iPhone X究竟使用什么尺寸呢?其实iPhone X可看做是iPhone 7的加长版,习惯了用750x1334px作图的设计师,iPhone X的到来并不会带来太大影响,所以我们继续使用@2x模式下的设计尺寸:750x1624px。

     

    下面我们就针对iPhone X设计尺寸和iPhone 7进行对比分析:

     

    一.页面顶部和底部对比

    Image title

    状态栏40px VS 88px

    Image title

    标签栏98px VS 98px+68px (Home Indicator)

    对比之下可以看出,iPhone X的顶部状态栏和底部标签栏都进行了增高,而且在设计时,如果顶部和底部有背景色的话,都可以进行延伸苹果禁止将这2处背景色设置为黑色去隐藏这两部分。

    下图所示:@1x尺寸下,iPhone X比iPhone 7一共多出了145pt,顶部44pt比iPhone 7多出了24pt,底部34pt,多出的高度就是:145-24-34=87pt,1pt=2px,也就是174px,这高度是可以自由利用的。

    Image title

    图片来源于网络

     

    二.安全区域对比

    Image title

    从上图绿色区域就可以一目了然的看出设计时要注意的安全区域,操控元素都应该置于安全区域内,不会被设备屏幕上的圆角、传感器和指示灯所遮蔽。安全区域外不是不能有任何信息,而是不能有重要的文本信息或者交互信息。另外需要注意的是:除安全区域外,设计的时候还需要在左右留出间隙(Layout Margins),如上图红色区域,一般两侧各留20-30px之间,不要太贴边了。还有一点需要特别注意:横屏状态下时候左右的安全区域皆要留出88px,并且苹果特别提到了不要将任何互动操控件放置在全面屏的最下方,这将影响Home Indicator被唤出。

     

    来一张好理解的效果图,看了就应该明白了。

    Image title

     

     

     

    三.底部Home Indicator

    Image title

    iPhone X迈向了全面屏,移除了实体Home键,采用全面屏设计,新增了Home Indicator,从底部上滑的交互方式成了全局性操作,所以在设计的时候,底部需要留出这部分空间用于应用之间的切换和返回主屏幕,并且它不可以自定义颜色,系统会自动判断颜色,深背景时变为白色,浅背景时变为黑色。同时,Apple官方的设计也指出,如果App的底部是可滚动的内容,建议是:文字和Home Indicator可以重叠!(如下图所示)

    Image title

     

    为了让用户获得沉浸式体验,在播放视频或者玩游戏时,底部的Home Indicator要启用自动隐藏,单击屏幕又会出现。

     

     

    四.切图对比

     

    UI设计师在做iOS的应用的时候,最常用到的就是@2x和@3x大小图片,iPhone5/6/6s/7/8都使用了@2x大小的图片,但是iPhone X屏幕分辨率提升到了1125X2436px(375ptX812pt),尺寸为5.8英寸,所以得使用@3x大小的图片,带来的视觉效果会更加精细,其实也就是沿用plus的切图。

    Image title

     

     

    五.全屏图片适配

    Image title

     

    如上图所示,对于如:新手引导页、欢迎页等需要单屏显示的界面可能需要重新布局了。iPhone X具有不同于其它iPhone的长宽比,因此,全屏其它iPhone图片在iPhone X上全屏显示时会出现裁剪。同样,全屏iPhone X图片在其它iPhone也会出现裁剪。

     

     

    六.手势交互的变化

    先来看一波交互手势的操作。

    Image title

    退出手机应用程序,返回主屏幕

     

    Image title

    Image title

    应用程序之间的切换 

     

    Image title

    唤出通知中心,左上角向下滑出

     

    Image title

    唤出控制中心,右上角向下滑出

     

     

     

    在 iPhone X 设计时,类似这样涉及到屏幕底部上下滑动的交互都需要更谨慎的思考、更严格的测试。针对以上手势交互,我们在设计时,要和开发人员沟通,要启用边缘保护,即:第一次滑动调用对于应用程序的手势,第二次滑动才会调用系统的手势,目前很多应用程序都是这么做的。

     

    最后,下载这套来自苹果官方的 UI KIT 素材,有 Photoshop、Sketch、Adobe XD版本,可以让大家快速了解和完成APP设计。

    下载地址:链接: https://pan.baidu.com/s/1dFaUz9f  密码: 2bng

    展开全文
  • iPhone设备 物理分辨率是硬件所支持的,逻辑分辨率是软件可以达到的。 代数 设备 操作系统 逻辑分辨率(point) 物理分辨率(pixel) 屏幕尺寸(对角线长度) 缩放因子 iPhone ...

     iPhone设备

    物理分辨率是硬件所支持的,逻辑分辨率是软件可以达到的。

    代数 设备 操作系统 逻辑分辨率(point) 物理分辨率(pixel) 屏幕尺寸(对角线长度) 缩放因子
      iPhone          
    第一代 iPhone 2G iOS 1 320 x 480 480 x 320 3.5寸 1x
    第二代 iPhone 3 iOS 2 320 x 480 480 x 320 3.5寸 1x
    第三代 iPhone 3GS iOS 3 320 x 480 480 x 320 3.5寸 1x
    第四代 iPhone 4 iOS 4 320 x 480 960 × 640 3.5寸 2x
    第五代 iPhone 4S iOS 5 320 x 480 960 × 640 3.5寸 2x
    第六代 iPhone 5 iOS 6 320 x 568 1136 x 640 4.0寸 2x
    第七代 iPhone 5S/5C iOS 7 320 x 568 1136 x 640 4.0寸 2x
    第八代 iPhone 6 iOS 8 375 x 667 1334 x 750 4.7寸 2x
    第八代 iPhone 6 Plus iOS 8 414 x 736 2208 x 1242 (1920x1080) 5.5寸 3x
    第九代 iPhone 6S iOS 9 375 x 667 1334 x 750 4.7寸 2x
    第九代 iPhone 6S Plus iOS 9 414 x 736 2208 x 1242 (1920x1080) 5.5寸 3x
      iPhone SE iOS 9 320 x 568 1136 x 640 4寸 2x
    第十代 iPhone 7 iOS 10 375 x 667 1334 x 750 4.7寸 2x
    第十代 iPhone 7 Plus iOS 10 414 x 736 2208 x 1242 (1920x1080) 5.5寸 3x
    第十一代 iPhone 8 iOS 11 375 x 667 1334 x 750 4.7寸 2x
    第十一代 iPhone 8 Plus iOS 11 414 x 736 2208 x 1242 (1920x1080) 5.5寸 3x
    第十一代 iPhone X iOS 11 375 x 812 2436 × 1125 5.8寸 3x

    苹果所有设备屏幕尺寸  

    手机型号 尺寸(对角线) 物理点 宽长比例 像素点 倍数 状态栏高度 底部安全距离 导航栏高度 tabbar高度
    iPhone 4/4S 3.5英寸 320x480 0.667 640x960 @2x 20 - 44 49
    iPhone 5/5S/5C 4英寸 320x568 0.563 640x1136 @2x 20 - 44 49
    iPhone SE 4英寸 320x568 0.563 640x1136 @2x 20 - 44 49
    iPhone 6 4.7英寸 375x667 0.562 750x1334 @2x 20 - 44 49
    iPhone 6 Plus 5.5英寸 414x736 0.563 1242x2208 @3x 20 - 44 49
    iPhone 6S 4.7英寸 375x667 0.562 750x1334 @2x 20 - 44 49
    iPhone 6S Plus 5.5英寸 414x736 0.563 1242x2208 @3x 20 - 44 49
    iPhone 7 4.7英寸 375x667 0.562 750x1334 @2x 20 - 44 49
    iPhone 7 Plus 5.5英寸 414x736 0.563 1242x2208 @3x 20 - 44 49
    iPhone 8 4.7英寸 375x667 0.562 750x1334 @2x 20 - 44 49
    iPhone 8 Plus 5.5英寸 414x736 0.563 1242x2208 @3x 20 - 44 49
    iPhone X 5.8英寸 375x812 0.462 1125x2436 @3x 44 34 44 83
    iPhone XS 5.8英寸 375x812 0.462 1125x2436 @3x 44 34 44 83
    iPhone XS Max 6.5英寸 414x896 0.462 1242x2688 @3x 44 34 44 83
    iPhone XR 6.1英寸 414x896 0.462 828x1792 @2x 44 34 44 83
    iPhone 11 6.1英寸 414x896 0.462 828x1792 @2x 44 34 44 83
    iPhone 11 Pro 5.8英寸 375x812 0.462 1125x2436 @3x 44 34 44 83
    iPhone 11 Pro Max 6.5英寸 414x896 0.462 1242x2688 @3x 44 34 44 83

    如图所示:

    这里写图片描述

    Tips:

    机型 屏幕宽高比
    iPhone 5 320÷568=0.563
    iPhone 6 375÷667=0.562
    iPhone 6 Plus 414÷736=0.5625

      
    最终发现iPhone5和6一个小秘密,它们的比例是不变的


    iPod设备

    设备 操作系统 物理分辨率(pixel) 屏幕尺寸(对角线长度) 缩放因子
    iPod Touch 1 iOS 1 480 x 320 3.5寸 1x
    iPod Touch 2 iOS 2 480 x 320 3.5寸 1x
    iPod Touch 3 iOS 3 480 x 320 3.5寸 1x
    iPod Touch 4 iOS 4 960 x 640 3.5寸 2x
    iPod Touch 5 iOS 6 1136 x 640 4.0寸 2x
    iPod Touch 6 iOS 8 1136 x 640 4.0寸 2x

    iPad设备

    设备 操作系统 物理分辨率(pixel) 屏幕尺寸(对角线长度) 缩放因子
    iPad 1 iOS 3 1024 x 768 9.7寸 1x
    iPad 2 iOS 4 1024 x 768 9.7寸 1x
    iPad 3 (The New iPad) iOS 5 2048 x 1536 9.7寸 2x
    iPad 4 iOS 6 2048 x 1536 9.7寸 2x
    iPad Air iOS 7 2048 x 1536 9.7寸 2x
    iPad Air 2 iOS 8 2048 x 1536 9.7寸 2x
    iPad Pro iOS 9 2048 x 1536 9.7寸 2x
    iPad (第五代) iOS 10 2048 x 1536 9.7寸 2x
    iPad Pro iOS 9 2732 x 2048 12.9寸 3x
    iPad Pro (取代9.7寸) iOS 10 2224 x 1668 10.5寸 3x
    iPad mini iOS 6 1024 x 768 7.9寸 1x
    iPad mini 2 iOS 7 2048 x 1536 7.9寸 2x
    iPad mini 3 iOS 8 2048 x 1536 7.9寸 2x
    iPad mini 4 iOS 9 2048 x 1536 7.9寸 2x

    所有设备型号官网地址:https://www.theiphonewiki.com/wiki/Models

     

    //获得屏幕的宽高
    #define kScreenWidth ([UIScreen mainScreen].bounds.size.width)
    #define kScreenHeight ([UIScreen mainScreen].bounds.size.height)
    //iPhoneX / iPhoneXS
    #define  isIphoneX_XS     (kScreenWidth == 375.f && kScreenHeight == 812.f ? YES : NO)
    //iPhoneXR / iPhoneXSMax
    #define  isIphoneXR_XSMax    (kScreenWidth == 414.f && kScreenHeight == 896.f ? YES : NO)
    //异性全面屏
    #define   isFullScreen    (isIphoneX_XS || isIphoneXR_XSMax)

    // Status bar height.
    #define  StatusBarHeight     (isFullScreen ? 44.f : 20.f)

    // Navigation bar height.
    #define  NavigationBarHeight  44.f

    // Tabbar height.
    #define  TabbarHeight         (isFullScreen ? (49.f+34.f) : 49.f)

    // Tabbar safe bottom margin.
    #define  TabbarSafeBottomMargin         (isFullScreen ? 34.f : 0.f)

    // Status bar & navigation bar height.
    #define  StatusBarAndNavigationBarHeight  (isFullScreen ? 88.f : 64.f)

     

    转载:http://blog.csdn.net/Scorpio_27/article/details/52297643

    展开全文
  • iPhoneX样机

    2020-07-30 23:31:51
    iphonex样机
  • iPhoneX

    2017-12-05 17:23:30
    iPhoneX由于底部安全区的原因UITabBar高度由49pt变成了83pt,多出来的34pt是空白手势区域。 if (@available(iOS 11.0, *)) { _studyTbView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustm

    底部34,顶部44

    iPhoneX由于底部安全区的原因UITabBar高度由49pt变成了83pt,多出来的34pt是空白手势区域。

             if (@available(iOS 11.0, *)) {
                _studyTbView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
            } else {
                self.automaticallyAdjustsScrollViewInsets = NO;
            }
    展开全文
  • iPhone X如何截图

    千次阅读 2018-08-09 14:34:15
    随着新一代iPhone手机,X版问世,全面屏的iPhone X和之前几款iPhone手机略有不同,尤其是在“屏幕快照”这方面比以往iPhone手机有所改善,下面小编简单的说一下iPhone X如何截图。 方法一:(硬方法、按键截图法...
  • 上图为先苹果所有设备屏幕尺寸,可以看到最新的iPhoneXS和去年的iPhoneX尺寸一样,iPhoneXR和iPhoneXSMax屏幕尺寸一样,不一样的是iPhoneXR为@2先倍图,图片这些不用管,只要名字后缀命名好就行。 今年当苹果发布新...
  • iPhoneX适配之UI设计、交互设计

    万次阅读 2017-09-18 18:50:21
    苹果近日发布了全新的iPhone X全面屏手机,这也是首款采用OLED屏幕的iPhone手机,它的正面设计被更多人吐槽,iPhone X 的刘海可能是让人又爱又恨的设计。这几天被iPhone X一顿刷屏,不少标题写着“iPhone X 适配、...
  • 今天凌晨苹果新发布了三款手机,分别是...具体原理性的东西就多说了,因为iPhoneX系列都一样,本文只说明一下具体怎么做,要适配屏幕,首先得让他以正确的姿势启动,如果你使用的是LaunchScreen.storyboard,就不需...
  • 微信小程序iPhone X适配

    千次阅读 2020-01-21 10:09:45
    iPhone X适配 由于 iPhone X 屏幕顶部状态栏区域有刘海屏,以及在屏幕底部增加了操作条,在开发中需适配机型 最近开发微信小程序:在iPhone X XS XR XS Max机型适配,我在项目中写了X适配的方法,在其它几个屏下也...
  • 简析在React Native中如何适配iPhoneX

    千次阅读 2019-02-28 10:52:08
    欢迎大家关注【跨平台开发那些事】公众号,定期推送跨...前几天,招商银行公众号在微信推送了一条消息,11月招商银行App要发布最新版本,完美适配iPhoneX,是国内第一家银行App适配iPhoneX。感兴趣的朋友可以去下...
  • Photoshop-iPhone x适配

    2017-09-23 14:07:06
    iPhone X刷了一天屏,到下午实在受不了各种假帖。标题写着“iPhone X 适配、指南、设计稿” 内容却是发布会回顾和手机介绍。索性自己去官网找素材写一篇只针对iPhone X适配的贴子,与设计图无关的内容通通不提 ...
  • iPhone X 的适配

    千次阅读 2018-12-17 10:33:39
    iPhone X 的适配很久没时间更新博客了,趁着项目最近不是很紧,整理一些开发中遇到的,对大家有用的东西,记录一下. 方便日后回顾; 前几天做了iPhone x的适配, 有些坑,希望对广大开发者有点帮助; 我做了个图: 可以...
  • 超简单的IphoneX适配方案

    千次阅读 2018-11-20 23:03:17
    做游戏的都很厌恶刘海屏,特别是iphone,因为如果你不去适配iphoneX之后的手机,那么手机刘海的位置将会是黑的,这样你就拿不到苹果的推荐,而且IphoneX和安卓手机的刘海屏还有一个不同,就是IphoneX屏幕底部还有一...
  • 一.APP在iPhoneX运行后不能占满屏幕,上下都有多余的边解决方法:把旧的image.xcassets中的LaunchImage删掉,重新创建并在Images.xcassets中为iPhone X添加一个LaunchImage,新的启动图尺寸为1125px × 2436px(375pt ×...
  • 开发的时候,宏定义用的挺普遍,好多人喜欢把导航高度直接定义成 64.f,但是在iPhoneX系列中(iPhoneX、iPhoneXS、iPhoneXR、iPhoneXS Max),导航栏的高度为88.f. 非iPhoneX:状态栏高度(20.f)+导航栏高度(44.f) =...
  • iPhone X全屏适配

    万次阅读 2018-03-05 14:52:33
    当你的项目运行于iPhone X模拟器的时候是否会出现以下这种情况??不能全屏,,上下出现了大黑边,,受到以前在设置了启动页,,把启动页删除出现的上下黑框的启发,,于是想到只要给给iPhone X设置一个对应的启动页...
  • iPhoneX马上要发布了,所以iPhoneX的适配也提上了日程,近日发现一个问题是,当跳转页面的时候,只要加上hidesBottomBarWhenPushed = YES 这行代码,当跳转页面的时候,tabbar都会上移一下,返回的时候也是回到原位...
  • ReactNative 刘海屏适配iPhoneX

    万次阅读 2018-07-12 13:59:08
    iPhoneX 出了之后 , 它的小刘海和底部的home条成为了移动端程序员需要适配的地方, 今天用ReactNative 初步在项目上尝试了适配. 先看一下iPhonex7和X上同样代码的效果图: UI适配 导航栏适配 iPhoneX由于多了大...
  • iphoneX 屏幕失灵误区

    万次阅读 2018-10-30 10:34:56
    误解 最近手机给小朋友玩,发现手机无法正常使用触屏。一开始以为屏幕坏掉了 于是去网上搜索,发现了很多很多情况,还有...iphonex的默认旁白进入,是电源键连续按压3次,所以还是很容易误操作进去的 进入旁白模...
1 2 3 4 5 ... 20
收藏数 109,678
精华内容 43,871
关键字:

iphone x