uni-app iPhone13 版本号16.1 所有页面css样式全乱了

uni-app iPhone13 版本号16.1 所有页面css样式全乱了

操作步骤：

  • iPhone13版本号16.1

预期结果：

  • 页面正常显示

实际结果：

  • 页面样式混乱

bug描述：

  • iPhone13版本号16.1所有页面css样式全乱了，其他iPhone机型均未复现此问题。
信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 windows11
HBuilderX类型 正式
HBuilderX版本 3.99
手机系统 iOS
手机系统版本 iOS 16
手机厂商 苹果
手机机型 iPhone13
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

Image Image


更多关于uni-app iPhone13 版本号16.1 所有页面css样式全乱了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

排查出来应该是不同版本的IOS的text-align属性有差异，你临时先把下面这两行属性删除或用left代替吧 .xqBox2-contPhone-label {
display: inline-block;
margin-left: 8rpx;
font-size: 13px;
color: #999999;
//text-align-last: justify;注释的这两行删除
//text-align: justify;
}

更多关于uni-app iPhone13 版本号16.1 所有页面css样式全乱了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


万分感谢！

看样子是display的问题，用了什么UI组件？

没有用到，都是自己写的样式

回复 Adlaw: 新建一个项目会复现该问题吗？

回复 HRK_01: 没有。刚开始客户说所有页面样式都有问题，我还以为是框架问题，刚才又说只有这一个页面，那应该就是有页面有报错才把后续样式影响的。

回复 Adlaw: 报错信息是什么？

回复 HRK_01: 不清楚，这边没有iPhone13手机测试

回复 Adlaw: 那你把其他无用的文件删了，然后上传这个精简之后的工程zip压缩包，我这边用ios16模拟器测试一下

回复 HRK_01: 好的，现在在开会，我晚点发给您

回复 HRK_01: 下面传附件了

临时测试

确实复现了，编译之后的样式也没有丢失，我看看怎么回事

在 uni-app 开发中，如果遇到在 iPhone 13（iOS 16.1）上所有页面的 CSS 样式全乱了，可能是由于以下原因之一导致的。下面是一些排查和解决问题的建议：

1. 检查 viewport 和 meta 标签

确保在 index.html 或 pages.json 中正确设置了 viewport，以确保页面在移动设备上正确缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 检查 CSS 兼容性

iOS 16.1 可能对某些 CSS 属性支持不同，尤其是 flexbox、grid 或 position 相关属性。确保你的 CSS 代码符合现代标准，并测试在 iOS 上的兼容性。

3. 检查 rpx 单位

uni-app 推荐使用 rpx 作为响应式单位。如果使用了 px 或其他单位，可能会导致在不同设备上样式错乱。确保所有尺寸单位使用 rpx 或在 pages.json 中配置 globalStyle 的 rpx 计算方式。

{
  "globalStyle": {
    "rpxCalcMaxDeviceWidth": 750, // 设计稿宽度
    "rpxCalcBaseDeviceWidth": 375 // 基准设备宽度
  }
}

4. 检查样式作用域

如果使用了 scoped 样式，确保样式正确应用到组件中。scoped 样式可能会导致某些样式失效。

<style scoped>
/* 样式代码 */
</style>

5. 检查 CSS Reset

不同浏览器和设备的默认样式可能不同。确保在项目中使用 CSS Reset 或 Normalize.css 来统一默认样式。

/* 引入 normalize.css */
@import 'normalize.css';

6. 检查 flex 布局

如果使用了 flex 布局，确保父容器和子容器的 flex 属性设置正确。iOS 可能对 flex 布局的实现有细微差异。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

7. 检查 position 和 z-index

某些 position 属性（如 fixed 或 absolute）在 iOS 上可能会有不同的表现。确保 z-index 设置正确，避免元素重叠或错位。

8. 检查 uni-app 版本

确保你使用的 uni-app 版本是最新的，旧版本可能存在兼容性问题。更新到最新版本：

npm update @dcloudio/uni-app

9. 调试工具

使用 Safari 的开发者工具（通过 USB 连接 iPhone）或 Chrome 的 DevTools 模拟 iPhone 13 设备，查看具体的样式问题。

10. 提交 Issue

如果以上方法无法解决问题，可能是 uni-app 的 bug。可以到 uni-app GitHub Issues 提交问题，描述你的设备和版本信息，并附上相关代码片段。

示例代码

以下是一个简单的 uni-app 页面示例，确保样式正确：

<template>
  <view class="container">
    <text class="title">Hello uni-app</text>
  </view>
</template>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.title {
  font-size: 32rpx;
  color: #333;
}
</style>
回到顶部