viewport meta 标签在移动平台的应用
英文网站建设只要是想说一下网页在ipad平台下的显示问题
网页的设计：设计了一个背景自适应的网站，就是每一栏横条的宽度都是100％，横条里面的内容的宽度是1000px，浏览器居中显示
问题：在ipad Safari浏览器下面每条横栏压缩到980px宽 ，留出一块空白
网上查了下发现
在移动版的 Safari（iOS平台）中定义了 viewport meta 标签，它的作用就是创建一个虚拟的窗口（viewport），而且这个虚拟窗口的分辨率接近于桌面显示器，Apple 将其定位为 980px
我是这样理解的，在ipad物理屏幕上——视觉窗口（visual viewport），创建出了一个 980px 的虚拟窗口——布局窗口（layout viewport），在视觉窗口（visual viewport）中我们可以拖动横向竖向滑动条或者放大缩小网页，来达到最佳的浏览效果(类似桌面浏览器)；而布局窗口（layout viewport）用来配合 CSS 渲染布局，例如当我们设置一个容器的宽度为 100% 时，这个容器的实际值为 980px
viewport 全部属性&值如下：
width: viewport宽度
height: viewport高度
initial-scale: 初始缩放比例
maximum-scale: 最大缩放比例
minimum-scale: 最小缩放比例
user-scalable: 是否允许用户缩放
例：
width=960 或 device-width
height=1000 或 device-height
initial-scale=0.5
maximum-scale=2
minimum-scale=1
user-scalable=1 或 0 (yes 或 no)
layout viewport的默认值
在Apple实现viewport后，其他浏览器也加入了对viewport meta的支持，但彼此间还是有些差异，差异最大的是layout viewport的表现：
Safari iPhone: 980px
Opera: 850px
Android WebKit: 800px
IE: 974px
正常状态是
<pre><meta name = "viewport" content = "width=device-width"></pre>
我想要我100％的背景横栏显示全就需要
<pre><meta name = "viewport" content = "width=1000"></pre>
width=device-width
其实这个属性&值很有意思，字面意应该是 viewport 宽度等于设备宽度，但在实际中不同的浏览器都给出了固定的值.
星期五, 4月 19th, 2013 | 分类：英文网站建设 | RSS 2.0 | 留言/评论 | Trackback