uni-halo/.agents/bak-skills/uniappx-uview-pro/examples/platform-specific/h5.md

H5 Platform | H5 平台

Instructions

This example demonstrates H5 platform-specific considerations when using uView Pro in UniAppX.

Key Concepts

• H5 responsive design
• Browser compatibility
• Performance optimization
• CSS and SCSS support

Example: H5 Responsive Components

<!-- pages/index/index.vue -->
<template>
  <view class="container">
    <u-grid :col="gridCol">
      <u-grid-item v-for="item in gridData" :key="item.id">
        {{ item.name }}
      </u-grid-item>
    </u-grid>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const gridCol = ref(3)
const gridData = ref([])

onMounted(() => {
  // #ifdef H5
  // H5: Adjust based on window width
  const updateGridCol = () => {
    if (window.innerWidth > 1200) {
      gridCol.value = 4
    } else if (window.innerWidth > 768) {
      gridCol.value = 3
    } else {
      gridCol.value = 2
    }
  }
  updateGridCol()
  window.addEventListener('resize', updateGridCol)
  // #endif
})
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  /* H5: Use viewport units for responsive sizing */
  padding: 20rpx;
  
  // #ifdef H5
  @media (min-width: 768px) {
    padding: 40rpx;
  }
  // #endif
}
</style>

Example: H5 Browser Compatibility

<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  // #ifdef H5
  // Check browser compatibility
  if (!window.CSS || !CSS.supports('display', 'flex')) {
    uni.showModal({
      title: '提示',
      content: '您的浏览器版本过低，部分功能可能无法正常使用',
      showCancel: false
    })
  }
  // #endif
})
</script>

Key Points

• H5 supports full CSS and SCSS features
• Use viewport units (vw, vh) for responsive sizing
• Handle window resize events for responsive components
• Check browser compatibility for modern CSS features
• Use conditional compilation (#ifdef H5) for H5-specific code
• Use media queries for responsive design