响应式开发常见的陷阱和解决方案

幻想这么的场景： 您刚刚创建了一个出色的呼应式规划，然后预备在移动设备中测验一下。在您意想不到的当地发生了一些疑问，文字乱糟糟的，动画波涛汹涌，表单没有出现您规划的款式。然后花费N多时刻修正这些疑问，您也许抓狂地把电脑扔出窗外砸中邻居家的猫。

好消息是，我预备在本篇文章里介绍这些也许令您抓狂的疑问，并解说相应的处理方案。首要包含以下五个疑问：

1. 意外的文字改动

2. 非希望的表单款式

3. 误导的仿真器过错

4. 桌面端体现杰出动画的移动端出现疑问

5. 接触事情(Touch Event)的坐标注册疑问

1意外的文字改动

ios设备的旋转将损坏规划、改动页面中的文字大小，当元素（例如导航条、菜单等）设置为固定定位时常常发生相似的疑问，只要改写页面才能够修正疑问。走运的是，有一个办法能够防患于未然。

在您的css中增加如下代码：

html {
/* 防止横屏时的文字缩放 */
-webkit-text-size-adjust: 100%;
}

该代码设置横屏时文字的缩放为100%，从而防止意外的文字改动发生。

2非希望的表单款式

平板或移动设备常常调用默许款式搞糟您的表单款式，咱们能够运用如下的css代码阻止表单的默许款式。

input[type=text], button, select, textarea{
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0px;
}

您能够根据需求挑选重置的表单，例如将input[type=text]改动为input会挑选一切类型的input。

3误导的仿真器过错

假如您运用根据浏览器的移动仿真器进行测验，有时会发生一些烦人的疑问。在您代码没有疑问的情况下抛出一个疑问，令人纠结。

例如，有一次正在开发中的页面底部的导航条不可思议的消失了，合理我预备查找疑问原因时，我发现Chrome模拟器的视窗底部被切掉一部分，当我在新tab中翻开页面，然后切换移动视图改写之后就处理了疑问。

遇到相似的疑问，最为主要的是，要确保您的代码没疑问仅仅是模拟器的疑问。您能够测验阻隔疑问区域看看代码是不是正常工作，然后在真实的移动设备上测验一下。

4桌面端体现杰出动画的移动端出现疑问

假如您在移动设备上运用动画，请一定要特别留意动画的功能疑问。一般来说，浏览器能够有用的动画以下特点translate、scale、rotate和 opacity等，例如下面的案例。

transform: translate(15px, 40px); /* shift left 15px and down 40px */
transform: scale(2); /* scale to 2 times original size */
transform: rotate(30deg); /* rotate 30 degrees */
opacity: 0.5; /* set opacity at 0.5 */

这些特点动画功能杰出的原因是，这些特点坐落浏览器渲染器的顶层。您能够把一个页面当作一个餐桌，动画这些特点就相似于移动一个调羹，动画底层特点相似于移动全部餐桌布，您需求一起移动上面的一切覆盖物，所以愈加费力一些（功能就会差一点）。

为了最大化的支撑您的动画，您也许需求加浏览器前缀(verdor prefix)

另外留意，盒暗影(box-shadow)有时会影响动画功能，所以强烈建议运用盒暗影时留意移动设备的测验。

5接触事情的坐标注册疑问

接触事情的坐标注册疑问也对比微妙，由于坐标在不一样设备中存储区域不一样。一些设备(例如ios)的接触坐标和单击坐标一样，而另一些（例如android）设备则不一样。好消息是，在任何移动设备中都能够通过特定的接触事情数据（touch event data）获取坐标。

对于接触事情来说，运用e.touches[0].pageX而非e.pageX获取接触点的x坐标，获取y坐标也是相似的道理。下面是一些也许实践使用的代码。

/* event */
document.onclick = function(e){
var x = e.pageX; // get x coordinate of click
var y = e.pageY; // get y coordinate of click
console.log('x = ' + x + ', y = ' + y); // show coordinates in console
}
/* for touch event */
document.ontouchstart = function(e){
var x = e.touches[0].pageX; // get x coordinate of touch
var y = e.touches[0].pageY; // get y coordinate of touch
console.log('x = ' + x + ', y = ' + y); // show coordinates in console
}

我们无妨模拟器里测验下上面的代码。