iphonex_iphone信息 - CSDN
精华内容
参与话题
  • [iOS]设备型号判断大全(包括iPhoneX)

    万次阅读 2018-02-22 09:13:09
    头文件 #import typedef NS_ENUM(NSInteger,DeviceType) { Unknown = 0, Simulator, IPhone_1G, //基本不用 IPhone_3G, //基本不用 IPhone_3GS, //基本不用 IPhone_4,

    头文件

    #import <Foundation/Foundation.h>
    
    typedef NS_ENUM(NSInteger,DeviceType) {
        
        Unknown = 0,
        Simulator,
        IPhone_1G,          //基本不用
        IPhone_3G,          //基本不用
        IPhone_3GS,         //基本不用
        IPhone_4,           //基本不用
        IPhone_4s,          //基本不用
        IPhone_5,
        IPhone_5C,
        IPhone_5S,
        IPhone_SE,
        IPhone_6,
        IPhone_6P,
        IPhone_6s,
        IPhone_6s_P,
        IPhone_7,
        IPhone_7P,
        IPhone_8,
        IPhone_8P,
        IPhone_X,
    };
    
    @interface JDDeviceUtils : NSObject
    
    + (DeviceType)deviceType;
    
    @end
    
    

    .m文件

    #import "JDDeviceUtils.h"
    #import <sys/utsname.h>
    
    @implementation JDDeviceUtils
    
    + (DeviceType)deviceType{
       
      
           struct utsname systemInfo;
           uname(&systemInfo);
           NSString *platform = [NSString stringWithCString:systemInfo.machine
                                                   encoding:NSUTF8StringEncoding];
           //simulator
           if ([platform isEqualToString:@"i386"])          return Simulator;
           if ([platform isEqualToString:@"x86_64"])        return Simulator;
           
           //iPhone
           if ([platform isEqualToString:@"iPhone1,1"])     return IPhone_1G;
           if ([platform isEqualToString:@"iPhone1,2"])     return IPhone_3G;
           if ([platform isEqualToString:@"iPhone2,1"])     return IPhone_3GS;
           if ([platform isEqualToString:@"iPhone3,1"])     return IPhone_4;
           if ([platform isEqualToString:@"iPhone3,2"])     return IPhone_4;
           if ([platform isEqualToString:@"iPhone4,1"])     return IPhone_4s;
           if ([platform isEqualToString:@"iPhone5,1"])     return IPhone_5;
           if ([platform isEqualToString:@"iPhone5,2"])     return IPhone_5;
           if ([platform isEqualToString:@"iPhone5,3"])     return IPhone_5C;
           if ([platform isEqualToString:@"iPhone5,4"])     return IPhone_5C;
           if ([platform isEqualToString:@"iPhone6,1"])     return IPhone_5S;
           if ([platform isEqualToString:@"iPhone6,2"])     return IPhone_5S;
           if ([platform isEqualToString:@"iPhone7,1"])     return IPhone_6P;
           if ([platform isEqualToString:@"iPhone7,2"])     return IPhone_6;
           if ([platform isEqualToString:@"iPhone8,1"])     return IPhone_6s;
           if ([platform isEqualToString:@"iPhone8,2"])     return IPhone_6s_P;
           if ([platform isEqualToString:@"iPhone8,4"])     return IPhone_SE;
           if ([platform isEqualToString:@"iPhone9,1"])     return IPhone_7;
           if ([platform isEqualToString:@"iPhone9,3"])     return IPhone_7;
           if ([platform isEqualToString:@"iPhone9,2"])     return IPhone_7P;
           if ([platform isEqualToString:@"iPhone9,4"])     return IPhone_7P;
           if ([platform isEqualToString:@"iPhone10,1"])    return IPhone_8;
           if ([platform isEqualToString:@"iPhone10,4"])    return IPhone_8;
           if ([platform isEqualToString:@"iPhone10,2"])    return IPhone_8P;
           if ([platform isEqualToString:@"iPhone10,5"])    return IPhone_8P;
           if ([platform isEqualToString:@"iPhone10,3"])    return IPhone_X;
           if ([platform isEqualToString:@"iPhone10,6"])    return IPhone_X;
       
           return Unknown;
       
    }
    
    展开全文
  • 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;
            }
    展开全文
  • iPhoneX样机

    2020-07-30 23:31:51
    iphonex样机
  • 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系列机型判断

    千次阅读 2019-12-04 17:23:40
    iphonex xs xr xsmax 判断 // iphonex xs xr xsmax 判断 export function isIphonX() { // iPhone X、iPhone XS var isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRat....

    iphonex xs xr xsmax 判断

    export function isIphone() {
        return /iphone/gi.test(window.navigator.userAgent)
    }
    
    export function isIphonXSeries() {
        if (window !== 'undefined' && window && !isIphone()) return false;
        const xSeriesConfig = [
            {  //iPhone Xs(Max,Pro Max)
                devicePixelRatio: 3,
                width: 	414,
                height: 896,
            },
            {  // iPhone XR(11)
                devicePixelRatio: 2,
                width: 414,
                height: 896,
            },
            {  // iPhone X(Xs,Pro)
                devicePixelRatio: 3,
                width: 375,
                height: 812,
            },
        ];
        const {
            devicePixelRatio,
            screen: {
                width, height 
            }
        } = window;
        return xSeriesConfig.some(item => item.devicePixelRatio === devicePixelRatio && item.width === width && item.height === height);
    }
    

    机型工具表 http://www.qijishow.com/down/standard.html 这里可以看到所有的机型

    展开全文
  • iphoneX设计网站适配

    千次阅读 2020-08-08 00:36:44
    iphoneX设计网站适配 几乎所有的前端开发者都会接触到为iphoneX设计H5网页,其中就得为其特有的安全区域做出适配,以便优化用户体验。 安全区域 布局参考线定义了矩形区域,这些区域实际上不会出现在屏幕上,但有...
  • iPhone X如何截图

    千次阅读 2018-08-09 14:34:15
    随着新一代iPhone手机,X版问世,全面屏的iPhone X和之前几款iPhone手机略有不同,尤其是在“屏幕快照”这方面比以往iPhone手机有所改善,下面小编简单的说一下iPhone X如何截图。 方法一:(硬方法、按键截图法...
  • iPhoneX适配之UI设计、交互设计

    万次阅读 2017-09-18 18:50:21
    苹果近日发布了全新的iPhone X全面屏手机,这也是首款采用OLED屏幕的iPhone手机,它的正面设计被更多人吐槽,iPhone X 的刘海可能是让人又爱又恨的设计。这几天被iPhone X一顿刷屏,不少标题写着“iPhone X 适配、...
  • 简析在React Native中如何适配iPhoneX

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

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

    2017-09-23 14:07:06
    iPhone X刷了一天屏,到下午实在受不了各种假帖。标题写着“iPhone X 适配、指南、设计稿” 内容却是发布会回顾和手机介绍。索性自己去官网找素材写一篇只针对iPhone X适配的贴子,与设计图无关的内容通通不提 ...
  • 上图为先苹果所有设备屏幕尺寸,可以看到最新的iPhoneXS和去年的iPhoneX尺寸一样,iPhoneXR和iPhoneXSMax屏幕尺寸一样,不一样的是iPhoneXR为@2先倍图,图片这些不用管,只要名字后缀命名好就行。 今年当苹果发布新...
  • 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 ×...
  • iPhoneX马上要发布了,所以iPhoneX的适配也提上了日程,近日发现一个问题是,当跳转页面的时候,只要加上hidesBottomBarWhenPushed = YES 这行代码,当跳转页面的时候,tabbar都会上移一下,返回的时候也是回到原位...
  • iPhone X全屏适配

    万次阅读 2018-03-05 14:52:33
    当你的项目运行于iPhone X模拟器的时候是否会出现以下这种情况??不能全屏,,上下出现了大黑边,,受到以前在设置了启动页,,把启动页删除出现的上下黑框的启发,,于是想到只要给给iPhone X设置一个对应的启动页...
  • 开发的时候,宏定义用的挺普遍,好多人喜欢把导航高度直接定义成 64.f,但是在iPhoneX系列中(iPhoneX、iPhoneXS、iPhoneXR、iPhoneXS Max),导航栏的高度为88.f. 非iPhoneX:状态栏高度(20.f)+导航栏高度(44.f) =...
  • iphoneX 屏幕失灵误区

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

iphonex