作者: Monkianer

修復 ExFat 硬碟在不正常移除後，無法再被讀取

Monkianer

先使用

diskutil list

列出所有硬碟，這時候應該會在 list 中看到無法讀取的硬碟。
!! 如果硬碟沒有被列出此辦法不適用 !!
然後使用 diskutil unmountDisk “/dev/disk2″(為 list 列出的代碼)，依照下方指令依序進行。

diskutil unmountDisk /dev/disk2
diskutil eject /dev/disk2

移除硬碟然後重插。

正常來說將會回復原本的使用。

CSS 小貼士彙整

Monkianer

Prevent auto zoom in iOS textfield

iOS 會將字型小於 16px 的 input field 強制放大，最快的方式是設定 input 為 font-size:16px 。

https://codepen.io/jakob-e/pen/yakBwJ?editors=1100

隱藏 Chrome 裡長按出現的藍色底色

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;

隱藏 Chrome Focus 藍色外框

:focus {
    outline:0;
}

Removing The Dotted Outline

a {
    outline: none;
}

a:hover, a:active, a:focus {
    outline: none;
}

https://css-tricks.com/removing-the-dotted-outline/

停用選取文字

See the Pen user-select demo by iAN (@wuthula) on CodePen.

使用 CSS 將文字變為無法選取

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome all / Safari all */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox all */
    -ms-user-select: none;       /* IE 10+ */
    user-select: none;           /* 尚未普遍支援，期待未來 */
}

可以選取，但是隱藏 Highlight

.disable-highlight::-moz-selection,
.disable-highlight::selection {
  background:none;
  color:none; 
}

::-moz-selection,
::selection {
  background:none;
  color:none; 
}

參考連結：
https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
https://css-tricks.com/almanac/properties/u/user-select/

Google Analytics 分析筆記

Monkianer

離開率/跳出率

若要瞭解某個網頁「離開率」與「跳出率」的不同，請記住以下幾點：

  1. 對網頁的所有瀏覽量來說，「離開率」是網頁成為工作階段中「最後」的百分比。
  2. 對由這個網頁開始的所有工作階段來說，「跳出率」是網頁成為工作階段「唯一」的百分比值。
  3. 網頁的「跳出率」是僅根據由同一個網頁開始的工作階段數計算而得的。

出處：https://support.google.com/analytics/answer/1009409?hl=zh-Hant&ref_topic=6156780

單頁式網站如何設定會降低跳出率呢?

可以使用 pageview 在單頁式網站裡做 page view 的切換。

例如你的單頁式網站有三個單元 intro, product, contact ，你一樣可以在使用者捲軸滾到的位置觸發 GA 的 pageview，使跳出率降低。

網站速度為零的可能原因

  1. 網站速度的取樣率為全部資料的 1% 。所以在瀏覽量低的時候，數值有可能為 0 。請耐心等待。

iframe 如何跟著 RWD 網站縮放

Monkianer

這個方法對與 iframe embed 的物件通通有效 (ex: Youtube……)

原理是使用 .google-maps 裡的 padding-bottom (或 padding-top 也可以) 屬性將 iframe 撐開，這裡使用 75% 是因為 iframe 起始值的 width 為 600 而 height 為 450，所以 height 永遠為 width 的 0.75 。

<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

See the Pen Responsive Embed iframe by Monkianer (@monkianer) on CodePen.

當然因為這裡只是使用 CSS  來縮放，所以沒有辦法使地圖縮放後保持在原本的中心。如果要的話需要使用 google maps 的 API 才行，不過當然如果你使用了 Javascript 來控制地圖的話，你也可以乾脆使用 JS 來縮放你的地圖並保持在地圖的中心。