不管是在電腦上或行動裝置上，使用者的習慣大多是使用垂直滾動視窗，而非水平的移動畫面；因此若設計出的介面需要強迫使用者去水平移動畫面或透過放大的方式才能一探頁面的內容，這樣介面的結果就只會給使用者有糟糕的使用體驗。

在設計一個行動化網站時，很容易就設計出不符合特定viewport的內容頁。例如圖片過大，以致於在某些裝置上會超過寬度；因此，在設定內容時，就要儘量去調整到讓使用者只要使用垂直scroll就可以達到觀看所有內容。

再者，由於透過CSS設定瑩幕的維度與寬度會依不同裝置而異，所以內容的設計不可以只希冀依賴特定viewport 的寬度就可以達到很好的排版效果。

所以在透過CSS定義特定元素的寬度時，就要小心會不會使用到「固定」的寬度，使用「固定」寬度的缺點在於當裝置的viewport是一個較小的狀態時，該元素在該裝置就會有些部份超過可視的寬度裡，也就是需要使用者自己自滑來滑去才能看到完整的內容。

範列(Fixed width)

上面這個範例，請您去執行一下，在較大的瑩幕時大於334px(如平板或一般電腦)時看起來會十分的正常；而當使用的裝置寬度小於334px(如iPhone)您就需要透過水平的移動才能看到完整的內容。

所以，在元素的寬度設定上，傾向使用相對的大小值
(如：width:100%)，這個設計上的小要點，還是需要大家在起首式注意的。

最後再提醒大家
依照Viewport讓content隨之改變大小的重點如下
　　• 過大的固定元素能避則避之
　　• 內容不應該只依賴在特定 viewport 的大小之下才能被執行得很好
　　• 使用 CSS 的 media queries 來針對大小瑩幕的 style 套用

以上。感謝收看。