小薇学院任务十一笔记1（移动web页面）

手机设备设计
1.在更小的屏幕下工作
响应式网页设计是一项让你的网站在手持设备上通过不同使用环境进行自动适应的技术，通常来说体现在尺寸和屏幕的排列方向上。它包含下面的技术：
<li>弹性化CSS布局设计，保证当浏览器窗口尺寸变化时网页也能流畅的适应</li>
<li>根据设备屏幕的宽高，合理使用CSS媒体查询</li>
viewport meta 标签指定在用户浏览器中的网页缩放比例。
2.处理触摸屏
在触屏设备中你需要使用dom的touch事件。不在需要使用css: hover伪类；同事因为手指要比鼠标大的缘故，要将可点击元素做的大一些。
3.优化图片
为了解决哪些带宽小或者流量费用昂贵的用户，你可以更具用户屏幕尺寸和分辨率加载合适的图片来优化图片的加载。你可以通过媒体查询来获取屏幕的 height和 width以及 pixel ratio。
你也可以不使用图片，使用css属性像 gradients和 shadows来实现更好的视觉效果。
4.移动APIs
最后，你可以利用移动设备提供的新可能性，例如 orientation和 geolocation。
跨浏览器开发
1.书写跨浏览器代码
创建能够完美工作在不同移动浏览器的web sites:
<li>请尽力避免使用特定浏览器的features, 例如CSS属性前的vendor-prefixed(浏览器厂商前缀，也称浏览器引擎前缀)。例如-moz-为Firefox|Firefox OS浏览器引擎使用到的前缀。</li>
<li>如果你需要使用这些features, 请检查是否其它浏览器也有实现这些特性的版本。</li>
<li>对于不支持这些特性的浏览器，请提供一个可接受的fallback。</li>
2.注意用户代理嗅探
我们推荐网站使用上面说到的方法来检测诸如屏幕尺寸和触摸屏之类的特定设备的特性，并且自动根据这些特性做出适配。但有时这样的办法并不那么管用，于是这是网站就会通过解析浏览器的 User Agent 来试图将桌面端，平板电脑端和手机端区分出来，并为不同的设备提供不同的内容。
如果你就是这样做的，请确保你的算法是可靠的，并且确保你的服务器没有因为没有正确解析某个浏览器的 User Agent 而给它提供了不合适的页面。