前端iPhone X适配总结】的更多相关文章

屏幕尺寸 垂直方向上,iPhone X的显示宽度与iPhone 6,iPhone 7 和 iPhone 8 的 4.7 英寸一样,但是比4.7英寸的显示屏高145pt. 安全区域 安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners).齐刘海(sensor housing).小黑条(Home Indicator)影响 viewport-fit 通过对meta标签viewport的扩展,可以调整页面的展现区域.viewport-fit有三个可选值: contain:使页面展示…
前端页面的适配使用rem换算 https://www.cnblogs.com/liangxuru/p/6970629.html 注:本文转载之处:https://www.cnblogs.com/annie211/p/8118857.html 为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推. 但直接这样强制页面缩放过于粗暴,会导致页面图片文字失…
转自:https://segmentfault.com/a/1190000011586301 作者:Devinnn meta标签到底做了什么事情 做过移动端适配的小伙伴一定有遇到过这行代码: <meta name = "viewport" content ="width=device-width, initial-scale=1.0"> 但是,很多小伙伴只是感性的认识:噢,我加了这行代码,然后页面的宽度就会跟我的设备宽度一致.然而,这种理解是很片面的.那…
完成移动端的开发项目之后,发现谷歌自带的调试器似乎没有什么太大的作用,整天借同事的苹果手机测bug,尽管同事不厌其烦,但还是觉得这iPhone系列适配问题适配到想逃逃逃,好在项目已经顺利完成,测试通过,下面就是开发过程中遇到的一些坑. 图片.png 图片.png 问题一:苹果手机上的input按钮自带渐变效果 一样的代码,为啥在苹果手机上的input按钮就自带渐变效果,搞特殊吗?怎么让它显示正常?只需要加上outline:0px; -webkit-appearance:none; 清除原有样式,…
最近开始做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…
趁iPhone新品还没有发布,先整理一下屏幕适配.启动图适配.APP图标适配的笔记,方便以后查阅: 注:部分图片来源于网络 违删; (一)iPhone屏幕适配: (1)屏幕分辨率: ①设计尺寸规范(表格): ②设计尺寸规范(图文): ③开发尺寸易理解: (二)iPhone刘海屏/非刘海屏PT尺寸简要图: (三)APP图标适配尺寸简要图: (四)启动图尺寸简要图: (五)部分适配相关宏定义(简要说明): /** * MARK:-屏幕尺寸宏定义 * 导航栏高度 状态栏高度 底部tabbar高度 苹果…