香港行山地圖 (網站) 手機版

[anti-both]

自 從 Google 在 2015 年 年 初 公 佈 了 「行 動 裝 置 相 容 性 更 新 」，很 多 網 站 都 更 新 了 自 家 的 手 機 版 網 站 ，以 迎 合 Google 的 要 求 。那 個 「行 動 裝 置 相 容 性 更 新 」究 竟 是 什 麼 呢 ？那 就 是 當 你 用 行 動 裝 置 ( 手 機 、平 板 ) 在 Google 搜 尋 的 時 候 ，Google 會 自 動 發 給 你 mobile-friendly 的 結 果 。於 是 ，你 在 手 機 瀏 覽 結 果 時 就 會 有 更 佳 的 享 受 。

http://googlewebmaster-tcn.blogspot.hk/2015/04/google.html

而 如 果 你 的 網 站 並 不 是 mobile-friendly 的 話 ，那 Google 就 會 在 行 動 裝 置 搜 尋 的 時 候 把 你 的 網 站 的 排 名 下 降 ，以 降 低 你 的 曝 光 率 。據 說 現 時 有 一 半 的 網 上 瀏 覽 都 是 發 生 在 手 機 上 的 ，所 以 沒 有 一 個 mobile-friendly 的 網 站 實 在 是 很 蝕 底 。

於 是 筆 者 就 趁 這 個 機 會 改 寫 了 一 個 行 動 版 的 網 頁 。要 把 網 頁 快 速 地 變 為 手 機 版 ，沒 有 比 jQuery Mobile 更 簡 單 好 用 的 方 法 了 。

https://jquerymobile.com/

如 果 你 用 手 機 或 平 板 打 開 「香 港 行 山 地 圖 」網 站 ，你 就 會 自 動 去 到 手 機 版 。

香 港 行 山 地 圖 網 站

在 Header 的 左 邊 是 「路 線 」按 鈕 ，按 一 下 就 會 打 開 左 邊 的 Panel。

「路 線 」按 鈕

所 有 行 山 路 線 都 會 在 這 裡 找 得 到 。

行 山 路 線

點 選 了 想 看 的 路 線 ，它 就 會 在 地 圖 上 展 示 出 來 。

紅 梅 谷 自 然 教 育 徑

跟 桌 面 版 的 網 頁 一 樣 ，綠 色 的 就 是 主 要 路 線 ，黃 色 的 就 是 起 點 和 終 點 的 交 通 資 訊 。

交 通 資 訊

手 機 版 也 一 樣 有 標 示 最 近 的 公 共 交 通 ，例 如 巴 士 站 ，小 巴 站 之 類 。

路 線 名 稱

在 Footer 就 是 路 線 名 稱 ，如 果 點 選 一 下 ，就 會 打 開 right panel。

路 線 資 訊

Right panel 就 是 該 條 路 線 的 資 料 和 簡 介 。

「設 定 」按 鈕

Header 的 另 一 邊 就 是 「設 定 」按 鈕 。

營 地 和 山 峰

這 裡 可 以 設 定 「露 營 地 點 」和 「香 港 山 峰 」顯 示 與 否 。

「定 位 」按 鈕

最 後 ，因 為 這 是 手 機 版 網 頁 ，所 以 加 入 了 「定 位 」功 能 。大 家 只 要 按 一 下 定 位 按 鈕 ，地 圖 上 就 會 標 示 出 你 所 在 的 位 置 。

Android Share Location

不 過 ，如 果 大 家 想 使 用 定 位 功 能 ，你 必 須 要 在 browser 設 定 share location，不 然 程 式 就 無 法 獲 取 你 的 位 置 了 。而 且 大 家 盡 可 以 安 心 使 用 ，因 為 這 個 定 位 是 使 用 javascript 直 接 在 手 機 上 進 行 的 ( navigator.geolocation )，是 完 全 不 會 有 任 何 資 訊 傳 送 到 我 們 的 伺 服 器 的 。

如 果 大 家 有 興 趣 檢 查 一 下 自 己 的 網 站 是 否 mobile-friendly ( 只 對 於 Google 來 說 )，大 家 可 以 使 用 Google 的 行 動 裝 置 相 容 性 測 試 網 頁 。

https://www.google.com/webmasters/tools/mobile-friendly/

最 後 ，別 介 意 老 人 多 說 幾 句 ，大 家 行 山 必 須 要 帶 備 政 府 出 版 的 行 山 地 圖 。千 萬 別 只 用 手 機 的 網 上 地 圖 去 行 山 呀 。

張先生，男性，肖龍。
職業：I.T. Consultant
簡介：不好好讀書；七尺差五寸，手長過膝，雙耳垂肩；性寬和，寡言語，喜怒不形於色。據說少時曾斬白蛇於鳳凰山下……