Mobile Web #1 – html tags for mobile

在 Mobile 裝置上面跟一般瀏覽器在讀取標籤方面會有一些小小的不一樣,

Viewport

<meta name="viewport" content="width=240, height=320, user-scalable=yes,
initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />

設定放大縮小倍率,行動裝置上通常都可以放大縮小網頁,避免有些網頁在行動裝置上面看字會太小的貼心設計,不過假設你的 Web App 是專門為了行動裝置設計的,反而有可能會讓操作不順手或是破壞版面,這時候就可以藉由 Viewport 來做限制。

width 裝置寬度,或著用 width=device-width 設定為裝置寬度
height 裝置高度,或著用 width=device-width 設定為裝置高度
user-scalable 可被放大縮小
initial-scale 初始放大倍率
maximum-scale 最大放大倍率
minimum-scale 最小放大倍率

href=tel

<a href="tel:0912345678">聯絡我們</a>

可以讓手機自動撥出電話

href=sms

<a href="sms:0912345678">

讓手機傳簡訊

input type=date

<input type="date">

當 focus 在這個輸入框的時候會有日期選擇器出現,目前似乎只有 ios5 safari 支援

Reference

Mobile META Tags

Using mobile-specific HTML, CSS, and JavaScript (Mobile web part 5)

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *