作家
字體：小 中 大 |
|
|
|
| 2014/06/04 16:24:58瀏覽530｜回應0｜推薦1 | |
| Responsive Web Design (響應式網頁設計)，第一個設計的要點就是viewport的設定。
網頁要做到調適的最佳化要透過meta 中的 viewport這個元素，將viewport放置於document的head裡，就可以讓不同大小的裝置達到設計者想要讓使用者看到的合適大小及內容。viewport這個tag 會給browser適當的指令來控制頁面的維度及大小。 一般而言，行動裝置上的browser 為替使用者維持最好的 user experience，最基本的做法就是依比例的去縮放，因為在電腦大瑩幕上的畫面(Ex.1024px)上很適合的字型大小就依比例的縮成了在小畫面行動裝置(Ex.480px)上的字型，也就是說字型看起來會格外的小，此時，使用者就得”手動”透過double-tap或 pinch-zoom的方法來讓字型變大才能清楚的看清內容。 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 透過meta 中的 viewport所設定的值width=device-width 就會讓頁面去配合不同裝置上各自獨立的pixel中瑩幕的寬，如此一來可以讓內容順利的適應不同的瑩幕大小。 範列一(viewport not set) 範列二(viewport set) 以上兩個範例，務必在電腦上及行動裝置上去執行一下，這樣大概就可以看出個端倪。沒有viewport的設定時，字型會因為browser的大小而改變，在電腦上看起來很ＯＫ的字型，到了行動裝置上時，則可能會顯得太小。 在網頁中加meta 中加入nitial-scale=1 這個屬性，會使browser不去管裝置上的方向時，去建立css上pixel與裝置上獨立的pixel的1:1關係，會依裝置的最大水平寬度下的字型來做為標準。此時就不會有字型變大變小的問題。 在這個階段要比較注意的是viewport中的各個屬性需要以「,」來做區隔 (如content="width=device-width, initial-scale=1")。再者，也可以添入如minimum-scale, maximum-scale and user-scalable在viewport的屬性裡，用以控制使用者是否可以調整頁的放大縮小功能，即是否鎖定大小的功能，這個方面就要以頁面的特性去做定義了。 最後再提醒大家一下在viewport的四個小要點 • 使用 meta 中的 viewport 標籤來控制 browser viewport 的寬度及尺度 • 引入 width=device-width 來配合裝置上瑩幕的寬度 • 引入 initial-scale=1 來建立裝置上與CSS上pixel的 1:1 對應關係 • 請確認你的頁面沒有鎖定調整尺度的問題 今天就到這裡吧。謝謝觀賞。 |
|
| ( 知識學習｜隨堂筆記 ) |
