有點給他... 痞客邦部落格手機模式 @ 傑克! 真是太神奇了!

前二天心裡有個念頭突然閃過, 於是用手機看了一下自己在部落格的 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; } 同時又把 margin 和 padding 都設成 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>...) 字型大小也都被改了 :(