最近在uniapp開發時又遇到了安卓手機不兼容問題，ios系統無影響。

開發背景：小編想通過網格布局來實現答題卡的布局，實現五列多行的形式。

代碼片段：

<view class="question-grid"><viewv-for="(question, index) in questions":key="index"class="grid-item":class="{current: currentQuestionIndex === index,answered:question.type !== 2 &&question.userAnswer &&question.userAnswer === question.correctAnswer,wrong:question.type !== 2 &&question.userAnswer &&question.userAnswer !== question.correctAnswer,answered:question.type === 2 &&question.userAnswer &&question.userAnswer.length > 0 &&question.userAnswer === question.correctAnswer,wrong:question.type === 2 &&question.userAnswer &&question.userAnswer.length > 0 &&question.userAnswer !== question.correctAnswer,}"@click="jumpToQuestion(index)">{{ index + 1 }}</view></view>
.question-grid {display: grid;grid-template-columns: repeat(5, 1fr);gap: 12px;height: 500rpx;overflow-y: scroll;
}.grid-item {width: 100%;aspect-ratio: 1/1;display: flex;justify-content: center;align-items: center;border-radius: 10px;font-weight: 500;cursor: pointer;transition: all 0.3s ease;background: #f8f9fc;color: #555;
}

究其原因：原來安卓系統對于aspect-ratio的支持不一致，導致這個樣式在安卓系統上生效。所以小編要換個樣式來實現等比例縮放。可以使用padding-top替代aspect-ratio，并設置height: 0確保容器高度完全由padding控制，最終的樣式代碼如下：

.question-grid {display: grid;grid-template-columns: repeat(5, 1fr);gap: 12px;height: 500rpx;overflow-y: scroll;
}.grid-item {position: relative;width: 100%;height: 0;padding-top: 100%;justify-content: center;align-items: center;border-radius: 10px;font-weight: 500;cursor: pointer;transition: all 0.3s ease;background: #f8f9fc;color: #555;
}
/* 添加內部容器 */
.grid-item-content {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;
}

這樣就成功解決了aspect-ratio: 1 / 1帶來的兼容性問題啦