怎样处理苹果手机小程序页面突然变大兼容问题

Posted 2023-03-19

iPhone屏幕适配，启动页设置，xcode6 开启 iPhone6 & iPhone6 plus 分辨率

iphone手机屏幕变大之后，我们ios开发者也要关注屏幕适配了，有时还会遇见莫名其妙的问题：如：

程序启动后状态栏字体变大：

iPhone屏幕适配 程序启动后状态栏字体变大0

iPhone屏幕适配 程序启动后状态栏字体变大1

这个问题就是因为我们的APP启动界面图片问题，简单的解决办法就是启动页面图片分辨率改成相应屏幕分辨率。具体原因往下看：

我们可以穿件一个XIB文件来当作启动页：当app启动的时候就可以自动加载这个xib文件

iPhone屏幕适配 程序启动后状态栏字体变大2

iPhone屏幕适配 程序启动后状态栏字体变大3

初代 iPhone

2007 年，初代 iPhone 发布，屏幕的宽高是 320 x 480 像素。下文也是按照宽度，高度的顺序排列。这个分辨率一直到 iPhone 3GS 也保持不变。

那时编写 iOS 的 App(应用程序)，只支持绝对定位。比如一个按钮(x, y, width, height) = (20, 30, 40, 50)，就表示它的宽度是 40 像素，高度是 50 像素，放在(20, 20)像素的位置。

iPhone 4

2010 年，iPhone 4 发布，率先采用 Retina 显示屏，在屏幕的物理尺寸不变的情况下，像素成倍增加，达到 640 x 960 像素。

这样就出现一个问题，怎么让原有的 App 运行在新的手机上面？iPhone 手机一个优势，就是有众多优秀的 App，假如不兼容原有的 App，就相当于放弃这个得来不易的优势，是很不明智的。

每当 iPhone 的屏幕有所变化，比如 iPhone 3GS 过渡到 iPhone 4, iPhone 4 过渡到 iPhone 5, iPhone 5 过渡到 iPhone 6，苹果公司都需要想办法来解决上述的兼容问题。

为了运行之前的 App，引入一个新的概念 point(点)。点这个概念在 iOS 开发中十分重要，而实际用户很少关注。iPhone 4 屏幕尺寸继续保持 320 x 480，不过单位并非是像素，而是点。

在 iPhone 3GS 中，1 个点等于 1 个像素。也就是说，点跟像素可以直接互换。

在 iPhone 4 中，1 个点等于 2 个像素。

这篇文章中，我将点和像素当成一维的长度单位，而非二维的面积单位，这样对于我来说更自然些，因此 1 个点等于 2 个像素。别的文章中可能会说 1 个点等于 4 个像素，其实是指 1 个点占据了 4 个像素的面积，这样也没有说错，注意上下文语境。

iPhone 4 和 iPhone 3GS 的屏幕尺寸实际上是一样的，都是 3.5 英寸。同样一个点，实际尺寸看起来是一样的。只是 iPhone 4 在单位英寸上像素更多，看起来更细腻。

开发 iOS 的时候，使用点作为基本单位会更加方便，列表对比：

45.jpg

这里的屏幕模式可以初步理解成，一个点等于多少个像素。2x，就是 1 个点等于 2 个像素。 参考技术A 在手机设置这里选择通用，接着点击辅助功能，然后在辅助功能这里选择缩放，把缩放开关打开，按照这里的操作说明，使用三个手指同时点击画面，即可放大屏幕。
打开IE浏览器，进入任意页面点击“工具”选项，会跳出一个下拉菜单，选择“兼容性视图设置”选项。进入兼容性视图设置之后，填入你所需要设置兼容模式的网址，点击添加，最后点击关闭即可。重新打开经过设置之后的网页，你会看到地址栏后面有一个像破碎纸片一样的图标，说明兼容模式已经设置成功，在工具的下拉菜单也同样可以看到在兼容模式前面也就打钩，说明网页的兼容模式已经设置成功。 参考技术B 夏天的味道，是小桥流水，潺潺鱼跃起；夏天的味道，是水池塘边，一一风荷举；夏天的味道，是蝉鸣不绝，听绿荫深处

微信小程序---scroll-view在苹果手机上触底或触顶页面闪动问题

在项目开发中遇到一个关于scroll-view的的问题，具体如下：

项目要求是横向滚动，由于直接在scroll-view组件设置display：flex不生效，因此考虑直接在scroll-view下增加一个wrap，将所有的item放在wrap内，

将wrap设置为display：flex,这种方式在安卓手机不会导致任何问题，在苹果手机样式也不会有什么问题，但是当item的个数较多导致超出一屏，scroll-view

滑动触底或者触顶就会导致页面抖动。解决方案如下：

 

sroll-view组件直接包裹item, 注意以下两点：

1. 一定要将scroll-view容器设置宽度,并设置white-space: nowrap;
2. 一定要将scroll-view容器的每一项（item）都设置宽度和display:inline-block

也可以在item内再套一层，使用flex布局。

至此，问题解决。