最近在学习mpvue,记一下苹果X安全区域的适配问题 判断机型工具类全局组件mixin安全
原创
2022-11-10 13:34:37
69阅读
总结: 1.状态栏高度发生变化,解决方案:布局的时候这个高度不要写死,通过方法获取高度. 2.导航栏的视图层级结构发生变化而导致 UI(titleView、UIBarButtonItem) 问题。 3.safeAreaInset 导致 Scrollview 偏移。 4.Tabbar发生变化,建议用系
转载
2017-12-27 14:03:00
951阅读
2评论
当苹果宣布发布他们的旗舰手机-- iPhone X 的时候，他们允诺将为未来移动设备设定新的标准。我们决定需要了解一些内容。“屏幕再也不必是方形的” 除了无边框设计，就是我们熟悉的“齐刘海”，官方叫：Sensor Housing。它迅速成为一个热门话题，提出了一种全新的设计挑战：屏幕再也不必是方形的。虽然这对原生应用是一个更大的考验，但web开发也需要一些考虑。不管它
原创
2021-01-12 11:08:03
259阅读
1，设置网页在可视窗口的布局方式新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口
转载
2018-12-28 11:02:56
65阅读
点赞
随着iOS11和xcode9刚开始正式发布，小编也迫不及待的更新了xcode9，手机也顺利更新到iOS，也终于见到iPhone X 的真面不，看着齐刘海的样式，小编心里淡淡的忧伤，怎么适配，如何快速适配到项目中，成了一个蛋疼的问题文章讲解点：1.首先看一下iP...
原创
2022-08-24 10:28:37
380阅读
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */padding-bottom: env(safe-area-inset-bottom);在底部导航css样式中加入改代码 导航会在iphone X手机上 会自动向上padding值 防止iphone X 底部的横线遮住 页面导航...
原创
2022-01-10 13:54:57
476阅读
最主要的就是 是否设置scrollview的自动调整间距的属性。
转载
2023-05-10 00:28:35
126阅读
最近在学习用mpvue来写小程序,记一下苹果X安全区域的适配问题1、判断机型工具类safe-area.jsl
原创
2021-07-26 11:58:21
189阅读
问题如下图： 出现原因，phoneX系列手机下方多了34像素的工作区域，所以需要对x全系列手机坐下适配， 解决如下： 即可解决 同理，头部加载图显现的话，设置ignoredScrollViewContentInsetTop属性即可 注：代码写到你设置mj_header和mj_footer的下面，才会
原创
2023-08-22 11:05:51
277阅读
最近在修改一个老项目，里面有很多xib文件，需要适配iPhone X，但是又不想重写页面用代码适配，分享个小方法，也算是个笨办法吧， 适配iPhone X底部，iPhone X底部有34px的操作区域，而其他机型的则是没有的，具体步骤如下： 1、 2、 3、双击上图箭头所指，进入如下界面： 然后，就
原创
2023-08-22 11:12:27
160阅读
响应式布局
Media Query 的使用方法
在上例中， 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式。通过不同的媒体类型和条件定义样式表规则，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-widt
转载
2023-10-08 20:40:24
377阅读
css中添加屏幕自适应方法(rem)只需要在公共css文件中添加下面代码：设计稿以750px，基础字体为20px为例，兼容性高，使用过程中px转化为rem即可/*竖屏*/
@media screen and (max-aspect-ratio: /){
html {font-size:calc(100vw / * );}
@media screen and (min-width: 750px) {
转载
2024-05-07 18:32:22
109阅读
一、PC端 和 移动端适配分析： 1、PC端的适配，只是分辨率的不同引起的适配问题。这种适配好解决，这里就不讲了。 2、移动端的适配，移动端的适配主要是： 屏幕视口的分辨率和像素分辨率是不统一；不同手机的视口 分辨率也是不一样的。二、（移动端）屏幕相关概念：（下面的概念只是按照个人的理解来写的，只是为了解决前端适配的而写的。其它的概念不用知道的那么清楚）
转载
2023-07-21 17:24:35
396阅读
做游戏的都很厌恶刘海屏，特别是iphone，因为如果你不去适配iphoneX之后的手机，那么手机刘海的位置将会是黑的，这样你就拿不到苹果的推荐，而且IphoneX和安卓手机的刘海屏还有一个不同，就是IphoneX屏幕底部还有一条线，这样我们的UI就不能在这条线之下，否则会无法响应，所以我们需要调整我们的UI界面。1，刘海屏比例介绍：
转载
2023-09-04 18:19:52
124阅读
1、通过link方法 link方法引入媒体类型其实就是在标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。这种方式引入媒体类型时常跟着引用的样式文件
原创
2021-07-22 18:01:41
213阅读
/今日充值做媒体查询兼容/ @media (device-height:480px) and (-webkit-min-device-pixel...
原创
2022-07-13 22:40:00
235阅读
iPhone X 适配 由于iPhone X的特殊造型，为了方便开发者对iPhone X进行适配，苹果在iOS 11中引入了Safe Area的概念，引擎也在api对象下添加了safeArea属性和safeareachanged事件，UI设计准则是页面重要的元素需要在安全区域以内，避免被遮挡。 对于
原创
2021-08-11 15:19:47
528阅读
web app 一分钟适配 iPhone X
转载
2017-12-01 09:10:00
108阅读
2评论
一、方案（原理见第二部分） 1、简单粗暴的方法，不需要知道是不是iphonex，有safe area就空出来。padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */2、多
转载
2023-09-21 10:12:07
120阅读
viewpointcss3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。“viewpoint” = window sizevw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, 最小
1vmax = 1vw or 1vh, 最大兼容性：chrome 20+/ safari 6+/ IE
转载
2024-01-15 00:40:05
79阅读
