页面布局自适应修调

src/app/globals.css

@@ -20,6 +20,7 @@ a { color: inherit; text-decoration: none; }
 .site-locale button:hover, .site-locale button:focus-visible { color: #8F56A2; }
 .site-locale button.active { background: #fff; color: #8F56A2; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); }
 .locale-button-label { display: inline-flex; align-items: center; justify-content: center; }
+.site-mobile-locale { display: none; }
 .site-menu-button { display: none; width: 38px; border: 0; background: transparent; cursor: pointer; }
 .site-menu-button span { display: block; height: 2px; margin: 5px 0; background: var(--ink); transition: background-color .2s ease; }
 .site-menu-button:hover span, .site-menu-button:focus-visible span { background: #8F56A2; }
@@ -156,16 +157,19 @@ a { color: inherit; text-decoration: none; }
 
 @media (max-width: 900px) { 
   .site-header { height: 84px; padding: 0 16px; }
-  .site-logo { min-width: 0; flex: 1; justify-content: center; }
+  .site-logo { min-width: 0; flex: 1; justify-content: flex-start; }
   .site-logo-image { width: min(180px, 44vw); }
   .site-navigation { display: none; }
   .site-navigation.is-open { position: absolute; top: 84px; right: 16px; left: 16px; z-index: 10; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 18px; border: 1px solid rgba(15, 23, 42, 0.08); background: #fff; box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12); }
   .site-navigation.is-open a { padding: 13px 0; border-bottom: 1px solid rgba(15, 23, 42, 0.08); }
   .site-navigation.is-open a:last-child { border-bottom: 0; }
   .site-navigation.is-open a::after { display: none; }
-  .site-locale { display: inline-flex; }
-  .site-header-actions { min-width: auto; margin-left: auto; }
-  .site-menu-button { display: block; }
+  .site-navigation.is-open .site-mobile-locale { display: flex; align-items: center; gap: 4px; padding: 12px 0 4px; border-top: 1px solid rgba(15, 23, 42, 0.08); }
+  .site-mobile-locale button { min-width: 36px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: #5d6773; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; }
+  .site-mobile-locale button:hover, .site-mobile-locale button:focus-visible, .site-mobile-locale button.active { color: #8F56A2; background: rgba(143, 86, 162, 0.08); }
+  .site-locale { display: none; }
+  .site-header-actions { min-width: auto; margin-left: auto; gap: 8px; flex-shrink: 0; }
+  .site-menu-button { display: block; flex-shrink: 0; }
   .home-page { padding: 0 0 32px; }
   .home-hero { width: calc(100% - 32px); height: min(560px, calc(100svh - 115px)); min-height: 420px; border-radius: 11px; }
   .hero-city-left { width: 52%; }
@@ -225,8 +229,6 @@ a { color: inherit; text-decoration: none; }
   .site-logo { justify-content: flex-start; }
   .site-logo-image { width: min(170px, 52vw); }
   .site-header-actions { gap: 4px; }
-  .site-locale { padding: 2px; border-radius: 11px; }
-  .site-locale button { min-width: 27px; padding: 7px 5px; border-radius: 8px; font-size: 10px; letter-spacing: 0; }
   .site-menu-button { width: 34px; padding: 0; }
   .site-navigation.is-open { top: 72px; right: 12px; left: 12px; padding: 8px 16px; }
 

src/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import "./globals.css";
 import { SiteFooter } from "@/components/layout/site-footer";
 import { SiteHeader } from "@/components/layout/site-header";
@@ -14,6 +14,11 @@ export const metadata: Metadata = {
   },
 };
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {

src/components/layout/site-header.tsx

@@ -73,6 +73,24 @@ export function SiteHeader() {
             </Link>
           );
         })}
+        <div className="site-mobile-locale" aria-label="语言选择">
+          {locales.map((item) => (
+            <button
+              key={item}
+              type="button"
+              className={item === locale ? "active" : ""}
+              aria-pressed={item === locale}
+              onClick={() => {
+                setLocale(item);
+                applyLocale(item);
+              }}
+              aria-label={localeLabels[item]}
+              title={localeLabels[item]}
+            >
+              <span className="locale-button-label">{localeShortLabels[item]}</span>
+            </button>
+          ))}
+        </div>
       </nav>
       <div className="site-header-actions">
         <div className="site-locale" aria-label="语言选择">