uni-app 真机iphone 6s plus（系统为12.4.3）页面样式渲染异常

uni-app 真机iphone 6s plus（系统为12.4.3）页面样式渲染异常

开发环境 版本号 项目创建方式
Windows win 10 HBuilderX

产品分类：uniapp/H5

浏览器平台：微信内置浏览器

浏览器版本：iphone

App下载地址或H5网址：https://h5.applet.xiangfeiyue.com/photography/basic/#/pages/photography/basic/category/index

示例代码：

<template>  
    <!-- 页面显示可以-->  
    <view class="">  
        <view class="" v-for="(item,index) in list" :key="item.uuid" @click="toLinkList(item,'navigateTo')">  
            <view class="">  
                <view class="">{{item.title}}</view>  
                {{ test }}  
            </view>  
        </view>  
    </view>  

    <!-- 页面不显示可以 -->  
    <view class="">  
        <view class="" v-for="(item,index) in list" :key="item.uuid" @click="toLinkList(item,'navigateTo')">  
            <view class="">  
                <!-- 只要添加了class类，就没办法显示 -->  
                <view class="title">{{item.title}}</view>  
                {{ test }}  
            </view>  
        </view>  
    </view>  
</template>

更多关于uni-app 真机iphone 6s plus（系统为12.4.3）页面样式渲染异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 真机iphone 6s plus（系统为12.4.3）页面样式渲染异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在iPhone 6s Plus（iOS 12.4.3）上出现样式渲染异常，通常与旧版本iOS的WebView兼容性有关。从代码对比看，问题出现在添加了class="title"后元素不显示，这可能是以下原因导致：

  1. CSS作用域问题
    uni-app默认使用Vue组件的样式作用域。如果.title类在<style scoped>中定义，可能在iOS 12的WebView中解析异常。可尝试改为全局样式（移除scoped）测试：

    /* 全局样式 */
.title { font-size: 16px; }

  2. CSS属性兼容性
    iOS 12对Flexbox、Grid等现代CSS属性支持不完善。检查.title是否使用了display: flex、min-height等属性，建议暂时改用传统布局（如display: block）。

  3. 样式污染
    微信浏览器环境可能存在默认样式冲突。建议给.title增加更具体的选择器，例如：

    view.title { ... }
回到顶部