針對這個問題,我們可以透過viewport及media-query來修正網站的顯示方式。
viewport的應用方式
現時大多數的裝置都會將網站的闊度預設為980px,也就是說如果你的網站闊度大於或少於980px,將會無法完整地顯示整個網站。
在這個情況下,我們需要透過viewport來告訴裝置網站實質的闊度,例如我們的網站是720px,可以這樣設定viewport:
<meta name="viewport" content="width=720">
那麼裝置就會完整地顯示整個網站。
透過viewport取得裝置的實際闊度
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport的各個特性
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
initial-scale=1,告訴裝置以100%顯示網站,不做任何的自動縮放,這時將需要手動移動或縮放頁面。
user-scalable=no,禁止用戶手動縮放網站。
maximum-scale=1,設定網站最大的縮放大小。
使用viewport及media-query來調整網站的顯示方式
首先我們使用viewport來告訴網站,現在使用者的裝置實際的闊度:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
然後,我們再透過css的media-query針對不同的闊度設定不同的顯示方式:
@media all and (max-width: 1024px) {
/* styles for narrow desktop browsers and iPad landscape */
}
@media all and (max-width: 768px) {
/* styles for narrower desktop browsers and iPad portrait */
}
@media all and (max-width: 480px) {
/* styles for iPhone/Android landscape (and really narrow browser windows) */
}
@media all and (max-width: 320px) {
/* styles for iPhone/Android portrait */
}
@media all and (max-width: 240px) {
/* styles for smaller devices */
}
/* styles for narrow desktop browsers and iPad landscape */
}
@media all and (max-width: 768px) {
/* styles for narrower desktop browsers and iPad portrait */
}
@media all and (max-width: 480px) {
/* styles for iPhone/Android landscape (and really narrow browser windows) */
}
@media all and (max-width: 320px) {
/* styles for iPhone/Android portrait */
}
@media all and (max-width: 240px) {
/* styles for smaller devices */
}
使用這個方式的相關網站
http://www.microsoft.com/surface/en-US/surface-with-windows-rt/home
http://anderssonwise.com/
沒有留言:
張貼留言