iphonex适配_移动端iphonex图片适配 - CSDN
精华内容
参与话题
  • iPhoneX 适配笔记

    万次阅读 热门讨论 2018-01-24 10:09:31
    今天升级到Xcode9.0,运行项目,所谓的全屏 iPhone X,but 页面好像也没有全屏,于是根据之前的适配经验,总算初步解决了这个问题,记录如下,以备后需。 App 页面适配 适配前 问题:App 未全屏显示 ...

    iPhone X 的到来,惊艳的是果粉,苦逼的是程序猿。今天升级到Xcode9.0,运行项目,所谓的全屏 iPhone X,but 页面好像也没有全屏,于是根据之前的适配经验,总算初步解决了这个问题,记录如下,以备后需。

    App 页面适配

    适配前

    适配前.gif

    问题:App 未全屏显示

    解决办法

    LaunchImage 中添加一个和 iPhone X 相关的启动图片
    * 图片尺寸:1125 * 2436
    * Contents.json 中代码如下

    {
        "extent" : "full-screen",
        "idiom" : "iphone",
        "subtype" : "2436h",
        "filename" : "1125_2436.png",
        "minimum-system-version" : "11.0",
        "orientation" : "portrait",
        "scale" : "3x"
    }

    适配后

    适配后.gif

    页面布局细节

    Safe Area

    动机

    • iPhone X 取消了 Home键,实现了高屏占比,所以默认 View 的区域是全屏幕
    • 屏幕四周有圆角、顶部有“刘海”、底部有手势区域
    顶部导航栏

    nav_area.png
    * 注意:导航栏高度是 44 + 44

    底部手势区域

    tabbar_gesture_area.png

    Safe Area 如下图 (红色区域)

    safe_area.png

    Safe Area 大小

    竖屏
    ▿ UIEdgeInsets
      - top : 44.0
      - left : 0.0
      - bottom : 34.0
      - right : 0.0
    横屏
      - top : 0.0
      - left : 44.0
      - bottom : 21.0
      - right : 44.0

    自动布局时的注意点

    • iOS11 以前,我们布局时,视图的 top 和 bottom 一般参照的是 Top Layout GuideBottom Layout Guide
    • iOS11 以后,那两个参照已经 deprecated (过时)了,而被 Safe Area 取代。
    • Safe Area 要求最低支持 iOS9.0
      safe_area_layout_guide.png


      layout_safe_area.png


      safe_area_miniOS.png

    但凡和父视图相关的 top 或者 bottom 属性的自动布局,应该参照 Safe Area。(之前默认是 Superview,当然如果产品允许,那就是另一回事了)

    • 选择 Safe Area布局示例如下:
      选择SafeArea.png

    • 未选择 Safe Area布局示例如下:
      未选择SafeArea.png

    网上有看到有黑iPhone X的,说用它没法玩王者荣耀等游戏,理由是可能看不到自己有多少钱或者推塔键和信号键没了,对此估计是多虑了!iPhone X 出售之前,游戏厂商肯定会做适配,高屏占比只会提高游戏体验,不会产生那么严重的视觉问题的。

    • 适配前后,效果图示例如下:
      SafeArea对比效果图.gif


    Xcode9 适配

    WKWebViewJavascriptBridge

    // 原贴地址:https://github.com/marcuswestin/WebViewJavascriptBridge/issues/278
    - (void)webView:(WKWebView *)webView
    decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction
    decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
        // ……
        // Xcode 升级到9后 WKWebViewJavascriptBridge.m 中有个 bug
        // 需要在"decisionHandler(WKNavigationActionPolicyCancel);"后加上 return,否则崩溃。
        // 不升级 Xcode 的话,没问题。
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }

    部分页面适配 iPhone X

    底部有按钮的页面

    适配前

    适配前

    其底部约束如下图:

    适配前-约束

    适配后

    适配后

    其底部约束如下图:

    适配后-约束

    控制器生命周期之viewSafeAreaInsetsDidChange

    • viewDidLoad
    • viewWillAppear
    • viewSafeAreaInsetsDidChangeNEW
    • viewWillLayoutSubviews
    • viewDidAppear

    可以在 viewSafeAreaInsetsDidChange 后,设置 Safe Area

    if #available(iOS 11.0, *) {
       self.additionalSafeAreaInsets = UIEdgeInsetsMake(10, 0, 0, 34)
    }




    内容不定时更新,未完待续 ~~~
    我相信填的坑越多,后面的路越好走,加油!

    展开全文
  • iphoneX 适配

    2019-04-24 12:08:36
    参考资料: https://www.cnblogs.com/lolDragon/p/7795174.html ... // iphoneX 适配 @mixin iphone-x () { @media only screen and (device-width: 375px) and (dev...

    参考资料:

    https://www.cnblogs.com/lolDragon/p/7795174.html

    https://www.w3cplus.com/css/the-notch-and-css.html

    // iphoneX 适配
    @mixin iphone-x () {
      @media only screen and (device-width: 375px) and (device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
        @content;
      }
    }
     
    // 固定底部的元素
    %fixed-bottom {
      position: fixed;
      bottom: 0;
      @include iphone-x {
        &::after {
          content: '';
          display: block;
          height: constant(safe-area-inset-bottom);
          width: 100%;
        }
      }
    }
     
    .footer {
        position: fixed;
        background-color: rgba(0, 0, 0, 0.5);
        height: u(50);
        @extend %fixed-bottom;
    }

     

    展开全文
  • 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适配参考文档

    展开全文
  • iphoneX适配-客户端H5页面

    万次阅读 2017-12-03 15:00:22
    由于iphoneX做了全面屏并且还保留一块小刘海,因此很多以前的移动端H5页面需要结合App客户端做出相应的适配,具体如下:1、顶部通栏之前的客户端一直采用状态栏20pt+导航栏44pt的做法。由于iphoneX多了一块小刘海,...

    由于iphoneX做了全面屏并且还保留一块小刘海,因此很多以前的移动端H5页面需要结合App客户端做出相应的适配,具体如下:

    1、顶部通栏

    之前的客户端一直采用状态栏20pt+导航栏44pt的做法。由于iphoneX多了一块小刘海,因此iphoneX单独采用状态栏44pt+导航栏44pt,意味着内嵌的H5页面整体下移24pt。

    2、底部操作栏

    由于iphoneX是全面屏,页面最底部会被弯曲的拐角截掉一部分,特别是有底部固定悬浮的tab条会严重受到影响。这时候需要底部留出一块空白安全区域,页面内容最终的底线应在手机拐角处。该安全区域的高度为34pt。

    终上所述,结合iphoneX目前特有的手机参数我们可以采用的适配方法为:

    (1)meta标签

    ios11为了适配iphoneX对现有的viewport meta标签新增一个特性:viewport-fit,如果客户端没有做全屏适配,那么页面想要全屏覆盖,则可使用该特性:

    <meta name="viewport" content="width=device-width,viewport-fit=cover">

    (2)媒体查询

    1、利用constant函数

    只有设置了viewport-fit=cover才能使用constant函数

    @supports(bottom:constant(safe-area-inset-bottom)) {
        selector{
            padding-bottom:constant(safe-area-inset-bottom); 
            padding-bottom:calc(30px(假设值) + constant(safe-area-inset-bottom)); //根据实际情况选择适配方法
        }
    }

    2、利用iphoneX独特的型号参数

    @media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
        #buy {
            padding-bottom:34px; 
        }
    }

    (3)js判断(以下采用Jquery)

    if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){
        #buy {
            padding-bottom:34px; 
        }
    }
    

    (4)客户端协议
    也可以根据客户端协议请求客户端查询是否是iphoneX,以此来保持和客户端一致。

    4、参数解释

    以上代码中的参数解释如下:

    • safe-area-inset-bottom — ios11新增特性,用于设定安全区域与边界的距离
    • 375 — iphoneX设备的宽度
    • 812 — iphoneX设备的高度
    •     3 — iphoneX设备的分辨率
    • 724 — iphoneX设备的高度(812) - 顶部通栏高度(88)
    •   34 — 底部安全区域高度

    以上参数均以标准的1pt=1px进行计算,如果H5页面采用缩放的rem方式,那么1pt = 1px * 3(iphoneX分辨率)

    展开全文
  • iphoneX 适配问题

    2019-07-15 20:43:08
    iphoneX 适配问题 iphonex的上下都会设置安全距离,如果前端页面没有设置的话会造成镂空和定位不准的问题,此时需要设置viewport并搭配媒体查询来设置样式,具体操作如下 <meta name="viewport" content="width=...
  • iOS iPhoneX 适配

    千次阅读 2018-05-19 09:23:41
    问题一:适配1.首先简单定义一下IPoneX#define ISIPHONEX (ScreenHeight == 812.0f) ? YES : NO2.简单了解下IPhoneX 导航栏 状态栏 tabar高度1.导航栏高度 88 非非IPoneX手机为642.状态栏高度44 非IPoneX手机为203....
  • H5页面适配 iPhoneX,就是这么简单

    万次阅读 2018-04-19 20:28:38
    iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见...
  • iphoneX及以上适配

    2019-07-30 10:24:20
    本文主要介绍对iphoneX及以上适配。提供css和js的适配方式。 一、设置网页在可视窗口的布局方式 <meta name="viewport" content="width=device-width, viewport-fit=cover"> 注:viewport-fit=cover使得...
  • 微信小程序iPhone X适配

    千次阅读 2020-01-21 10:09:45
    iPhone X适配 由于 iPhone X 屏幕顶部状态栏区域有刘海屏,以及在屏幕底部增加了操作条,在开发中需适配机型 最近开发微信小程序:在iPhone X XS XR XS Max机型适配,我在项目中写了X适配的方法,在其它几个屏下也...
  • 研究了5个小时的iPhoneX适配。 从catalog,storyboard,safearea等一系列文章中发现。如果我们想完全撑满全屏。那直接建一个storyboard就好了。但撑满全屏后,流海就是一个恶心的问题。 思索半天后,我们发现,其实...
  • iOS iPhone X 适配

    千次阅读 2017-10-09 17:05:46
    //联系人:石虎  ...苹果官方刚刚更新了中文版的iPhone X适配指南,这可是关于iPhone X的第一次重要的技术文档. 官方文档指南链接:https://developer.apple.com/cn/ios/update-apps-for-iphone-x/
  • IphoneX 适配问题

    2020-06-08 19:36:15
    iPhoneX 适配笔记 iPhone X 的到来,惊艳的是果粉,苦逼的是程序猿。今天升级到Xcode9.0,运行项目,所谓的全屏 iPhone X,but 页面好像也没有全屏,于是根据之前的适配经验,总算初步解决了这个问题,记录如下,以...
  • Unity iPhoneX适配方案【NGUI&UGUI】

    千次阅读 2019-10-22 10:18:49
    本文作者旨在通过改锚点的方式,分别实现在NGUI和UGUI上的iPhone X适配技术方案,并结合自身项目经验,阐述了主要的实现细节,希望能对广大游戏开发团队有借鉴意义。 适配来源: 按照苹果官方人机界面指南 :Apple ...
  • unity-iPhoneX适配

    千次阅读 2018-02-28 17:19:10
    iPhoneX适配,比较搓的一种方式,在不修改分辨率(720 x 1280)的情况下适配 iphone X 主屏尺寸: 5.8英寸 主屏分辨率: 2436 x 1125 核心代码 修改 工程目录/Classes/UnityAppController.mm 文件 ...
  • iOS 11及iPhone X适配

    2017-11-07 18:38:59
    一、iPhone X适配: 1、状态栏: 在iPhone X上,状态栏高为44pt,对于之前自定制状态栏导航栏的同学来说,这无疑是一个噩耗,又又又要改了,和其他机型还要保持兼容,目前主流的做法是判断机型,如果是iPhone X,就...
  • 微信小程序iphonex适配

    千次阅读 2019-03-12 15:09:47
    微信小程序iphonex适配主要体现在就是背景图片可能无法充满全屏,但是在其他手机上没问题或者已经能够滑动了,但是在iphonex上会有问题,主要是适配方式就是判断是否是iphonex然后进行样式的切换就ok了。 onLoad: ...
  • Photoshop-iPhone x适配

    2017-09-23 14:07:06
    索性自己去官网找素材写一篇只针对iPhone X适配的贴子,与设计图无关的内容通通不提 昨夜发布的iPhone 8属于常规升级,屏幕与以往的iPhone6、6S、7系列相同。在昨天发布的新机中,只有iPhone X的分辨率发生了...
  • iPhone X 适配(全)

    2018-08-15 16:51:05
    iPhone X 适配(全) 背景 iPhone X 刘海机于9月13日发布,给科技小春晚带来一波高潮。作为开发人员却多出来一份忧虑,iPhone X 怎么适配?我们 App 的脑袋会不会也长一刘海出来?Tabbar 会不会被圆角?先来看一下...
  • 掌握苹果最新适配,一篇就够了!通过真实上线的App细致讲述iOS11及iPhone X适配所需要做的全部工作,包括顶部statusBar、刘海、scrollview下沉及底部tabBar等适配注意事项。
  • iPhoneX适配之UI设计、交互设计

    万次阅读 2017-09-18 18:50:21
    苹果近日发布了全新的iPhone X全面屏手机,这也是首款采用OLED屏幕的iPhone...索性自己去官网找素材写一篇只针对iPhone X适配的贴子,与设计图无关的内容通通不提。 后续,我会发布iOS工程师如何从代码层面上做适配。
1 2 3 4 5 ... 20
收藏数 14,529
精华内容 5,811
关键字:

iphonex适配