什麼是viewport
手機瀏覽器是把頁面放在乙個虛擬的「視窗」(viewport)中,通常這個虛擬的「視窗」(viewport)比螢幕寬,這樣就不用把每個網頁擠到很小的視窗中(這樣會破壞沒有針對手機瀏覽器優化的網頁的布局),使用者可以通過平移和縮放來看網頁的不同部分。移動版的 safari 瀏覽器最新引進了 viewport 這個 meta tag,讓網頁開發者來控制 viewport 的大小和縮放,其他手機瀏覽器也基本支援。
移動viewport的特點
移動端和桌面端不一樣,它有2個視口(viewport):可見視口(visual viewport)和 布局視口(layout viewport).
關於2者的區別,stack overflow有這樣的解釋:
想象下現在有一張不會改變尺寸和形狀的大的,你手裡拿著乙個中空的框子(想象下砸空你手機的螢幕),透過它你可以看到這張,並且這個框框的周圍是用不透明的材料做成的,你只能通過中間的洞去看這張。你可以移動這個框子,靠近自己的眼睛的話可以看到更多的區域,也可以使它遠離自己的眼睛,從而只看到這張的一部分小區域。那張不可改變形狀和尺寸的=布局視口(layout viewport)
你手中的中空的框子=可見視口(visual viewport)
也就是說我們在移動端用手指來縮放螢幕,其實改變的是可見視口(visual viewport)的尺寸,而布局視口(layout viewport)總是保持不變。
viewport設定
主要引數有下面幾個:
maximum-scale:使用者可以縮放的最大值
minimum-scale:使用者可以縮放的最小值
initial-scale:viewport的預設縮放大小
width:固定viewport的寬度
height:固定viewport的高度
user-scalable:是否允許使用者縮放
前三個引數都是縮放相關的,它們的值是viewport的縮放大小,他們僅僅改變縮放大小,並不是改變viewport的實際大小。比如要讓網頁載入時候顯示兩倍大小就可以加上這個
之後就是width和height,修改這倆東西就和我們在pc上訪問網頁時候用滑鼠拖動瀏覽器來改變大小一樣。或者說是瀏覽器(頁面區域)在螢幕上的預設大小。可以是具體的數值,也可以用「device-width」和「device-height」把它設定成瀏覽器螢幕的大小。比如要把頁面寬度固定到瀏覽器的螢幕上,防止出現橫向滾動條就可以使用
最後乙個是指定是否允許使用者自己縮放,也就是使用者通過兩個手指觸屏來縮放的方式。預設都是允許的值為1,如果要禁止可以把它的值設定為0。就像下面這樣
設定了這個屬性以後兩個手指在螢幕上把它摸到高潮它也不會縮放。上面這些屬性只要設定就可以讓網頁在mobile裝置下好好顯示,我一般會禁止橫向滾動條和使用者縮放,就像下面這樣
最後乙個是指定是否允許使用者自己縮放,也就是使用者通過兩個手指觸屏來縮放的方式。預設都是允許的值為1,如果要禁止可以把它的值設定為0。就像下面這樣
只要把他們用逗號隔開就可以了,不過有些瀏覽器不支援width和height設定固定數值(我這充話費送的破手機的預設瀏覽器就不支援)所以最好別用那個。移動端的優化
width device width initial scale 1.0 maximum scale 1.0 user scalable 0 name viewport yes name 第二個meta標籤是iphone裝置中的safari私有meta標籤,它表示 允許全屏模式瀏覽 black na...
移動端 移動端頁面適配方案
這是mdn上的解釋 這個單位代表根元素的 font size 大小 例如 元素的font size 當用在根元素的font size上面時 它代表了它的初始值 也就是說,rem單位取值的大小和根元素html的font size取值直接相關。它跟html元素之間得關係為 html的fontsize值 ...
pc端適配移動端
1.允許網頁寬度自動調整在網頁 的頭部,加入一行viewport元標籤所有主流瀏覽器都支援這個設定,包括ie9。對於那些老式瀏覽器 主要是ie6 7 8 需要使用css3 mediaqueries.js2.不使用絕對寬度由於網頁會根據螢幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬...