/* 響應式圖層 —— 原站沒有這個東西 * =========================================================================== * 2012 年的無名小站是 **970px 固定寬**：視窗一縮小就出現橫向捲軸， * 導覽列那顆「手機(NEW)」連到的是另一個獨立的行動版活動頁 * （tw.wretch.campaign.yahoo.net/2011mobilecam/），不是響應式版面。 * * 所以這一整支是 WRETCH_2012.md §3-A 意義下的**刻意偏離**：使用者要求 * 「無名有的功能我要有，沒有的我也要有」，RWD 屬於後者。 * * ── 為什麼獨立成一支、而且只在窄視窗生效 ────────────────────────────── * 每一條規則都包在 @media (max-width: 999px) 裡。 * **1000px 以上一條都不生效**，桌機看到的版面與原站逐像素相同， * tools/fidelity.mjs 與既有的幾何量測完全不受影響。 * 斷點選 999 是因為版面本體 970px ＋ 左右各 10px 邊距 = 990， * 再留一點捲軸的餘裕。 * * 載入順序必須是**最後一支**（在版型與各服務的偏離層之後）， * 才蓋得過那些寫死的 px 寬度。見 views/partials/head2012*.ejs。 * * ── 手法 ────────────────────────────────────────────────────────────── * 原站的版面是「固定寬 + float 分欄 + table 排版」，這三種在窄螢幕都會爆。 * 對應處理： * 固定寬 width:970px → max-width:100% * float .main/.side 取消 float 改直向堆疊 * table 相簿與名片是真的 ，讓它可以橫向捲而不是把整頁撐爛 * 圖片 一律 max-width:100%，不然照片會頂出容器 */ @media (max-width: 999px) { /* ── 0. 全站 ────────────────────────────────────────────────────── * ⚠ 這裡**刻意不寫** html{overflow-x:hidden}。 * 那一行會讓 document.scrollWidth 等於視窗寬，量測工具就再也量不到橫向溢出—— * 版面還是壞的，只是看不見了，而且內容會被裁掉。 * 寧可讓它露出來被 tools/uicheck.mjs 抓到，然後真的去修那個寬度。 */ img, video, iframe { max-width: 100%; height: auto; } /* 各種寫死 px 寬的容器。清單是 uicheck 在 375/768px 下實際量出來的， 不是憑印象列的——每加一批就重跑一次，直到不再報超寬。 */ .bd, .hd, .ft, #wfp-footer, #wfp-inner-search, #wfp-universal-footer, #scrb-panel, #container1, #container2, #main2, #links, #links2, #banner { width: auto !important; max-width: 100%; box-sizing: border-box; /* min-width 一定要一起歸零。max-width 贏不過 min-width—— 相簿總站的 #container1 同時寫了 width:960px 與 min-width:960px， 只蓋 width 的話盒子還是被 min-width 撐在 960， 實測 768px 視窗仍溢出 192px、375px 仍溢出 585px。 */ min-width: 0 !important; } /* ── 1. 站台外框（首頁／相簿總站／網誌總站／影音／嘀咕／揪團） ────── */ #wrapper, #lower-wrapper, #bg-wrapper { width: auto !important; max-width: 100%; padding-left: 8px; padding-right: 8px; box-sizing: border-box; } /* 640 + 300 的雙欄改直向堆疊 */ .main, .side { float: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } .side { margin-top: 12px; } .mod, #wfp-cover.mod { width: auto !important; max-width: 100%; } /* 首頁的頁首與導覽列：天空底圖固定 970 寬，讓它縮。 選擇器是實際量出來的（uicheck 在 375/768px 下報「超寬元素」報出來的那幾個）， 不是猜的：#wfp-universal-header / #wfp-navigation / .belt / .title。 */ .hd, #wfp-header, nav, #nav, #wfp-universal-header, #wfp-navigation, #wfp-search, .belt, .title, #wfp-cover, #wfp-featured, #wfp-today, #wfp-celebrity { width: auto !important; max-width: 100%; box-sizing: border-box; } nav ul, #nav ul { display: flex; flex-wrap: wrap; } nav li, #nav li { float: none !important; } /* 今日主題那疊照片是絕對定位的，窄螢幕會飛出去——改成正常流 */ #wfp-cover .stack { height: auto !important; } #wfp-cover .stack .block, #wfp-cover .stack .gallery { position: static !important; width: auto !important; height: auto !important; margin: 8px 0 !important; } /* ── 8. 320px（iPhone SE 直立）才現形的那批 ────────────────────── */ /* fieldset 的 min-width 預設是 min-content，裡面的輸入框有寫死寬度時 就會把 fieldset 撐開，width:auto 蓋不掉——要連 min-width 一起放掉。 */ fieldset { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; } #searchForm input[type=text], #search_keyword, #inner-search-input { width: 100% !important; min-width: 0 !important; box-sizing: border-box; } /* 相簿總站的關鍵字建議浮層寫死 340px */ #suggestMenu, #suggestMenu .bd { width: auto !important; max-width: 100% !important; } /* 首頁站友介紹的引言塊寫死 296px ＋ 左右 padding，box-sizing 之外還會爆 */ .emphatic { width: auto !important; max-width: 100% !important; box-sizing: border-box; } /* 網誌單篇的迴響／引用區整組寫死 300px */ .total-comments-div, .trackback-url, .trackbacks-head, .comments-head, .comments-body, .comments-user, .comments-word, .comments-form, .comment-input { width: auto !important; max-width: 100% !important; box-sizing: border-box; } /* 知名站友卡的站名 h3 有 overflow:hidden ＝ 自成 BFC， 於是它會避開左邊那張大頭貼的浮動框，在 320px 下被壓成 37px 寬、字被切掉。 （跟 #wfp-hybrid .bd 同一個成因，見上面第 7 節。） 拿掉 overflow 讓它回到一般區塊，字就能繞著浮動框排。 */ #wfp-celebrity .bd ul li h3, #wfp-celebrity .bd ul li h4 { width: auto !important; overflow: visible !important; height: auto !important; } #wfp-cover .stack .block a { width: auto !important; height: auto !important; } /* 熱門相簿的格子：原本是固定寬並排，改成自動換行 */ #wfp-featured .featured-photos ul { display: flex; flex-wrap: wrap; } #wfp-featured .featured-photos li { float: none !important; width: auto !important; } /* 分享列是絕對定位的浮層，窄螢幕會蓋住內容 */ .wfp-sharing { position: static !important; width: auto !important; visibility: visible; } /* ── 1-B. 相簿總站 /albums 的三欄 ──────────────────────────────── * 這一頁不走 .main/.side，它是 public/wretch2012-album-index.css 的 * .left_column 143 ＋ 8 ＋ .middle_column 486 ＋ .right_column 315 = 952， * 三欄都 float 且都寫了 min-width，所以就算 #container1 縮了， * 三欄加起來還是 952px 把頁面撐爆。改成直向堆疊。 * .left_column 原本有 margin-top:113px（讓出 #header 的 header.jpg 高度）， * 堆疊之後那段留白會變成中間憑空多一大塊，一起歸零。 */ .left_column, .middle_column, .right_column { float: none !important; width: auto !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 12px !important; } /* #main2 也要一起取消 float。它包住左欄與中欄、而 #sidebar 是它的**兄弟**， 只要 #main2 還浮著，被取消 float 的 #sidebar 就會被擠到浮動框旁邊， 實測寬度被壓成 0px、整個右欄看不見（h3 也因此被判定成文字被切）。 */ #main2 { float: none !important; width: auto !important; } /* 搜尋列在原版是絕對定位在 #header 裡（left:205px、width:500px）， 窄視窗會直接戳出頁面右緣。改回正常流，讓它跟著 header 縮。 */ #searchForm, #search_keyword, #search_submit, #Hot_Keyword, #access_link { position: static !important; width: auto !important; max-width: 100%; left: auto !important; top: auto !important; box-sizing: border-box; } #searchForm { height: auto !important; } /* 左欄的 Conditions／Categories／Locations 堆疊後改成橫向排列， 不然 24 個分類會變成很長的一直條 */ /* 左欄的 Conditions／Categories／Locations 堆疊後改成橫向排列， 不然 24 個分類會變成很長的一直條。 ⚠ 但**手機直立不能這樣做**：inline-block 之後這幾塊會跟隔壁的 .services_link 疊在一起，「Hot」頁籤只剩下緣幾像素點得到。 600px 以下改回一塊一行（見下面 599 那個區塊）。 */ #browse_album > li { display: inline-block; vertical-align: top; margin-right: 12px; } /* #header 的 960×80 底圖與絕對定位的搜尋列在窄視窗會互相疊 */ #header, #footer, #ft { width: auto !important; min-width: 0 !important; max-width: 100%; box-sizing: border-box; } /* ── 2. 個人小站外框（留言板／名片／好友／MyPage 家族，原本 958px） ── */ #hugewrapper, #bigcontainer, #container, #main, #content, #sidebar { width: auto !important; max-width: 100%; box-sizing: border-box; } #content, #sidebar { float: none !important; margin: 0 !important; } #sidebar { margin-top: 12px !important; } /* 好友頁是流動寬 + 左欄固定 360／右邊 margin-left:375，窄螢幕會疊在一起 */ #friendListDiv, #num_friends { margin-left: 0 !important; } #header, #boxProfile { width: auto !important; float: none !important; } /* ── 3. 相簿與名片是真的
排版 ────────────────────────────── * 相簿頁整頁是
、名片是
， * 這種寫死的寬度在窄螢幕會直接把頁面撐爆（uicheck 在 375px 量到三個 700px 的表格）。 * 不硬拆表格結構——那會動到 1:1 的骨架、還原度會掉。 * 改成讓表格自己縮，欄位由內容決定。 */ table[width], table { max-width: 100% !important; width: auto !important; table-layout: auto; } /* 縮圖列那種一排五格的，改成可以換行 */ /* 廣告版位的內層寫死 700px（wretch2012-album-in.css §1，為了讓站方公告 那三排字有真的高度可站）。窄螢幕下它會把外層那張
一起撐回 700——`table{width:auto!important}` 也擋不住， 因為表格的 min-content 就是被這個子元素決定的。 */ td#ad_banner .w2-ad-in, td#ad_word .w2-ad-in { width: auto !important; max-width: 100% !important; } #ad_square, #ad_square tbody, #ad_square tr { display: block; } #ad_square td { display: inline-block; width: auto !important; } /* ── 4. kukubar 上下兩條固定列 ──────────────────────────────────── */ #kukubar-upper, #kukubar-lower { width: auto !important; max-width: 100%; } /* ⚠ 這一條原本是 `#kukubar-upper .right-side { display:none }`——整個右半邊 一起藏掉。但**登入／登出／我的小站那個選單就在裡面**（#wretch-login）， 所以在 999px 以下的螢幕上，站上根本沒有任何一個地方可以登入或登出。 手機使用者連進來就卡在訪客狀態，這是純粹的功能消失，不是版面問題， 所以 rwdprobe（量橫向溢出）與 uicheck（量跑版）都不會叫。 要藏的只有頁首那個搜尋框（它 300px 寬，窄螢幕塞不下，而且每一頁 都另外有搜尋入口）。帳號選單與 Yahoo! 那顆留著。 底列的 .right-side 是廣告輪播與三個服務下拉，照舊整塊藏。 */ #kukubar-upper #wretch-search { display: none; } #kukubar-lower .right-side { display: none; } /* 留下來的那兩塊要能在窄螢幕排得下 */ #kukubar-upper .right-side { float: none; position: absolute; right: 4px; top: 0; display: flex; align-items: center; gap: 6px; } #kukubar-upper #wretch-login .dropdown { right: 0; left: auto; } /* ── 5. 表單：輸入框不要頂出容器 ─────────────────────────────────── */ input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], textarea, select { max-width: 100%; box-sizing: border-box; } /* ── 9. 窄螢幕下「容器高度沒跟著長」造成的重疊 ────────────────── * 這一類的症狀是「連結看得到卻按不到」，不是跑版， * uicheck 量不到（沒有橫向溢出），要用 tools/clickcheck.mjs 才抓得出來。 */ /* 導覽列六顆在窄螢幕會換成兩排，但 #wfp-navigation 的高度還是原本一排的 36px， 第二排（揪團／嘀咕／手機）就整排掉到 #wfp-cover 底下被蓋住、按不到。 */ #wfp-navigation, #wfp-navigation nav, #wfp-navigation nav ul, #wfp-universal-header, #wfp-universal-header header { height: auto !important; } /* 相簿總站：搜尋列在原版是絕對定位在 80px 高的 #header 裡。 上面第 1-B 節把它改回正常流之後它變成 691px 高， 卻還擠在只有 80px 的 #header 裡——溢出來的部分蓋住底下整個左欄與中欄， 33 條連結全部按不到。#header 要跟著內容長。 只挑 #container1／#container2 底下的，個人小站那些 #header 不受影響 （那邊的 #header 是有底圖的招牌，放開高度會塌）。 */ #container1 #header, #container2 #header { height: auto !important; } /* 相簿總站左欄的兩塊（.services_link 的服務連結、.sideII 的 Hot/New 頁籤） 在窄螢幕會上下疊在一起，「Hot」只剩下緣幾像素點得到。 兩塊都讓它們回到正常流、高度跟著內容長。 */ #container1 .services_link, #container1 .services_link ul, #container1 .sideII, #container1 .sideII ul, #container1 .left_column dl, #container1 .left_column dd { height: auto !important; position: static !important; float: none !important; } /* 頁首那條「目前共 N 位站友…」是 position:absolute; top:10px; left:45% （head2012.ejs 照原版寫的）。970px 寬時它落在頁首正中間的空白處， 窄螢幕下 45% 只剩 169px，整條就壓在右上角的「Yahoo!奇摩」「服務說明」上， 那兩個連結變成按不到。改回正常流，讓它自己排一行。 */ #wfp-universal-header .hd ul li a[href="/rank"] { position: static !important; left: auto !important; top: auto !important; display: block; text-align: center; } /* 站友卡：大頭貼的連結是絕對定位、鋪滿整張卡，窄螢幕下會蓋住底下的 站名與名片連結。讓它回到正常流，三個連結就各自佔一塊。 */ #wfp-celebrity li a.image, #wfp-celebrity li .thumb a, #wfp-celebrity li > a:first-child { position: static !important; } /* 熱門相簿的格子：說明條 .panel 是 position:absolute; bottom:0 疊在照片上， 格子本身寫死高度。窄螢幕下照片被縮放、格子高度沒跟著變， 說明條裡的站名與名片連結就落在照片的框裡被蓋住、按不到。 讓格子跟著內容長、說明條回到正常流排在照片下面。 */ #wfp-featured .featured-photos li { height: auto !important; } #wfp-featured .featured-photos li .panel { position: static !important; } /* 首頁側欄的站方公告區：.annoad3 寫死 height:60px（原版是三個 85px 的廣告位）， 我們塞的是真的公告內容，窄螢幕下文字會換行、撐破那 60px， 於是公告清單壓在上面那排連結上，兩邊都按不到。讓它跟著內容長。 */ /* ⚠ overflow 要維持 hidden：那不是為了裁切，是為了**包住裡面的浮動框** （三個 85px 的格子是 float）。改成 visible 會讓容器高度塌成 0， 底下的公告清單整個往上疊、兩邊的連結都按不到——我自己踩過這一步。 只放開高度就好。 */ #wfp-announcement, #wfp-announcement .annoad3 { height: auto !important; overflow: hidden; } /* 公告區三格縮圖：原版 ，但第 0 節那條 `img{height:auto}`（防止照片頂出容器）把高度改成依比例算， 寬螢幕的封面圖變成 85×30，格子高度對不上，連結的行框被擠到 父層外面、落進下面的公告清單裡，兩邊都點不到。 這三張是版位縮圖不是內容照片，維持原版尺寸就好。 */ #wfp-announcement .annoad3 p { height: auto !important; } #wfp-announcement .annoad3 img { height: 60px !important; object-fit: cover; } /* ── 6. 第二輪：uicheck 在 375px 量出來、上面沒蓋到的寫死寬度 ──── * 這一批的共同點：選擇器比第 1 節那批更深（例如 `#wfp-cover .tack .title`）， * 所以 `.title{width:auto!important}` 贏不過它。 * 每一條都是 tools/rwdprobe.mjs 實際量出來的元兇，不是猜的。 */ /* 首頁：今日主題標題、站內搜尋、混合區雙欄、知名站友卡 */ #wfp-cover .title, #wfp-cover .tack .title, #wfp-hybrid .main-content, #wfp-hybrid .sub-content, #wfp-inner-search fieldset, #wfp-inner-search .search-input, #wfp-inner-search span, #wfp-inner-search input, #wfp-celebrity li, #wfp-celebrity li header, #wfp-celebrity li hgroup, #wfp-celebrity li p { width: auto !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } /* 雙欄與站友卡原本是 float 並排，縮寬之後要改直向堆疊 */ #wfp-hybrid .main-content, #wfp-hybrid .sub-content, #wfp-inner-search .search-input, #wfp-inner-search span, #wfp-celebrity li { float: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* 頁尾 RSS 列：.inner 是 inline-block 寫死 500px，全站每一頁都有 */ #wfp-footer .inner, #rss-bar .inner, #wfp-universal-footer .inner { width: auto !important; max-width: 100% !important; display: block !important; box-sizing: border-box; } /* 相簿／網誌頁的訂閱面板（#footer-subscription 的 ul 寫死 370px）。 ⚠ 只放寬**裡面**的寬度，不要動 #footer-subscription 自己的 float—— 它跟 #footer-feedback 在 kukubar 下方那條同一排並排， 把它的 float 拿掉會讓它從 x=0 重新起算，**整個蓋住「我有建議」** （tools/clickcheck.mjs 在 375px 量到十幾頁都中這一條）。 */ #footer-subscription, #footer-subscription .hd, #footer-subscription ul, #footer-subscription li { width: auto !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } #footer-subscription ul, #footer-subscription li { float: none !important; } /* 頁尾的中文／English 切換是 position:absolute（原站 970px 固定寬時， 它剛好落在頁尾的空白處）。窄螢幕頁尾整個重排之後，它會壓在頁尾連結上， 「中文」點下去其實是按到底下那條連結。改回正常流。 */ #wfp-lang { position: static !important; top: auto !important; margin: 6px 0; } #wfp-lang ul { float: none !important; display: inline-block; } /* 個人小站（myspace 版型）：#header h1 是 658px 的招牌圖、#mainSection 寫死 604px。 這兩個是留言板／收藏／訪客／首頁四頁在 768 與 375 溢出的元兇。 */ #bigcontainer #header, #bigcontainer #header h1, #mainSection, #mainSection .hd, #subSection { width: auto !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } #bigcontainer #header h1 { background-size: contain; overflow: hidden; } /* 今日主題的標題用 padding-left:439px 把文字推到底圖右側。 box-sizing:border-box 之下，padding 比容器還寬就會把盒子撐回 439px—— width:auto 蓋不掉 padding，要連 padding 一起歸零。 */ #wfp-cover .stack .title { padding-left: 0 !important; text-align: left !important; } /* myspace 版型的招牌是 position:relative + left:300px（讓開左側的頭像）。 窄螢幕堆疊之後那 300px 位移就是整頁右溢的來源。 */ #bigcontainer #header h1 { left: 0 !important; } /* ── 7. 第三輪：BFC 縮排、寫死位移、剩下的固定寬欄 ──────────────── * 這三種在寬螢幕都看不出來，一縮窄就現形。 */ /* 首頁「精選」模組：.hd 裡的 tabs 是 float，窄螢幕換行之後會往下長； .bd 有 overflow:hidden ＝ 自成 BFC，BFC 會**主動避開浮動框**， 於是整個 .bd 被擠成 168px 寬、右移 191px。清掉浮動就好。 */ /* .hd 高度寫死（原版頁籤只有一排）。窄螢幕頁籤換行長高之後， 多出來的部分整個壓在 .bd 的文章連結上。高度要跟著內容長。 */ #wfp-hybrid .hd, #wfp-hybrid .tabs, #wfp-hybrid .tabs-list, #wfp-hybrid .tabs-cell { height: auto !important; } #wfp-hybrid .hd { display: flow-root; } #wfp-hybrid .bd { clear: both !important; height: auto !important; } /* 混合區頁籤的說明面板（.tabs-content）是 absolute，定位在頁籤格裡。 970px 時它剛好落在頁籤列自己的範圍內；窄螢幕頁籤換行之後， 它會往下蓋住 .bd 裡的文章連結。改回正常流，跟著頁籤排。 */ #wfp-hybrid .tabs .tabs-content { position: static !important; } /* myspace 版型的頁籤帶：`ul#main_tab` 是 position:absolute， 靠 `a.message`（message.gif 120×39，高 55px）撐出帶子的高度， 而 a.message 自己用 relative + left:470px 挪到右邊（見 partials/gbtop.ejs 檔頭）。 窄螢幕只把 left 歸零的話，a.message 會**整個壓在頁籤上**—— 實測「MyPage」「誰來我家」「留言板」點下去都是按到它。 兩個一起改回正常流，讓頁籤在上、按鈕在下。 */ #bigcontainer ul#main_tab { position: static !important; width: auto !important; display: flex; flex-wrap: wrap; } #bigcontainer ul#main_tab li { float: none !important; } #bigcontainer a.message, #bigcontainer #header a[class*="msg"] { position: static !important; left: 0 !important; margin-left: 0 !important; display: block; clear: both; } /* 留言板的留言區寫死 604px 並且 float */ #msg_list, #msg_list_area, #comment_list { width: auto !important; max-width: 100% !important; float: none !important; box-sizing: border-box; } /* 分頁列用 margin-left 推到右欄底下（好友頁是 375px），堆疊後要歸零 */ [id^="pagelink"], .pagelink, #pagelink { margin-left: 0 !important; } /* 熱門相簿格子上那層半透明說明條寫死 298px（原本一格就是 298 寬）。 格子縮小之後它還是 298，就從格子右緣戳出去。 */ #wfp-featured .featured-photos li .panel { width: auto !important; max-width: 100% !important; left: 0 !important; right: 0 !important; box-sizing: border-box; } /* 今日主題那三張照片的說明條是 ::after 偽元素、寫死 408px。 偽元素量不到「超寬元素」清單裡（那支只走真實節點）， 是用 tools/_scan.mjs 掃 scrollWidth 才抓到的。 */ #wfp-cover .stack .block::after, #wfp-cover .stack .gallery::after { width: 100% !important; max-width: 100% !important; left: 0 !important; box-sizing: border-box; } #wfp-cover .stack .gallery { width: auto !important; max-width: 100%; } /* ── 10. 手指按得到：清單與導覽類的連結加高 ───────────────────────── * 手指的接觸面積大約 44×44 CSS px（Apple 的人機介面指南與 WCAG 2.5.5 * 都是這個數字）。原站是 2012 年的桌機站，滿滿都是 12～14px 高的小字 * 連結，直接搬到手機上會一直按錯、按到旁邊那一顆。 * * **只加高「清單項目與導覽」類的連結**，不碰內文。 * 段落裡的連結長高會把行距撐開、整段文字變得七零八落，那比小一點更糟； * 而且內文連結本來就是靠上下文閱讀的，不是拿來戳的。 * * 用 padding 而不是 min-height：min-height 對 inline 元素無效， * 而這些連結大多是 inline。padding 上下各 10px 讓 14px 的字變成 34px、左右各 6px 讓「影音」這種 * 兩個字的連結也有 38px 寬，加上 li 本身的間距就接近 44px 的可觸區。 */ #kukubar-upper .bar-link, #kukubar-lower .bar-link, #kukubar-upper .dropdown a, #kukubar-lower .dropdown a, ul.nav li a, .w2-ranklist li a, .w2-bloglist h3 a, .w2-albumgrid li a.t, .w2-more a, .w2-search-scope a, .side .bd ul li a, .mod .bd > ul > li > a, .pagination a, .page a, #pager a, /* 頁尾那三排（服務連結、RSS、語言）與所有分頁列 */ #lower-wrapper li a, #footer li a, .page_control a, /* 送出鈕：搜尋那顆只有 24px 高 */ /* 相簿總站自己那排頁首連結（ul#access_link）與首頁的日曆／小工具 */ #access_link li a, #service_link a, /* 首頁的日期軸（#wfp-archive-calendar 那一排日子與前後翻頁） */ #wfp-archive-calendar li a, #wfp-archive-forward, #wfp-archive-back, #wfp-archive-today, /* 首頁其餘自己的工具列（wfp-* 是原站首頁的前綴） */ [id^="wfp-"] a, #service_list a, /* 相簿總站的熱門關鍵字與左欄分類 */ #Hot_Keyword a, #browse_album li a, .sideII li a, /* 相簿總站每一格底下的「帳號／相簿名」兩行字 */ .grid > a, .grid strong a, /* 相簿總站自己那套分頁（#pagination_album 之類） */ [id^="pagination"] a, .pagination_album a, /* 站台頁自己那套分頁列 */ .w2-pager a, input[type=submit], input[type=button], button { /* 這幾條要 !important：版型那邊有 #header .nav li a 這種 ID 選擇器把 padding 歸零，特異性比這裡高。本檔是版面的最後一層，用 !important 是這支檔案既有的作法（見檔頭說明）。 */ display: inline-block !important; padding: 10px 6px !important; line-height: 1.4; } /* 按鈕另外補 min-height：版型把送出鈕的 height 寫死成 24px， 只加 padding 撐不開。 */ input[type=submit], input[type=button], button { min-height: 34px !important; } /* 分頁的個位數數字天生就窄（22px）。WCAG 2.5.8 的最小值是 24×24， 補一個 min-width 並置中，不動它的高度。 */ .page_control a, [id^="pagination"] a, .w2-pager a, .pagination a { min-width: 24px; text-align: center; } /* ⚠ 相簿搜尋那顆送出鈕是背景圖精靈（原站 122×24 的圖）。 套上上面那條 inline-block + padding 之後寬度塌成 12px—— 加大可觸區反而把按鈕弄不見了。它單獨處理：不加 padding，只長高。 */ #search_submit { padding: 0 !important; min-width: 110px !important; } /* 版型把送出鈕釘在 left:360px 的絕對位置（桌機那塊橫幅的右端）。 375px 螢幕上它會壓在頁籤與關鍵字上面。拉回文件流排在輸入框旁邊。 */ .search_control #search_submit { position: static !important; left: auto !important; margin-left: 6px; } .search_control { height: auto !important; padding-left: 0 !important; } /* 相簿格子：版型寫死 .grid{height:108px;overflow:hidden} 與 .grid span,.grid strong{height:14px}。手機上一格變窄、標題折成兩行， 14px 的框就把第二行切掉（畫面上是「市場採買」只剩上半截）。 */ .grid { height: auto !important; overflow: visible !important; width: auto !important; } .grid span, .grid strong { height: auto !important; width: auto !important; overflow: visible !important; } /* 外面那一格也寫死 height:160px;overflow:hidden。標題折行之後 一樣會被切掉，要一起放開。 */ .album_list li { height: auto !important; overflow: visible !important; } /* 服務列表那塊是繁／簡／英三份並排（原站的 dl#navigation）， 375px 排不下，第三份會被切掉一半。改成折行。 */ /* dl#navigation 那四顆服務鈕是**一張精靈圖**（sprite_fplink.png） 用 background-position 切出來的，每一顆的座標都寫死。 所以它不能套上面那條觸控放大（padding 會把座標整個錯開，畫面上 就是三塊橘色互相疊在一起）。這裡只做兩件事：拉回文件流， 以及排不下時讓它自己橫向捲動，不要被裁掉。 */ #navigation { height: auto !important; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; } #navigation dd { float: none !important; display: inline-block; vertical-align: top; } /* 相簿與照片的縮圖連結：把整張圖當可觸區，本來就夠大，只要確保 連結不是塌成 0 高度的 inline 盒子（圖片浮動時會發生）。 */ .w2-albumgrid li > a, .w2-grid li > a, a.thumbnail { display: inline-block; } /* ── 11. 相簿總站的頁首搜尋區（/albums）─────────────────────────────── * ⚠ 這一頁在手機上原本是**壞的**，而且壞得很難發現： * rwdprobe 只量橫向溢出，量不到「內容被推到看不見的地方」。 * * 版型把搜尋表單寫成 * #searchForm { width:500px; position:absolute; left:205px; top:6px } * 375px 的螢幕上這一塊被推到畫面外，寬度算出來是 0，於是 * #Hot_Keyword（那排「國內旅遊、國外旅遊…」）每個字都自己換一行—— * 實測 0px 寬 × 721px 高，把底下的相簿清單整個推到 y=2200 以下。 * 使用者看到的就是「開頁面 → 一片空白 → 一張相簿都沒有」。 * * 手機上把它拉回正常文件流，讓關鍵字自己橫向折行。 */ #searchForm { position: static !important; width: auto !important; height: auto !important; left: auto !important; top: auto !important; margin: 6px 8px; } /* fieldset 在 Chrome 有 min-inline-size:min-content 的預設行為， width:auto 在這個版型下算出來是 0——整塊搜尋區塌成一條 543px 高的 直線。要寫死 100% 才撐得開。 */ #searchForm fieldset { width: 100% !important; float: none !important; position: static !important; min-inline-size: 0; } #search_tab { width: auto !important; height: auto !important; overflow: visible !important; } #search_tab label { display: inline-block; margin-right: 4px; } #Hot_Keyword { width: 100% !important; height: auto !important; /* 原本的字色 #fce070 是配那張橘色橫幅背景圖的。窄螢幕下背景圖 蓋不到這裡，淺黃字印在白底上等於看不見。 */ color: #b35900; line-height: 1.8; word-break: keep-all; } #Hot_Keyword a { white-space: nowrap; color: #c30 !important; } .search_control { width: auto !important; } .search_control input[type=text] { width: 60% !important; } /* 手機上先看相簿，篩選條件放後面。 左欄 #browse_album 是 Conditions／Categories／Locations 三組共 30 幾項， 在 375px 下堆成 1317px 高——使用者要滑過三個半螢幕才看得到第一張相簿， 體感就是「這頁是空的」。用 flex 的 order 換順序，DOM 不動 （桌機版完全不受影響，那邊是三欄浮動排版）。 */ #main2 { display: flex; flex-direction: column; } /* #navigation（服務列表那塊橘色方塊）是絕對定位，窄螢幕會壓在 「Hot > All」標題上面。拉回文件流。 */ #navigation { position: static !important; width: auto !important; } #main2 > #navigation { order: 1; } #main2 > #main_content { order: 2; } #main2 > #browse_album { order: 3; } /* 篩選那三組在手機上橫向折行，不要一項一行 */ #browse_album > li { width: auto !important; float: none !important; } #browse_album .sideII ul { display: flex; flex-wrap: wrap; } #browse_album .sideII li { width: auto !important; float: none !important; } /* 頁首那塊背景圖是 970px 寬的橫幅，窄螢幕下不要撐出捲軸 */ #header #searchForm { background-size: contain; } } /* 真正的窄螢幕（手機直立）再收一次 */ @media (max-width: 599px) { /* 見上面：橫向排列在手機直立會跟 .services_link 疊在一起 */ #browse_album > li { display: block; margin-right: 0; } /* 導覽列六顆擠成兩排 */ nav li a, #nav li a { padding-left: 8px; padding-right: 8px; font-size: 12px; } /* 相簿縮圖格：原本一排五格 120px，手機改一排兩格 */ #ad_square td, .grid, .gridclass { display: inline-block; width: 46% !important; } /* 好友卡 110×155 一排兩張 */ #friendListDiv ol li { width: 46% !important; margin-right: 2% !important; } /* 名片那種「欄位:值」兩欄表，窄螢幕改成上下 */ .w2-card td.sidetitle, .w2-card td.side { display: block; width: auto !important; text-align: left; } } /* 把帳號選單救回來之後，頁首那條 30px 高的列變成三塊搶位子： logo ＋ 服務下拉 ＋ #infozone（公告／今日主題）＋ 帳號選單。 375px 下 #infozone 會被絕對定位的帳號選單壓在底下，兩段字疊成一團。 公告在每一頁的「站內導覽」區塊已經有一份完整的，這裡不重複印。 */ #kukubar-upper #infozone { display: none; }