分類: CSS

電話號碼連結使用

Monkianer

基本使用方式

0800-080-090

<a href="tel:0800-080-090">0800-080-090</a>

服務電話

<a href="tel:0800-080-090">服務電話</a>

 

自訂樣式

跟其他的 <a> 一樣，你可以使用CSS

a {
  color: green;
  text-decoration: none;
}

來自定所有 <a> 的樣式，或是使用 pseudoe 選擇來只樣式化 tel: 的內容

a[href^="tel:"]{
  color: green;
  text-decoration: none;
}

 

不同瀏覽器對 tel: 的處理狀況

瀏覽器是否可以連結？連結動作
SafariYes詢問撥打電話
Chrome (OSX)Yes啟動程式詢問視窗跳出
Firefox (OSX)Yes啟動程式詢問視窗跳出
Safari (iOS)Yes詢問撥打電話
Line 內置瀏覽器 (iOS)Yes詢問撥打電話或傳送簡訊
Chrome (iOS)Yes詢問撥打電話

 

避免 iOS 自動偵測電話號碼

<meta name = "format-detection" content = "telephone=no">

參考至：

https://css-tricks.com/the-current-state-of-telephone-links/

在 iOS 網站當你點擊輸入框或下拉選項避免自動 zoom in

Monkianer

在 iOS safari 或 chrome 中當你要輸入文字時，文字框會自動 zoom in。

要避免這種情形可以使用以下 CSS，原因是 iOS 會強制將小於 16px 的 input 與 select 文字 zoom in 至 16px 大小，而預設的 input 以及 select 字體大小都為 11px ，所以你只要自行將 input 與 select 的字體大小指定為 16px 就好了。

以下 CSS 你可以全貼上，也可以選擇你需要的項目指定就好。
注意如果你有自行設定 input 和 select 其他字型大小(小於 16px 的) 你可以用 !important; 讓後續的 CSS 失效。

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

 

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/

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 來縮放你的地圖並保持在地圖的中心。