[Grid 宫格] 使用grid组件，小程序开发工具和mac电脑真机预览没有问题，但是使用iphone13真机预览宫格的图片没有缩小

[weijunli-No1]

tdesign-miniprogram 版本

1.5.0

重现链接

No response

重现步骤

我为我的项目开启了深色模式，我不知道是不是深色模式导致的，我在首页引入了Grid 组件，我的wxml文件如下：

<!--index.wxml-->
<navigation-bar title="我的海滨" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<t-swiper
  style="--td-swiper-radius:0rpx"
  current="{{current}}"
  autoplay="{{autoplay}}"
  duration="{{duration}}"
  interval="{{interval}}"
  navigation="{{navigation}}"
  paginationPosition="{{paginationPosition}}"
  list="{{swiperList}}"
>
</t-swiper>
<view>
  <t-grid class="block" column="{{4}}" theme="card">
  <t-grid-item text="标题文字" image="{{img1}}" />
  <t-grid-item text="标题文字" image="{{img2}}" />
  <t-grid-item text="标题文字" image="{{img3}}" />
  <t-grid-item text="最多五个字" image="{{img1}}" />
  <t-grid-item text="标题文字" image="{{img1}}" />
  <t-grid-item text="标题文字" image="{{img3}}" />
  <t-grid-item text="标题文字" image="{{img2}}" />
  <t-grid-item text="最多五个字" image="{{img2}}" />
</t-grid>
</view>

wxss文件如下：

/**index.wxss**/
.img {
  width: 100%;
  height: 100%;
}
.block {
  display: block;
  margin-top: 20rpx;
}

JSON文件如下：

{
  "component": true,
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar",
    "t-swiper": "tdesign-miniprogram/swiper/swiper",
    "t-grid": "tdesign-miniprogram/grid/grid",
    "t-grid-item": "tdesign-miniprogram/grid-item/grid-item"
  }
}

js文件如下：

// index.js
const app = getApp();

const imageCdn = 'https://tdesign.gtimg.com/mobile/demos';
const swiperList = [
  `${imageCdn}/swiper1.png`,
  `${imageCdn}/swiper2.png`,
  `${imageCdn}/swiper1.png`,
  `${imageCdn}/swiper2.png`,
  `${imageCdn}/swiper1.png`,
];
Page({
    data: {
        current: 2,
    autoplay: true,
    duration: 500,
    interval: 5000,
    paginationPosition: 'bottom-right',
    swiperList,
        navigation: { type: 'fraction' },
        swiperHeigh: '',
    img1: 'https://biyesheji0601.oss-cn-beijing.aliyuncs.com/haibin/kebiao.png',
        // img1: 'https://tdesign.gtimg.com/mobile/demos/example1.png',
    img2: 'https://tdesign.gtimg.com/mobile/demos/example2.png',
    img3: 'https://tdesign.gtimg.com/mobile/demos/example3.png',
    },
      /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
        this.getTabBarPage()
        this.getSwiperHeigh()
  },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },
    /**
     * tabbar跳转
     */
    getTabBarPage() {
        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
            const page = getCurrentPages().pop();
            this.getTabBar().setData({
                value: '/' + page.route
            })
        }
    },
    /**
     * 计算轮播图的高度，按照黄金比例计算
     */
    getSwiperHeigh() {
        console.log("设置轮播图的高")
        this.setData({
            swiperHeigh : app.globalData.phoneWidth * 0.618 * (750 / app.globalData.phoneWidth) 
        })
        console.log(this.data.swiperHeigh)
    }
})

问题截图如下：

开发工具截图如下 ![Uploading WX20240727-180353@2x.png…]()

期望结果

我希望它能和我开发工具展示的保持一致，图标完美展示

实际结果

No response

基础库版本

No response

补充说明

我是一个后端开发，如果提出的问题很简单就解决了，跪求大佬不要diss我

[github-actions[bot]]

👋 @weijunli-No1，感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[jarmywang]

Skyline会有这个问题，webview+glass-easel没问题，grid暂未适配Skyline，这个页面可以先用webview渲染 "renderer": "webview",

[weijunli-No1]

收到，谢谢

[Episode233]

Skyline会有这个问题，webview+glass-easel没问题，grid暂未适配Skyline，这个页面可以先用webview渲染 "renderer": "webview",``“renderer”： “webview”， /

请问如何在skyline模式中正常使用，我的那个页面只能使用skyline进行渲染，不然别的组件就直接错位了