手机网页项目一些心得
大小颜色可控，资源占用小。相比普通png/jpg图片，视网膜显示屏下不会拉伸模糊。
首先，OSS浏览器不支持font-face.
然后，让人意想不到的是wp7上的IE9浏览器也是不支持font-face，据说这是IE9的安全还是什么的策略（真是坑爹！），IE9桌面浏览器是支持font-face的。
后来，测试发现，Android设备上安装的UC浏览器也不支持font-face。
老版本iPhone上，貌似只对SVG格式的字体文件支持良好，因此，我们写CSS代码的时候，一定要注意字体文件调用的顺序，如下：
甚至我们可以使用中文：
我收集了下乱七八糟的字符，具体可以参见我站点左下角这里：
由于OSS浏览器不支持content: attr(*)，所以，对于装饰性的字符图形，我们可以将需要显示的字符写在自定义属性上，如：
可以避免显示上的干扰。
竖着状态，如iPhone4, 宽度像素640，而一般Symbian S60宽度320. 由于为了阅读体验，iPhone4和Symbian默认浏览器的布局视区宽度都是320像素，因此iphone4的设备像素比devicePixelRatio为2, Symbian为1.
这所导致的问题就是实际320像素宽的图片在Symbian上是正常比例宽度满屏显示；而在iPhone4上，也是宽度满屏，但图片实际两倍拉伸了，因此，如果图片本身质量不高，就会有模糊的拉伸——视网膜屏幕的iPhone反而效果不好。
如果您不计成本，可以制作两套图片，分别使用语高清屏幕以及普通屏幕。不过，上文“设备像素比devicePixelRatio”也提到过，有些设备的像素比是2.25, 以后可能还会出现像素比3, 因此，这种多尺寸图片，开发维护成本高，且不一定长寿的方法是否值得推广值得商榷。
在iPhone4上就是个普通的框框，但是，iPhone4S上就可以很华丽丽地选择日期，如下图：
其他差异还体现在对required,
iPhone的Safari浏览器上点击这个叉叉，永远都是文本框选中，而不是清空其中的内容。解决之道只能，边框模拟，叉叉覆盖在普通元素之上。
不得不说，OSS浏览器对JavaScript的支持不是一般的弱，例如不支持document.querySelectorAll()，因此，为了这个该死的浏览器，不得不自己写个简单基本的选择器。不支持ES5，因此，如数组的forEach方法就不可以使用等。
因此，如果想支持OSS浏览器的话，JS一定要慎用，复杂的JS交互直接忽略，使用最简单的方式呈现即可。
其他手机浏览器对JS的支持都是可以的。HTML5的本地存储、地理位置；以及上面提到的document.querySelector()以及ES5都是支持。
不过，iPhone上似乎有个坑爹的问题，其默认浏览器下，页面滚动的时候，上面的标题栏也一起滚动了；结果在计算其滚动高度的时候，最上面的60像素（实际页面已经下去了），但是滚动高度似乎都是0. 这使得使用JavaScript实现元素的底部浮动变成了很头疼的问题。其他浏览器都没有这个问题。
