vue+java数据驱动，高度不兼容IOS14及14以下版本_vue 判断iphone系统版本号是否大于14-CSDN博客

博客介绍了Java中的HTML输出、Vue接收数据和CSS样式，展示运行效果时发现安卓手机正常，而iPhone或平板IOS14及以下版本存在不兼容问题，并给出解决办法，即让组件父元素根据内容自动调整为最大高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

java中的html输出

<Layout orientation="vertical" width="-1" marginTop="12" height="40">
    <Layout marginBottom="5" valign="center" >
    <Image width="14" height="14" value="bumen" marginRight="3"/>
     <Label value="申请部门" fontSize="14" textColor="#999999"/>
    </Layout>
   <Layout  orientation="vertical">
     <Label value="{{applyDeptName}} {{applyEmpNameCN}}" textColor="#333333" width="-1"/>
   </Layout>
</Layout>
 <Layout orientation="vertical" width="-1" margin="12 0 0 0">
  <Layout marginBottom="3" valign="center">
       <Image width="14" height="14" value="shijian"  marginRight="3"/>
       <Label value="申请时间" fontSize="14"  textColor="#999999"/>
  </Layout>
  <Label value="{{applyTime}}" textColor="#333333" width="-1"/>
</Layout>

vue接收数据

<div
    class="box"
    :class="flagflex==true?'flagflex':''"
    v-else-if="model.value!=''&&model.visibility!='0'"
    :style="model.styleObject"
  >
    <component
      v-for="(item, index) in model.fields"
      :actionRouter="actionRouter"
      :rowdata="rowdata"
      :key="index"
      :is="item.is"
      :vmodel="item"
      :rowindex="rowindex"
      :forname="forname"
      :forrowindex="forrowindex"
      @click="clickHandler" 
    ></component>
  </div>

css样式

.flagflex{
  flex: 1;
}
.box{
  display: flex;
}

运行效果：

安卓手机：

ipone手机或平板IOS14及14以下版本的效果

以下图是ipad 系统版本13的效果

解决这个不兼容问题的办法

在组件的外部，也就是让组件的父元素根据其内容自动调整为最大高度。

height: max-content; 是一种 CSS 属性，用于指定元素的高度应该根据其内容自动调整为最大高度。换句话说，元素将自适应其内部文本、图像或其他内容的高度，以便其高度尽可能地大，但不会超出其父容器的高度限制。

.box{
  display: flex;
  height: max-content;
}