在head里添加<meta name='viewport' content='initial-scale=1, viewport-fit=cover'> 这将导致一个页面允分利用iPhone X上增加的区域,同时动态调整以避免圆角.传感器外壳和访问主屏幕的指示器. iOS 11中的WebKit包含了一个新的CSS函数constant(),safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-ins…

完成移动端的开发项目之后,发现谷歌自带的调试器似乎没有什么太大的作用,整天借同事的苹果手机测bug,尽管同事不厌其烦,但还是觉得这iPhone系列适配问题适配到想逃逃逃,好在项目已经顺利完成,测试通过,下面就是开发过程中遇到的一些坑. 图片.png 图片.png 问题一:苹果手机上的input按钮自带渐变效果 一样的代码,为啥在苹果手机上的input按钮就自带渐变效果,搞特殊吗?怎么让它显示正常?只需要加上outline:0px; -webkit-appearance:none; 清除原有样式,…

iPhone X适配方案 https://github.com/Wscats/iPhone-X 绝对长度单位 英寸 厘米 毫米 磅 pc inch cm mm pt pica 相对长度单位 是网页设计中使用最多的长度单位,包括px.em.rem等 屏幕尺寸 指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米 iPhone 4/4S iPhone 5/5C/5S/SE iPhone 6/6S iPhone 6S Plus iPhone 7 iPhone 7 Plus iPhone 8 iPho…

最近开始做iOS开发,遇到一些小问题和解决方法,记录下.   今天是iPhone屏幕适配 iPhone5出来之后屏幕就有iPhone就有了2种尺寸:3.5寸和4寸,xcode 5 的IB设计器里面界面是4寸的,把按钮放到底部,模拟器选成3.5寸的按钮就看不到了,找到了解决方法: http://stackoverflow.com/questions/18248789/xcode-autosizing-preview-window-missing 注意,文字内容说的是uncheck "Use Aut…

摘自:http://blog.ibireme.com/2014/09/16/adapted_to_iphone6/ 苹果公司官网设计介绍到:Retina显示屏的超高像素密度已超过人眼能分辨的范围.Retina对图像设计(图标.启动画面和其它所有像素有关的东西)有什么影响呢?如果我们的app要支持Retina,就要提供高分辨率的(宽x2,高x2)的图片.同时,为了支持没有Retina的设备,仍旧要准备低分辨率的版本. 换言之,我们要准备两套设计图. 针对不同分辨率的图片,苹果规定了一个命名规范:假…

本文主要简单谈谈并收集一些关于 iOS 11 & iPhone X 的适配及设计指南. iPhone X 众所周知,iPhone X 屏幕与其他的 iPhone 设备均不同,苹果称 iPhone X 的屏幕为超级视网膜显示屏. 在 iPhone X 上 1pt 相当于 3x3 px,也就是我们常说的 @3x,同 Plus 机型. iPhone X 的屏幕尺寸为 375x812 pt(即 1125×2436 pix).iPhone X 比 4.7 寸机型屏幕多出 145 pt. iPhone X…

iPhone X 适配 由于iPhone X的特殊造型,为了方便开发者对iPhone X进行适配,苹果在iOS 11中引入了Safe Area的概念,引擎也在api对象下添加了safeArea属性和safeareachanged事件,UI设计准则是页面重要的元素需要在安全区域以内,避免被遮挡. 对于大多数应用,通过以下几步基本就可以完成iPhone X的适配,其它的特殊情况如横竖屏切换等则需要结合使用场景另外处理. 注:如果没有iPhone X真机,有需求的开发者可以到这里下载iOS的模块开发工…

微信小程序中的iPhone X适配问题 小程序中下方的导航会被iPhone X下面的那条黑线盖住[微笑脸],所以要专门为了iPhone X做样式上的适配[微笑脸] wx.getSystemInfo({ success: function (res) { //console.log(res.model) //console.log(res.language)//zh_CN(en) //console.log(res.model=="iPhone X") if (res.model==&q…

目录 一.回顾 二.框架说明 1.ICallDPIChanged 2.IDPIHelper 3.悬浮窗体管理器 三.方案分析 1.窗口大小 2.字体大小 3.间距 4.图标 四.相关文章 原文链接:Qt之高DPI显示器(二) - 自适配解决方案分析 最近一直在处理高DPI问题,也花费了不少功夫,前前后后使用了多种解决方案,各种方案也都有利弊,笔者最终采用了自适配方案,虽然复杂一些,但是结果可控.这里把处理的过程记录下来,留给有同样需求的同学 一.回顾 上一篇文章Qt之高DPI显示器(一) - 解…

趁iPhone新品还没有发布,先整理一下屏幕适配.启动图适配.APP图标适配的笔记,方便以后查阅: 注:部分图片来源于网络 违删; (一)iPhone屏幕适配: (1)屏幕分辨率: ①设计尺寸规范(表格): ②设计尺寸规范(图文): ③开发尺寸易理解: (二)iPhone刘海屏/非刘海屏PT尺寸简要图: (三)APP图标适配尺寸简要图: (四)启动图尺寸简要图: (五)部分适配相关宏定义(简要说明): /** * MARK:-屏幕尺寸宏定义 * 导航栏高度 状态栏高度 底部tabbar高度 苹果…