發表文章

目前顯示的是 七月, 2015的文章

使用 user agent 和 meta viewport 的目的和造成的影響

對行動瀏覽器和網頁的開發者來說,都希望提供最佳的使用者體驗, 不過彼此在意的事有點不同。 瀏覽器在意的事: 用 user agent 告知網站自己是什麼瀏覽器, 讓網站有機會提供最佳的內容。 也提供切換 user agent 的選項,若網站自動提供行動版網頁, 而使用者想看桌機版網頁時, 可換用桌機瀏覽器的 user agent 「騙」網站提供桌機版的網頁。 如果頁面有用 meta viewport 設定 layout width=device width, 表示網頁有針對 device width 作最佳化, 照著辦就是了。 承上, 不過若網頁沒作好, 比方說在頁面裡寫死某個元件寬度, 寫死寬度的元件仍會超出螢幕寬度, 看起來怪怪的。 若沒有設 layout width=device with, 表示網頁開發者沒有針對行動裝置作最佳化, 至少要用夠寬的 layout width (>螢幕寬度), 不然網頁內容會縮成一團無法閱讀 (就像在桌機將瀏覽器視窗縮到很窄一樣)。常見的實作寬度是 980px 或 1024px。 承上, 因為手機螢幕比 layout width 小, 載入完頁面後使用者無法一眼看到網頁全貌, 瀏覽器會自動縮小 (zoom out) 頁面以貼齊螢幕寬度。預期使用者可以先看見全貌, 找到有興趣的地方,再自行放大 (zoom in) 想看的部份。 網站開發者在意的事: 透過 user agent 得知使用者用什麼裝置和瀏覽器。粗略分成行動裝置和桌機 (PC 或筆電) 兩種。後者通常計算能力強、網路快、螢幕大,可提供豐富內容。另外提供前者客制化的網頁,以提供更好的使用體驗。 桌機網頁也可使用 Responsive Web Design (RWD), 讓大螢幕有更好的使用體驗 (但不會在意螢幕太小的表現)。不需使用 meta viewport (用了也會被桌機瀏覽器忽略)。layout width 由視窗寬度決定。 行動網頁必須使用 meta viewport 要求瀏覽器用 device width 作為 layout width, 不然瀏覽器會用 980px 或 1024px 排版, 結果是字縮得太小 [*1],使用者得放大縮小外加水平捲動觀看內容, 用起來不方便。最好使用 RWD 應付不同手機的不同寬度。不然就要用比較窄的寬度為基準來排…

iOS kCFErrorHTTPSProxyConnectionFailure 和 Android ERR_TUNNEL_CONNECTION_FAILED 的解法

iOS kCFErrorHTTPSProxyConnectionFailure (錯誤代碼 310) 的意思是 proxy 不允許 HTTPS 的連線,可能是 client 用 https 連往 443 以外的 port, 然後 proxy 設定不允許這樣的連線。解法是改在 443 port 執行用 https 的 web server, 或是 client 不要使用 proxy。 我用同樣的設定 (在 port 443 以外跑 https + client 用 proxy) 改測 Chrome on Android, 結果顯示的錯誤代碼是 ERR_TUNNEL_CONNECTION_FAILED, 也許這個代碼有用在其它情況。遇到的時候也可以看看是否和這有關。

Python, JavaScript, C++, Java 和 Unicode 以及 UTF-8 等編碼

基本觀念Unicode 是一張表,定義每個文字對應的數字是什麼,比方說 'A' 是 65, '我'是 25105。 UTF-8, UTF-16, UTF-32, UCS-2, UCS-4 等則是 Unicode 的各種編碼。所謂的編碼,是某種定好的儲存格式 (或說 serialization/deserialization format 也許比較好懂?), 方便讓不同的應用程式之間傳遞資料。 比方說應用程式 A 寫入文字到檔案裡,應用程式 B 從檔案讀出文字,兩者要說好用的編碼格式 (或能從資料辨別使用的編碼格式), 才有辦法互通資料。舉例來說, 網路傳輸常用 HTTP 作為溝通協定, HTTP 有提供 client 或 server 指定傳輸內容編碼的方法 (Accept-Charset 和 Content-Type), 可以指明是用 UTF-8 或其它編碼。 寫程式的時候,基本上是假設外部讀來的資料是某種 Unicode 編碼 (最常用 UTF-8 ), 內部使用 Unicode 處理,要傳出去 (寫入硬碟/網路傳輸) 前再轉回 Unicode 編碼。用 Unicode 的好處是,可以正確計算字串長度, 這影響到使用 length, index, 取出 substring, 比對 substring (包含 regexp) 等字串 API。 這裡有以前寫的介紹,有多提一點相關的事。 PythonPython 2 就有定義 type unicode 和 type str。type str 可看成一般性的 binary, 以 byte 為單位。Python 2 的字串 '...' 的型別是 str, 要特別用 u'...' 才會改用 unicode。 有了 type unicode, 處理 unicode 比較輕鬆: 外部讀進來的字 (UTF-8) 存在 type str, 馬上轉成 unicode 函式的輸入輸出都用 unicode (len(), [] 的行為正確) 要輸出到螢幕、檔案、網路時再轉成 UTF-8。 參考 All About Python and UnicodeUnicode in Python: Common Pitfalls 了解細節。 另外, Python 可…

從舊有的子目錄建立新的 git repository

如果要搬移的目錄在 repository 的最上層,可以用 git subtree。若是要搬的目錄是中間某層目錄 (例: a/b/c 的 c), 可以用 filter-branch。 筆記一下我操作成功的流程:1. 在 git server 上建立新的 headless repository git-host$ cd /path/to/repo && mkdir new_repo && cd new_repo && git init --bare 2. 在自己的機器上從原本的 repository filter 出要搬移的目錄。注意: 目錄內的內容會變成只剩目標目錄,我是 clone 一份新的來作。 myhost$ git clone ssh://path/to/old_repo myhost$ cd old_repo # Filter the master branch to path/to/folder and remove empty commits myhost$ git filter-branch --prune-empty --subdirectory-filter path/to/folder master Rewrite 48dc599c80e20527ed902928085e7861e6b3cbe6 (89/89) Ref 'refs/heads/master' was rewritten 3. 合併舊有的 git commits 到新的 git repository 並更新回 server myhost$ cd /path/to/somewhere myhost$ git clone ssh://path/to/new_repo myhost$ cd new_repo myhost$ git pull /path/to/old_repo # 取得剛才 filter 過的 old_repo myhost$ git push --set-upstream origin master myhost$ rm -rf /path/to/old_repo # 移除用不到的目錄