Update app/templates/article.html

app/templates/article.html

@@ -15,7 +15,7 @@
 
     /* 文章容器样式 */
     .article-container {
-        max-width: 900px;
+        max-width: 110vh;
         margin: 0 auto;
         background: white;
         border-radius: 20px;
@@ -382,28 +382,113 @@
 
     /* Responsive Design */
     @media (max-width: 768px) {
-        .article-container {
-            padding: 1.5rem;
-            border-radius: 12px;
-        }
+    /* 文章区域移动端优化 */
+    .article-container {
+        max-width: 60vh;
+        padding: 1.25rem;
+        border-radius: 12px;
+        margin: 1rem;
+        border-width: 1px;
+    }
 
-        .article-title {
-            font-size: 2rem;
-        }
+    .article-header {
+        margin-bottom: 1.5rem;
+        padding-bottom: 1rem;
+    }
 
-        .chat-window {
-            right: 1rem;
-            bottom: 1rem;
-            left: 1rem;
-            width: auto;
-            height: 500px;
-        }
+    .article-title {
+        font-size: 1.75rem;
+        line-height: 1.4;
+    }
+
+    .article-meta {
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+
+    .article-summary {
+        margin: 1.5rem 0;
+        padding: 1.25rem;
+    }
+
+    /* 聊天窗口移动端优化 */
+    .chat-window {
+        position: fixed;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 90vh;
+        margin: 0;
+        border-radius: 20px 20px 0 0;
+        transform-origin: bottom center;
+    }
+
+    .chat-messages {
+        padding: 1rem;
+    }
+
+    .chat-message {
+        max-width: 90%;
+        padding: 0.875rem 1rem;
+        font-size: 0.95rem;
+    }
+
+    .chat-message pre {
+        margin: 0.5rem 0;
+        padding: 0.875rem;
+        font-size: 0.85rem;
+    }
+
+    .chat-input-wrapper {
+        padding: 0.875rem;
+    }
+
+    .chat-input {
+        min-height: 40px;
+        padding: 0.625rem 0.875rem;
+        font-size: 0.95rem;
+    }
+
+    .chat-send {
+        width: 40px;
+        height: 40px;
+    }
+
+    .chat-toggle {
+        right: 1rem;
+        bottom: 1rem;
+        width: 48px;
+        height: 48px;
+        font-size: 1.25rem;
+    }
 
-        .chat-toggle {
-            right: 1rem;
-            bottom: 1rem;
+    /* 触摸设备优化 */
+    .chat-message,
+    .chat-input,
+    .chat-send,
+    .chat-toggle {
+        touch-action: manipulation;
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    /* 提高移动端可读性 */
+    .markdown-body {
+        font-size: 1rem;
+        line-height: 1.6;
+    }
+
+    .markdown-body pre {
+        -webkit-overflow-scrolling: touch;
+    }
+
+    /* 优化键盘弹出时的布局 */
+    @media (max-height: 600px) {
+        .chat-window {
+            height: 85vh;
         }
     }
+}
 </style>
 {% endblock %}