[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)
	}
})

问题截图如下：

开发工具截图如下

期望结果

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

实际结果

No response

基础库版本

No response

补充说明

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

[github-actions]

👋 @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进行渲染，不然别的组件就直接错位了