为什么电脑重置适配器还不适配iPhonex

来源：蜘蛛抓取(WebSpider) 时间：2018-03-27 23:20 标签： dp为什么无法适配
05:12:03 UTC
为了适配iphone-x的分辨率，新起了一个3.16版本的空工程，设计分辨率设置为960*640，适配策略是ResolutionPolicy::FIXED_HEIGHT，用iphone-x的模拟器测试下来发现设计分辨率最终被拉伸到了16:9，即，并没有充满iphone-x的屏幕，在其他ios机型上都是正确的充满了屏幕，只有iphone-x仍然在左右两边有黑边。因为对引擎这块的源码不是很熟悉，所以想问下有没有人遇到同样的问题。
05:32:42 UTC
应该是启动图的问题，你把匹配iPhoneX的启动图放一份进去，或者用xcassets来管理。
06:06:00 UTC
感谢回复，我现在的项目是用xcassets管理启动图的，不过因为iphoneX刚出，还没做匹配，我去试一下加上看看
06:29:51 UTC
用storyboard做启动屏，可用省很多启动图，iPhone x自动适配
07:01:37 UTC
添加了启动图现在能正确全屏了，但蛋疼的问题也来了，如何避开该死的传感器槽。。
07:04:28 UTC
上面一截 黑的不要显示东西就好了
谁让SB要买X呢？
07:17:48 UTC
嗯，目前我们的方案就是中间加一层node直接避开上方，然后底下垫一个全屏的底图
08:24:18 UTC
怎么初始化为全屏呢，还没搞清楚，求赐教！
08:46:28 UTC
cocos的微信公众号里往前翻，有一篇适配iPhone X的文章，添加对应的启动图
09:09:03 UTC
非常感谢！找到了
稍后验证看看
09:23:30 UTC
验证有效，非常感谢！
09:33:49 UTC
11:13:27 UTC
你这么做适配的话。周围靠边的按钮就会出现超出屏幕，从而影响。用户体验
01:19:25 UTC
这个需要mark一下
07:48:55 UTC
08:30:22 UTC
个人觉得神经病的设计
06:56:46 UTC
这些都是应用的适配吧，游戏应该怎么适配呢？？(ERROR:15) & 访客不能直接访问简述Html5 IphoneX 适配方法
互联网 & 02-08 14:05:33 & 作者：果汁凉茶丶 &
这篇文章主要介绍了简述Html5 IphoneX 适配方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
IphoneX 的适配，关键在于怎么让页面适应 &齐刘海&、底部操作区域以及大圆角问题。
IphoneX 相对于其他手机，不同之处在于设备虽同样都是一个屏幕，但其实被分为了好几个模块，具体见下图：
我们正常的一个网页，搬到X上来，效果是 内容只显示在 Safe Area 安全区域，非安全区域部分没有网内容，也就是说头部和底部会出现白块，怎么处理？
1. 给body加一个 background-color
为什么要加 background-color？有什么用？ 注意到我们刚说到的 头部和底部会出现白块，其实说是白色其实并不准确，因为这个颜色其实来自于 body 的背景色。另外，我们上拉或下拉内容时会显示网页下方的内容及颜色，其实也是body的背景颜色。所以如果你想修改这两个效果，就可以设置一下 body 的背景色。
2. 添加 viewport-fit = cover 的 &meta& 标签
这一步极为关键。先看一下结果：
&meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width, viewport-fit=cover" /&
为什么说极为关键？ iphoneX 的主要问题就是除了安全区域外，其他地方不能显示网页内容，而它就是为解决这个问题而量身定制的。当设置了以上内容后，头部和底部就能开放给网页显示内容。
但是用了之后你会发现，区域是开放了，但是内容（常为导航栏）却因为&齐刘海&而被遮挡住了部分内容，并且，发现原本设置的100%的高度并没有占用全部高度空间，怎么办？
对于头部的高度和底部的高度，其实是有匹配值的，如下图：
所以，我们有如下方案处理：
1. 修改我们导航栏的高度，为原本高度加上safe-area-inset-top 的高度，也就是44px；具体可以这么写：
height: calc(navHeight + 44px);，并且重新设置一下导航栏上文案的位置。
2. IOS 11的浏览器chromium内核提供了以下内容，也就是我们上图标注的那几个值：
safe-area-inset-top
safe-area-inset-right
safe-area-inset-left
safe-area-inset-bottom
怎么用呢？很简单：
padding-top: constant(safe-area-inset-top);
//为导航栏+状态栏的高度 88px
padding-left: constant(safe-area-inset-left);
//如果未竖屏时为0
padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
也许你没见过 constant这个东西，我以前也没见过，它也是专为iphoneX而设计的值，注意只有当你的 &meta& 标签加上了 viewport-fit=cover 之后，该值才能生效。当然，在android手机上，是不会被识别的。
3. 只为 IphoneX 生效
注意了，我们做的这个适配是只为 IphoneX 生效的，并不能影响到其他手机，所以我们要做响应式布局，即，使用媒体查询，如下：
// 注意这里采用的是690px(safe area高度)，不是812
@media only screen and (width: 375px) and (height: 690px){
height: 100
有资料说上面这么用是ok的，然而我用着却没啥效果，于是我放宽了点条件，做了修改如下：
@media only screen and (width: 375px) and (min-height: 690px){
height: 100
区别在于我是识别宽度为375px，高度大于690px 的设备即为 IphoneX。当然，目前只有X 这款设备符合该条件。
4. 网页高度变化
先强调一下，这部分不太确定，我自己遇到了，提出来说明一下：
设置了 viewport-fit 之后，会发现原本设置的100% 的高度不符合预期了，只占用了部分屏幕空间，其实，不急，只需要作如下修改：
@media only screen and (width: 375px) and (min-height: 690px) {
height: 100
vh 是检查 viewport 即视口的高度，1vh = 1% 视口高度，是个绝对单位。设置100vh的意思就是占满全屏高度
5. 导航栏吸顶，任务栏吸底
页面内容可以拉动，如果导航栏也随着滑动，效果很丑，这就需要我们实现导航栏吸顶效果。实现大家都会就不多说，这里展示我的一个案例：
@media only screen and (width: 375px) and (min-height: 690px){
z-index: 300;
height: calc(3.5rem + 44px);
margin-top: 44
任务栏同理。&
本文只是简单的描述一下如何处理IphoneX的适配问题的具体步骤，如果还想更深入的了解原理，欢迎大家到评论区交流。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
大家感兴趣的内容
12345678910
最近更新的内容为什么还不适配iPhoneX
您没有登录论坛，请登录后再进行回复，点击
Copyright@ Tencent. All Rights Reserved
腾讯公司 版权所有IphoneX实测，哪些应用比较适配？- 百度派
{{ mainData.uname }}
：{{ mainData.content }}
{{ prevData.uname }}
：{{ prevData.content }}
{{ mainData.uname }}
：{{ mainData.content }}
0 || contentType !== 1" class="separate-line">
：{{ item.content }}
IphoneX实测，哪些应用比较适配？
问题说明（可选）：
扫一扫分享到微信
万众瞩目的苹果X中午上市了，现在还有很多软件没有适配。上周末第一批iPhone X到货，文章整理了几个你们可能不知道的操作和问题，大家看看，这样不至于拿到iPhone X时一脸懵X。先看一下直观的屏占比iPhone...
万众瞩目的苹果X中午上市了，现在还有很多软件没有适配。上周末第一批iPhone X到货，文章整理了几个你们可能不知道的操作和问题，大家看看，这样不至于拿到iPhone X时一脸懵X。先看一下直观的屏占比iPhone X和iPhone 8P两侧“耳朵”里都有啥iPhone X 的两侧耳朵默认显示时间、定位、Wi-Fi、信号和电量。其他电量百分比、运营商、蓝牙之类的都需要在左侧下拉控制中心才能看到。横屏状态如何调出通知中心和控制中心垂直下滑调出通知中心，右上角下滑调出控制中心。&上滑不能关闭后台需要长按点击关闭才行iPhone X 强制退出后台不能上滑关闭了，需要长按任务后，点卡片左上角的红色关闭按钮才行。下载软件、微信支付都可以用Face ID完成Face ID不仅能完成解锁，现在下载软件和微信支付已经可以实现了。不过支付宝还是不行。下载应用微信支付可以，支付宝暂时不行目前有哪些应用比较适配了iPhone X？目前的 iPhone X 应用适配情况，有三种情况：1、微博、QQ、高德地图、王者荣耀这种完全没适配的，上下留黑。QQ和微博王者荣耀2、淘宝、腾讯视频这种没完全适配的，比例对，但软件条和上方刘海部分没适配。3、支付宝、微信、网易云音乐这种适配好的。不过才开始的时候，微信打开界面特别搞笑，地球变形了……现在已经适配好了。估计要等所有软件都是配好，最起码得1个月以上。
扫一扫分享到微信
提问{{title}}
IphoneX实测，哪些应用比较适配？
，才能进行回答
一个问题只能回答一次，请&nbsp点击此处&nbsp查看你的答案
提问{{title}}
1人关注了此问题

我要回帖

更多关于 dp为什么无法适配 的文章

 

随机推荐