前二天心裡有個念頭突然閃過, 於是用手機看了一下自己在部落格的 PO 文.

結果... 昏倒... 手機模式的 CSS Style 設定都沒有出現.

於是寫信給 客服, 客服的回信倒是蠻快的 :)

可是, 回信內容卻是令人十分的不滿意, 就只說 手機模式目前不能自定 CSS Style, 也沒有設定檔可以加. :(

意思是我大概要暫時把自己寫的 PO 文, 掃過一遍, 把自訂的 CSS 設定貼進去...

Update 2015/07/24


OK, 試成功了.

  • 原來是手機版少了一層 <div class="article-content">, 但是最裡面的 <div class="atticle-content-inner"> 還在.
  • 但是 "手機模式" 不是用原先的 "自訂樣式" 的檔案, 所以必需在文章中加 <style></style> 把 CSS Style 帶在自己身上了.

所以我就把 PO 文中用到的 CSS Style 由 "部落格" "自訂樣式" 中拷貝出來, 再把 selector 部份由 .article-content 改為 .atticle-content-inner 開頭, 貼在 PO 文中就好了.

<style type="text/css"><!--
.article-content-inner { margin: 5px; font-size:12pt; line-height: 140%; letter-spacing:0.05em; color:#444; }
.article-content-inner table { border:2px solid black; border-spacing:1px }
.article-content-inner caption { text-align:left; white-space:nowrap; font-weight: bold; }
.article-content-inner th { border:1px solid black; padding: 2px; font-weight:bold; text-align:center; color:white; background-color:gray; }
.article-content-inner td { border:1px solid gray; padding: 3px; }
.article-content-inner div {margin: 0px 1px ; padding:1px 0px; }
.article-content-inner div.code0 {font-weight:bold; font-family: Consolas, Courier New; font-size:11pt; background-color:#F0F0F0; padding: 0px 4px; overflow:auto;}
.article-content-inner code {font-weight:bold; font-family: Consolas, Courier New; }
.article-content-inner var {font-weight:bold; font-family: Consolas, Courier New; border: 1px solid #E0E0E0; background-color:#F8F8F8; padding: 1px 4px;}
.article-content-inner a {color:#222; border-bottom:1px dashed #91b8c1; padding-bottom:1px; }
--></style>

由於 HTML5 <style scoped>scoped keyword 支援度不佳, 所以目前只能在每一條設定的前面都加 .article-content-inner, 好煩啊!

還有二個在 iphone 上試不出來

  • <ul>, <ol>: 符號 show 不出來
  • <sub>, <sup>: 可以改顏色, 但是字體大小改不了, 也沒上下標的效果

Update 2015/07/28


OK, <ul> 和 <ol> 測試出來了.

不見的原因有以下幾個:

  • 痞客邦 部落格 的 手機模式 和 完整模式一樣都把 <ul><li> 的 CSS 設成 { list-style: none; } 同時又把 marginpadding 都設成 0px
  • 自己設計網頁時要小心不要這樣子設定, 因為無法回復 browser 原先的設定, 只能一種狀況一種狀況自己再改回去 :(
    • 第一層 (和第一層以後的) 是 ul li {...}ol li {...}
    • 第二層 (和第二層以後的) 是 ul ul li {...}ol ul li {} (依其上層和自己決定)
    • 第三層 (和第三層以後的) 是 ul ul ul li {...}
  • 左邊的空白要用 margin-left, 不是用 padding-left, margin-left 要記得調, 不然也是看不到
  • list-style: xx outside/inside; 是指符號部份的凸出或內縮

List Style

下面的 ol, ul 和 li 設定可以在 PC (IE, Chrome) 以及 iPhone (Safari, Chrome) 上 '手機模式' 及 ' 完整模式' 正確顯示列表元素.

<style type="text/css">
.article-content-inner ol,
.article-content-inner ul { position: relative; padding: 0px; margin-left: 20px; }
.article-content-inner li { position: relative; padding: 0px; margin-left: 0px; }
.article-content-inner ul li { list-style: square; }
.article-content-inner ul ul li { list-style: disc; }
.article-content-inner ul ul ul li { list-style: circle; }
.article-content-inner ol li { list-style: decimal; }
</style>

注意: ol li 的設定要寫在 所有 ul li, ul ul li... 的後面, ol的顯示才不會被蓋掉

Update 2015/10/29


OK, <sup> 和 <sub> 測試出來了.

不見的原因有以下幾個:

  • 痞客邦 部落格 的 手機模式 把 <sup>, <sub> 的 CSS 設成 { vertical-align: baseline; }
  • 手機版有字體放大縮小功能, 同時設定了
    .zoom1.article-content-inner * { font-size:15px !important; line-height:20px !important; }
    .zoom2.article-content-inner * { font-size:18px !important; line-height:23px !important; }
    .zoom3.article-content-inner * { font-size:22px !important; line-height:26px !important; }
    
    三個 CSS style 來對應, 這三個 CSS style 把字型及行高設定成固定大小了.

修改方法: 在文章中加入下列的 css style

<style type="text/css">
.zoom1.article-content-inner sup,
.zoom2.article-content-inner sup,
.zoom3.article-content-inner sup { vertical-align: super !important; font-size:70% !important; }
.zoom1.article-content-inner sub,
.zoom2.article-content-inner sub,
.zoom3.article-content-inner sub { vertical-align: sub !important; font-size:70% !important; }
</style>

問題: 其他的 tab (例如: <h1>, <h2>, <table>...) 字型大小也都被改了 :(

Update 2019/01/10


手機版已經不會載入 PC 版面用的 CSS 了, 要載入自訂的手機版 CSS 請參看我的另一篇貼文關於 痞客邦 的廣告.

    MagicJackTing 發表在 痞客邦 留言(0) 人氣()