利用css @viewport 做设备适配
2013-11-10 12:44
197 查看
在需要调整设备浏览器的viewport时,我们通常在HTML中使用来解决。但是令人意想不到的是,viewport meta标签并不具有“规范性”,即它不是W3C的正式标准,也非Web标准。
Apple公司率先在其iPhone中的Safari浏览器中实现了viewport meta标签,其他浏览器厂商也快速采纳了它。由于IOS、Android及类似平台在平板电脑和智能手机设备中的流行度和市场占有率,使得viewport meta标签被广泛使用。
viewport meta标签是用做布局的,这种活本应属于CSS的职能。这也是为什么W3C正在尝试规范一种新的设备适配方法的原因,将HTML对viewport的控制转交给CSS。
@viewport CSS 规则
使用@viewport规则控制viewport,与使用meta标签的效果相同,只是我们完全使用CSS来控制。与使用meta标签一样,仍然建议使用设备无关的值(device-width)来设置viewport宽度。
如今,也有很多开发者已经在使用@viewport了,因为在IE10的捕捉模式(snap mode)下,Windows 8 Metro模式下的一个特性,可以将浏览器拖至屏幕的左端或右端,同时使用两个窗口。奇怪的是, 要解决这个问题,开发者就要使用上面介绍的device-width方法,或者在media query里面使用@viewport规则。
@viewport 与 Media Queries配合使用
我们可以在media query里面使用@viewport,已达到更加精准的优化。比如,下面的media query将viewport小于400px(IE10 的 捕捉模式)缩放至320px宽。
@viewport 描述符(Descriptors)
zoom描述符等同于viewport meta 标签的initial-sacale属性。
与minimum-scale, maximum-scale对应的描述符是max-zoom, min-zoom。
user-zoom与user-scalable属性等效。
浏览器支持情况
IE10/11 , opera, webkit, moz 都已支持,,且需要厂商前缀。
所以,目前我们还是需要viewport meta 标签。
后记
用此方法可以解决 Windows Phone IE浏览下, 定位在底部(bottom:0)的元素与底部有间距的问题。
参考:
Thinking Ahead: CSS Device Adaptation With @viewport
http://getbootstrap.com/getting-started/#browsers
Windows Phone 8 and Device-Width
Apple公司率先在其iPhone中的Safari浏览器中实现了viewport meta标签,其他浏览器厂商也快速采纳了它。由于IOS、Android及类似平台在平板电脑和智能手机设备中的流行度和市场占有率,使得viewport meta标签被广泛使用。
viewport meta标签是用做布局的,这种活本应属于CSS的职能。这也是为什么W3C正在尝试规范一种新的设备适配方法的原因,将HTML对viewport的控制转交给CSS。
@viewport CSS 规则
使用@viewport规则控制viewport,与使用meta标签的效果相同,只是我们完全使用CSS来控制。与使用meta标签一样,仍然建议使用设备无关的值(device-width)来设置viewport宽度。
@viewport { width: device-width; }
如今,也有很多开发者已经在使用@viewport了,因为在IE10的捕捉模式(snap mode)下,Windows 8 Metro模式下的一个特性,可以将浏览器拖至屏幕的左端或右端,同时使用两个窗口。奇怪的是, 要解决这个问题,开发者就要使用上面介绍的device-width方法,或者在media query里面使用@viewport规则。
@viewport 与 Media Queries配合使用
我们可以在media query里面使用@viewport,已达到更加精准的优化。比如,下面的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)的元素与底部有间距的问题。
参考:
Thinking Ahead: CSS Device Adaptation With @viewport
http://getbootstrap.com/getting-started/#browsers
Windows Phone 8 and Device-Width
相关文章推荐
- html+css适配移动端设备
- 设备像素,设备独立像素,CSS像素 & meta viewport
- meta标签中的viewport控制设备屏幕css
- 设备物理像素(设备像素) 设备逻辑像素(设备独立像素) 代码CSS像素 设备像素比 viewport深入理解
- 利用monkeyrunner、python脚本来做多设备多apk适配ui界面截屏的自动化测试
- 关于html+css适配移动端设备
- HTML+CSS编写静态网站-36 设备适配概述
- 关于像素,分辨率,viewport,设备像素,css像素,Retina
- 如何通过css的media属性,适配不同分辨率的终端设备?
- meta标签中的viewport 设备屏幕css
- 前端web-app适配,viewport设备 font-size rem单位设置
- 怎样通过css的media属性,适配不同分辨率的终端设备?
- CSS 约定写法 利用扩展
- 利用CSS的@font-face属性,在网页中嵌入字体
- 利用CSS样式加载图像的做法(CSS应用技巧)
- [转]CSS实例:利用CSS定位背景图片
- 利用wget 抓取 网站网页 包括css背景图片
- 在ASP.Net中利用CSS实现多界面
- 利用css里expression来实现界面对象的批量控制
- 怎么利用CSS实现HTML5响应式导航栏