关于Viewport的那点事 iOS & WP7

补充一下关于viewport的宽度和高度是怎么使用的问题:

浏览器先用一个viewport指定宽度和高度的容器把网页装起来, 然后缩放到屏幕大小。

为了让网页在手机上能以正常比例显示, 苹果发明了viewport这个玩意儿。

viewport有以下几个属性:

width: 宽度

height: 高度

参数为多少px或device-width(设备宽度) device-height(设备高度)

initial-scale: 初始缩放比例

maximum-scale: 最大缩放比例

minimum-scale: 最小缩放比例

参数为比例 如1.0

user-scalable: 是否允许用户缩放

参数为1或0

最开始是苹果发明的这个meta, 所以现在的大部分”通过viewport为移动设备优化的”网页都是根据iPhone的分辨率来优化的, 也就是宽度为320px(以及后来Retina的640px)。

等到微软搞起了WP7的时候发现这是件很蛋疼的事儿, 因为WP7的标准分辨率宽度为480px, 于是微软就做了一件更蛋疼的事儿 — 把initial-scale锁定在1.5, 在你的html代码里面还改不了! 这样所有为320px宽度优化的网页就能完美显示了。

悲剧就是这么发生的 — 我正为我们的团队做一个和WP7系统一样风格的网站, 于是乎当然是按照WP7标准的480*800分辨率优化啦. 结果做完了才发现不管是在模拟器还是在真机上, 网页都被放大了. 不管怎么设置viewport都木有用! 折腾了一下午, 实在搞不定于是乎又Google了那么一下. 最后在IE for Windows Phone团队的MSDN Blog上找到了答案.<meta name="MobileOptimized" content="480" />搞定!

IE for Windows Phone支持的三个东东:<meta name="HandheldFriendly" content="true" />是否优化<meta name="MobileOptimized" content="320" />优化的宽度 例如 我是为480px宽度优化的网页 所以改成了480

最后一个就是viewport啦

注意一下这里的优先级

当MobileOptimized存在的时候, HandheldFriendly会被覆写掉。

当viewport存在的时候, MobileOptimized和HandheldFriendly都会被覆写掉。

所以如果是为Windows Phone的480px宽度优化的网页, 要把MobileOptimized改成480, 同时删掉viewport。

所谓微软遇到一个蛋疼的问题, 必然会用另一个更蛋疼的方法来解决它. 由此另外一个问题华丽丽地诞生了: 横屏的时候肿么办!

原本的解决方案: 用CSS来区分, 根据宽度的分辨率大小指定不同的CSS, 这种方法在我的安卓平板上完美地实现了. BUUUUUUUUT, 在Windows Phone上, 不管横屏还是竖屏, 浏览器都会把网页宽度视为480px并且进行拉伸, 于是乎, 更蛋疼的情况产生了。

到现在我还没有找到解决方案。