Skip to content

Commit 2a23bb0

Browse files
yulin0629yulin0629
committed
fix: 優化 iPhone 上的場景卡片顯示效果
- 調整卡片寬度從 85vw 改為 75vw，確保內容更集中 - 減少卡片內邊距和高度，讓內容更緊湊 - 縮小左右漸變寬度，避免遮擋內容 - 添加 Safari 特定的性能優化屬性 - 調整手機版字體大小和間距 - 優化卡片置中效果的計算方式
1 parent 21ee4a5 commit 2a23bb0

2 files changed

Lines changed: 63 additions & 14 deletions

File tree

‎index.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -899,7 +899,7 @@ <h2>8 個學習場景</h2>
899899
<div class="scenario-number">01 - 基礎</div>
900900
<div class="scenario-title">初次對話體驗</div>
901901
<div class="scenario-description">建立 Copilot 使用基礎，體驗傳統 Chat 功能，了解基本操作介面</div>
902-
<div style="margin: 16px 0; font-size: 0.875rem; color: #6e6e73;">
902+
<div class="scenario-details">
903903
<div style="margin-bottom: 8px;">📚 <strong>學習重點：</strong></div>
904904
<ul style="list-style: none; padding: 0; margin: 0;">
905905
<li style="margin-bottom: 4px;">• 認識 Chat 介面與基本操作</li>
@@ -918,7 +918,7 @@ <h2>8 個學習場景</h2>
918918
<div class="scenario-number">02 - 基礎</div>
919919
<div class="scenario-title">程式碼解釋實作</div>
920920
<div class="scenario-description">掌握 @workspace 核心功能，理解專案結構，學習全專案分析技巧</div>
921-
<div style="margin: 16px 0; font-size: 0.875rem; color: #6e6e73;">
921+
<div class="scenario-details">
922922
<div style="margin-bottom: 8px;">📚 <strong>學習重點：</strong></div>
923923
<ul style="list-style: none; padding: 0; margin: 0;">
924924
<li style="margin-bottom: 4px;">• @workspace 的強大功能</li>
@@ -937,7 +937,7 @@ <h2>8 個學習場景</h2>
937937
<div class="scenario-number">03 - 進階</div>
938938
<div class="scenario-title">函數生成</div>
939939
<div class="scenario-description">體驗 Agent 協助編程，對比手動 vs AI 效率，初次接觸 Agent 模式</div>
940-
<div style="margin: 16px 0; font-size: 0.875rem; color: #6e6e73;">
940+
<div class="scenario-details">
941941
<div style="margin-bottom: 8px;">📚 <strong>學習重點：</strong></div>
942942
<ul style="list-style: none; padding: 0; margin: 0;">
943943
<li style="margin-bottom: 4px;">• Agent 模式初體驗 (20%)</li>
@@ -956,7 +956,7 @@ <h2>8 個學習場景</h2>
956956
<div class="scenario-number">04 - 進階</div>
957957
<div class="scenario-title">偵錯輔助</div>
958958
<div class="scenario-description">讓 Agent 主動發現和修復程式問題，學習三種模式的靈活運用</div>
959-
<div style="margin: 16px 0; font-size: 0.875rem; color: #6e6e73;">
959+
<div class="scenario-details">
960960
<div style="margin-bottom: 8px;">📚 <strong>學習重點：</strong></div>
961961
<ul style="list-style: none; padding: 0; margin: 0;">
962962
<li style="margin-bottom: 4px;">• Agent 智能診斷 (30%)</li>
@@ -975,7 +975,7 @@ <h2>8 個學習場景</h2>
975975
<div class="scenario-number">05 - 專業</div>
976976
<div class="scenario-title">單元測試</div>
977977
<div class="scenario-description">Agent 自主設計測試架構和完整用例，成為測試策略師</div>
978-
<div style="margin: 16px 0; font-size: 0.875rem; color: #6e6e73;">
978+
<div class="scenario-details">
979979
<div style="margin-bottom: 8px;">📚 <strong>學習重點：</strong></div>
980980
<ul style="list-style: none; padding: 0; margin: 0;">
981981
<li style="margin-bottom: 4px;">• Agent 策略制定 (50%)</li>
@@ -994,7 +994,7 @@ <h2>8 個學習場景</h2>
994994
<div class="scenario-number">06 - 專業</div>
995995
<div class="scenario-title">程式碼重構</div>
996996
<div class="scenario-description">Agent 分析遺留代碼並執行重構策略，擔任架構師角色</div>
997-
<div style="margin: 16px 0; font-size: 0.875rem; color: #6e6e73;">
997+
<div class="scenario-details">
998998
<div style="margin-bottom: 8px;">📚 <strong>學習重點：</strong></div>
999999
<ul style="list-style: none; padding: 0; margin: 0;">
10001000
<li style="margin-bottom: 4px;">• Agent 架構決策 (60%)</li>
@@ -1013,7 +1013,7 @@ <h2>8 個學習場景</h2>
10131013
<div class="scenario-number">07 - 專家</div>
10141014
<div class="scenario-title">文件生成</div>
10151015
<div class="scenario-description">Agent 自動分析程式碼生成完整文件體系，成為文檔專家</div>
1016-
<div style="margin: 16px 0; font-size: 0.875rem; color: #6e6e73;">
1016+
<div class="scenario-details">
10171017
<div style="margin-bottom: 8px;">📚 <strong>學習重點：</strong></div>
10181018
<ul style="list-style: none; padding: 0; margin: 0;">
10191019
<li style="margin-bottom: 4px;">• Agent 文檔專家 (80%)</li>
@@ -1031,7 +1031,7 @@ <h2>8 個學習場景</h2>
10311031
<div class="scenario-number">08 - 專家</div>
10321032
<div class="scenario-title">GitHub 自動化 Agent</div>
10331033
<div class="scenario-description">從 Issue 到 PR 的完整自動化流程，Agent 完全主導開發</div>
1034-
<div style="margin: 16px 0; font-size: 0.875rem; color: #6e6e73;">
1034+
<div class="scenario-details">
10351035
<div style="margin-bottom: 8px;">🎯 <strong>練習 Issues：</strong></div>
10361036
<ul style="list-style: none; padding: 0; margin: 0; font-size: 0.8125rem;">
10371037
<li style="margin-bottom: 3px;">• #1 清除已完成任務功能</li>

‎style.css‎

Lines changed: 55 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -165,12 +165,16 @@ body {
165165
display: flex;
166166
gap: 20px;
167167
overflow-x: auto;
168+
overflow-y: hidden;
168169
scroll-snap-type: x mandatory;
169170
scroll-behavior: smooth;
170171
-webkit-overflow-scrolling: touch;
171172
padding: 20px 0;
172173
margin: 0;
173174
cursor: grab;
175+
/* Safari 優化 */
176+
-webkit-transform: translateZ(0);
177+
-webkit-backface-visibility: hidden;
174178
}
175179

176180
.scenario-list::-webkit-scrollbar {
@@ -193,6 +197,16 @@ body {
193197
margin-right: 20px;
194198
}
195199

200+
@media (max-width: 768px) {
201+
.scenario-item:first-child {
202+
margin-left: calc((100vw - 75vw) / 2);
203+
}
204+
205+
.scenario-item:last-child {
206+
margin-right: calc((100vw - 75vw) / 2);
207+
}
208+
}
209+
196210
@media (min-width: 769px) {
197211
.scenario-item:first-child {
198212
margin-left: 0;
@@ -222,8 +236,9 @@ body {
222236

223237
@media (max-width: 768px) {
224238
.scenario-item {
225-
flex: 0 0 280px;
226-
padding: 32px;
239+
flex: 0 0 75vw;
240+
padding: 20px;
241+
min-height: 400px;
227242
}
228243
}
229244

@@ -276,6 +291,18 @@ body {
276291
margin-bottom: 24px;
277292
}
278293

294+
@media (max-width: 768px) {
295+
.scenario-title {
296+
font-size: 1.375rem;
297+
}
298+
299+
.scenario-description {
300+
font-size: 0.875rem;
301+
line-height: 1.4;
302+
margin-bottom: 16px;
303+
}
304+
}
305+
279306

280307
.scenario-links {
281308
display: flex;
@@ -481,8 +508,8 @@ body {
481508
top: 20px;
482509
right: 0;
483510
bottom: 20px;
484-
width: 60px;
485-
background: linear-gradient(to left, #ffffff 0%, transparent 100%);
511+
width: 40px;
512+
background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%);
486513
pointer-events: none;
487514
z-index: 1;
488515
opacity: 1;
@@ -495,8 +522,8 @@ body {
495522
top: 20px;
496523
left: 0;
497524
bottom: 20px;
498-
width: 60px;
499-
background: linear-gradient(to right, #ffffff 0%, transparent 100%);
525+
width: 40px;
526+
background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
500527
pointer-events: none;
501528
z-index: 1;
502529
opacity: 0;
@@ -518,6 +545,24 @@ body {
518545
opacity: 0;
519546
}
520547

548+
/* 場景卡片內容細節樣式 */
549+
.scenario-details {
550+
margin: 16px 0;
551+
font-size: 0.875rem;
552+
color: #6e6e73;
553+
}
554+
555+
@media (max-width: 768px) {
556+
.scenario-details {
557+
font-size: 0.8125rem;
558+
}
559+
560+
.scenario-details ul li {
561+
margin-bottom: 2px !important;
562+
font-size: 0.75rem;
563+
}
564+
}
565+
521566
@media (max-width: 768px) {
522567
.header h1 {
523568
font-size: 2rem;
@@ -531,6 +576,10 @@ body {
531576
grid-template-columns: 1fr;
532577
}
533578

579+
.scenario-wrapper::after,
580+
.scenario-wrapper::before {
581+
width: 20px;
582+
}
534583
}
535584

536585
/* Markdown 內容樣式 */

0 commit comments

Comments
 (0)