Featured
网站对iPad适配
余果 front-end说到网站适配iPad，感觉挺时髦的，无论是对客户说、对上司说、对前端界来说都会觉得很上流，很国际化。但根据我的体验，有些“优化”真的是为了KPI而优化（不是产品KPI，而是前端组需要有iPad优化项目的经验而制定的KPI）。说实话，我也做过对iPad，对iPhone的网站优化，但有的时候真仔细体验，却有很多值得商榷的地方，并不是吃力就可以让用户觉得“爽”。
多体验才是正道。
根据我的iPad上网经验，我大概列了这样一个打分表，不知道有没有漏：
| 页面 | 评分 |
|---|---|
| 页面是多列布局，我可以通过双击一列来放大这一列。 | +20 |
面是单列布局，并且没有使用width=device-width，那么iPad会默认把宽度设置为1024宽来缩小，这样文字和可点击区域都会变小。 |
-30 |
有position:fixed的元素，并且缩小页面的时候挡住屏幕。 |
-50 |
| 弹出框绝对定位超出屏幕尺寸（看不见，无法继续操作，只能刷新）。 | -50 |
| 使用Flash做内容。 | -30 |
| 对retina屏有更清晰的图片和图标。 | +10 |
| 轻页面，没有太多互动元素和异步内容。 | +10 |
| 重页面，滚动页面卡，操作需要点击多次。 | -10 |
| 可点击区域清晰，尺寸合适。 | +10 |
| 可点击区域小。 | -10 |
| 使用原生控件，html5表单，select等。 | +10 |
| 使用模拟控件，模拟滚动条，div模拟的select等。 | -20 |
| 做一个iPad单独版，优化事件和体验。 | +10 |
| 单独做的iPad版缺少PC web端上的某个重要功能。 | -30 |
得分为正就不错了，使用起来毫无障碍。
按这样的算法，几乎没有做任何事情的豆瓣页得分也相当不错。
这也是我一直坚持的一个观点，身为前端，不要把浏览器开发者的工作也做了。不要嫌title的样式不好看，自定义一个，不要嫌浏览器滚动条不好看，模拟一个，不要嫌select不好看，自己做一个div绝对定位出来……这种做法是一种很短视的做法：只看到了自己优化的浏览器（IE），忽视了更多系统，更多平台，更多浏览器的体验，忽视了用户自定义的权利。
用原生的、标准的控件即可，使用CSS3对支持的浏览器进行控件样式优化，而不支持的，就使用用户习惯的外观，习惯的行为。让浏览器厂商去优化控件的样式和行为，这是他的工作，不是你的。
参考资料： Safari对于meta标签的官方指南
余果
一个产品设计师。 了解详情
评论...