本文采用AspectFit 方式来计算实际屏幕分辨率，计算方式如下：local framesize = cc.Director:getInstance():getOpenGLView():getFrameSize()
local scaleX,scaleY = framesize.width/1136,framesize.height/640
local realScale = math
转载
2024-09-24 15:34:30
233阅读
浏览器兼容 为什么会有兼容问题？ 由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。现在市面上使用较多的内核例如：
使用Trident内核的浏览器：IE、Maxthon、TT；
使用Gecko内核的浏览器：Netcape6及
特别注意：/static/img/back.png tips：防止弹窗遮罩时页面可滚动，在弹窗的外层view标签加上 @touchmove.stop.prevent="" 1、关于自定义导航栏中的刘海屏适配问题：官方提供了一个CSS变量可以直接引用：var(--status-bar-height)该变量自动匹配设备平台状态栏高度此变量可以用calc() 加上其他单位数值来使用具体参数和说
转载
2024-06-09 10:48:59
828阅读
300px!important;width /**/:340px;margin:0 10px 0 10px}，关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）3、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}就能解决大部分问题
.home{ padding-bottom:constant(safe-area-inset-bottom); //兼容IOS < 11.2 padding-bottom:env(safe-area-inset-bottom);//兼容IOS > 11.2 } ps：constant必须写在前面，e ...
转载
2021-09-09 12:22:00
987阅读
2评论
如何兼容android、ios的刘海屏描述刘海屏也有其它叫法：凹凸屏、头凹屏、覆盖屏、挖孔屏等等，这里统一按刘海屏命名，虽然都在吐槽IPhoneX的刘海屏，但是各大安卓厂商还是不停的争相模仿，使用起来也是挺不方便的，颜值上升，操作感下降，尤其是单手握住屏幕的边缘时会有极大的不便。首先借鉴下网络的手机图片展示下，苹果IOS的还好，但是安卓的厂商有小米、华为、oppo、vivo等都相应...
原创
2021-08-13 17:57:11
619阅读
如何兼容android、ios的刘海屏描述刘海屏也有其它叫法：凹凸屏、头凹屏、覆盖屏、挖孔屏等等，这里统一按刘海屏命名，虽然都在吐槽IPhoneX的刘海屏，但是各大安卓厂商还是不停的争相模仿，使用起来也是挺不方便的，颜值上升，操作感下降，尤其是单手握住屏幕的边缘时会有极大的不便。首先借鉴下网络的手机图片展示下，苹果IOS的还好，但是安卓的厂商有小米、华为、oppo、vivo等都相应...
原创
2021-08-13 17:57:12
2118阅读
如何兼容android、ios的刘海屏描述刘海屏也有其它叫法：凹凸屏、头凹屏、覆盖屏、挖孔屏等等，这里统一按刘海屏命名，虽然都在吐槽IPhoneX的刘海屏，但是各大安卓厂商还是不停的争相模仿
原创
2022-01-15 11:11:11
548阅读
如何兼容android、ios的刘海屏描述刘海屏也有其它叫法：凹凸屏、头凹屏、覆盖屏、挖孔屏等等，这里统一按刘海屏命名，虽然都在吐槽IPhoneX的刘海屏，但是各大安卓厂商还是不停的争相模仿，使用起来也是挺不方便的，颜值上升，操作感下降
原创
2022-01-15 11:29:13
401阅读
苹果在iPhone X上使用了刘海屏并开创了全面屏时代，自此各大手机厂商都在模仿，随着几年的发展，从刘海屏到水滴屏再到挖孔屏、滑盖式全面屏，现在升降全面屏和曲面全面屏也在大规模普及，早已步入了真全面屏时代，反观苹果将刘海屏从2016年延续到了2019年，为何苹果在2019还采用刘海屏设计呢？小编整理了三点原因，大家认可哪一点呢？ 1.保留良好的用户体验 苹果依旧使用刘海屏的原因就是3D结构光，要知
转载
2023-10-02 10:51:48
272阅读
CSS技巧
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行?
2. margin加倍的问题?设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inlin
转载
2024-08-16 17:17:41
51阅读
话说现在的手机型号越来越多，主要还是android和ios这2个巨头称霸了江湖，而他们自带的浏览器内核是webkit，那对于做移动网页开发的同事来说，一般只要做好webkit内核浏览器的展现效果就行了，看起来很简单，其实背后还有一个大坑等着你。虽说是webkit内核，但页面的展现效果还会受到自身系统的影响，升级后的系统打了补丁，新增了新的属性，支持更多丰富炫丽的效果，那么旧的系统(未升级的)就不支
前言iPhone X和IOS 11的发布，不仅在许多技术方面造成了一定的冲击，前端也不可以避免地也受到影响，因为iPhone X刘海的影响，在编写前端页面的时候要做一些处理，下面先提出一些新的概念。iphone介绍iPhone X 无论是在屏幕尺寸、分辨率、甚至是形状上都发生了较大的改变，下面以iPhone 8作为参照物，看看到底iPhone X的适配我们要怎么考虑。我们看看iPhone X尺寸上
转载
2024-01-18 15:39:44
148阅读
在开发iOS应用时，我们常常会遇到“刘海屏”的问题。刘海屏，指的是iphone X及以后的机型，其为全面屏设计留下的黑色区域，因此需要特别处理以确保UI的美观和用户体验。接下来我将详细记录解决iOS XIB刘海屏问题的过程，包括环境准备、集成步骤、配置详解、实战应用、排错指南及性能优化。
## 环境准备
在开始之前，确保你具备以下开发环境。
- **开发平台**: macOS
- **开发工
刘海屏的出现为iOS开发带来了新的挑战和机遇，如何利用“刘海屏 iOS API”来进行适配和优化是开发者需要面对的重要问题。本篇文章将分享目前处理这一问题的思路与方法。
## 背景描述
2017年苹果推出了iPhone X，标志着刘海屏设计的普及。刘海的出现使得UI设计和用户体验面临新的挑战，开发者必须考虑到不同设备的刘海部分在界面布局中的影响。
```mermaid
timeline
ios适配补充：上面的px单位和我们在web中的px单位虽然一样，但是web所需的px实际为iOS中的pt值，px转pt需要根据设备的ppi(Pixels Per Inch:像素密度进行转换)： px:pixel像素，是屏幕上的显示的基本地，并不是长度单位，这个点可大可小，点小的话就很清晰，我们称之为“分辨率高”，反之就是"分辨率低"，所以像素是一个相对单位。 pt:point准确的说死一个专用印
北京时间今天凌晨1点，苹果再一次让全世界沸腾。iPhone X 带给我们的最大改变：全屏 Super Retina显示屏。它提供了更多的内容显示空间，同时也营造了更加深入的沉浸感。作为 iOS 开发者，在为强大的 Face ID 和全面屏欣喜的同时，我更担忧“齐刘海”的适配！ 下面结合官方的人机交互指南，来了解下如何设计 App 才能在iPhone X 和其他所有 iOS 设备上都看起
转载
2023-11-09 21:35:51
100阅读
关于iPhone X 的适配为了实现更为安全的面部识别，iPhone X正面的全面屏上方有一条刘海，上面集成了红外（深度）摄像头、近距离传感器、环境光传感器、左/上扬声器、麦克风、前置摄像头和一个名为点状投射仪 (Dot projector)的元件。它会投影数千个看不到的点在你脸上，对你的脸绘制一幅三维的深度“脸图”，然后和系统记录的脸图进行比对。对于开发这
转载
2023-11-14 18:53:34
262阅读
记录一下在uni-app中使用webview 页面出现刘海问题，查询资料解决iphoneX的“刘海”为相机和其他组件留出了空间，同时在底部也留有可操作区域。那么网站边尴尬了~被限制在了这样的“安全区域”内，两边会出现一道白条。解决的方案是：1、给body添加一个background；2、添加viewport-fit=cover meta标签，使页面占满整个屏幕。<meta name="vie
转载
2024-06-24 05:49:20
250阅读
iPhoneX（刘海屏）适配在 iOS11的时候，苹果破天荒发布了一款新屏幕样式的手机，俗称刘海屏。世人皆道丑，而后纷纷买之。自此，iOS 开发者们也走向了 iPhoneX系列的适配之旅。区别状态栏，导航栏的改变和底部 Home Indicator的新增 。普通屏幕iPhoneX（刘海屏）系列状态栏高度2044导航栏高度6488tabBar4983（其中有34Home Indicator交互区）导
转载
2023-11-08 19:16:32
415阅读
