亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

利用css @viewport 做設備適配

  發(fā)布時間：2013-11-10 12:44:40   作者：佚名   我要評論
在需要調整設備瀏覽器的viewport時，我們通常在HTML中使用來解決。但是令人意想不到的是，viewport meta標簽并不具有“規(guī)范性”，即它不是W3C的正式標準，也非Web標準

在需要調整設備瀏覽器的viewport時，我們通常在HTML中使用來解決。但是令人意想不到的是，viewport meta標簽并不具有“規(guī)范性”，即它不是W3C的正式標準，也非Web標準。

Apple公司率先在其iPhone中的Safari瀏覽器中實現了viewport meta標簽，其他瀏覽器廠商也快速采納了它。由于IOS、Android及類似平臺在平板電腦和智能手機設備中的流行度和市場占有率，使得viewport meta標簽被廣泛使用。

viewport meta標簽是用做布局的，這種活本應屬于CSS的職能。這也是為什么W3C正在嘗試規(guī)范一種新的設備適配方法的原因，將HTML對viewport的控制轉交給CSS。

@viewport CSS 規(guī)則

使用@viewport規(guī)則控制viewport，與使用meta標簽的效果相同，只是我們完全使用CSS來控制。與使用meta標簽一樣，仍然建議使用設備無關的值（device-width）來設置viewport寬度。


復制代碼
代碼如下:

@viewport {
width: device-width;
}

如今，也有很多開發(fā)者已經在使用@viewport了，因為在IE10的捕捉模式（snap mode）下，Windows 8 Metro模式下的一個特性，可以將瀏覽器拖至屏幕的左端或右端，同時使用兩個窗口。奇怪的是， 要解決這個問題，開發(fā)者就要使用上面介紹的device-width方法，或者在media query里面使用@viewport規(guī)則。

@viewport 與 Media Queries配合使用
我們可以在media query里面使用@viewport，已達到更加精準的優(yōu)化。比如，下面的media query將viewport小于400px（IE10 的 捕捉模式）縮放至320px寬。


復制代碼
代碼如下:

@media screen and (max-width: 400px) {
@-ms-viewport { width: 320px; }
...
}

@viewport 描述符（Descriptors）
zoom描述符等同于viewport meta 標簽的initial-sacale屬性。


復制代碼
代碼如下:

@viewport {
width: device-width;
zoom: 2;
}

與minimum-scale, maximum-scale對應的描述符是max-zoom, min-zoom。


復制代碼
代碼如下:

@viewport {
width: device-width;
max-zoom: 3;
min-zoom: 0.50;
}

user-zoom與user-scalable屬性等效。


復制代碼
代碼如下:

@viewport {
width: device-width;
user-zoom: fixed;
}

瀏覽器支持情況
IE10/11 , opera, webkit, moz 都已支持，，且需要廠商前綴。


復制代碼
代碼如下:

@-webkit-viewport {
width: device-width;
}
@-moz-viewport {
width: device-width;
}
@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@viewport {
width: device-width;
}

所以，目前我們還是需要viewport meta 標簽。

后記

用此方法可以解決 Windows Phone IE瀏覽下， 定位在底部（bottom:0）的元素與底部有間距的問題。

參考：

  1. Thinking Ahead: CSS Device Adaptation With @viewport
  2. http://getbootstrap.com/getting-started/#browsers
  3. Windows Phone 8 and Device-Width

相關文章

最新評論