您当前的位置:首页 > html5易胜博降盘设计

5个常见响应式设计陷阱及解决方案

时间:2015-09-20 11:01:51

 想象这样的场景:你刚刚创建了一个杰出的响应式设计,然后准备在移动设备中测试一下。在你意想不到的地方产生了一些问题,文字乱糟糟的,动画波涛汹涌,表单没有呈现你设计的样式。然后花费N多时间修复这些问题,你可能抓狂地把电脑扔出窗外砸中邻居家的猫。

  好消息是,我准备在本篇文章里介绍这些可能令你抓狂的问题,并讲解相应的解决方案。主要包括以下五个问题:
  意外的文字改变 非期望的表单样式 误导的仿真器错误 桌面端表现良好动画的移动端呈现问题 触摸事件(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 误导的仿真器错误(mulator Errors)
  如果你使用基于浏览器的移动仿真器进行测试,有时会产生一些烦人的问题。在你代码没有问题的情况下抛出一个问题,令人纠结。
  例如,有一次正在开发中的页面底部的导航条莫名其妙的消失了,正当我准备查找问题原因时,我发现Chrome模拟器的视窗底部被切掉一部分,当我在新tab中打开页面,然后切换移动视图刷新之后就解决了问题。
  遇到类似的问题,最为重要的是,要保证你的代码没问题仅仅是模拟器的问题。你可以尝试隔离问题区域看看代码是否正常工作,然后在真正的移动设备上测试一下。
  4 桌面端表现良好动画的移动端呈现问题
  如果你在移动设备上使用动画,请一定要尤其注意动画的性能问题。一般来说,浏览器能够有效的动画以下属性translate、scale、rotate和 opacity等,例如下面的案例。
  transform: translate(15 px, 40 px); transform: scale(2); transform: rotate(30 deg); opacity: 0.5;
  这些属性动画性能良好的原因是,这些属性位于浏览器渲染器的顶层。你可以把一个网页看成一个餐桌,动画这些属性就类似于移动一个调羹,动画底层属性类似于移动整个餐桌布,你需要同时移动上面的所有覆盖物,所以更加费劲一些(性能就会差一点)。
  为了最大化的支持你的动画,你可能需要加浏览器前缀(verdor prefix)。
  另外注意,盒阴影(box-shadow)有时会影响动画性能,所以强烈建议使用盒阴影时注意移动设备的测试。
  5 触摸事件(Touch Event)的坐标注册问题
  触摸事件的坐标注册问题也比较微妙,因为坐标在不同设备中存储区域不同。一些设备(例如ios)的触摸坐标和单击坐标相同,而另一些(例如android)设备则不同。好消息是,在任何移动设备中都可以通过特定的触摸事件数据(touch event data)获取坐标。
  对于触摸事件来说,使用e.touches[0].pageX而非e.pageX获取触摸点的x坐标,获取y坐标也是类似的道理。下面是一些可能实际应用的代码。
  document.onclick = function(e){ varx = e.pageX; // get x coordinate of clickvary = e.pageY; // get y coordinate of clickconsole.log( 'x = '+ x + ', y = '+ y); // show coordinates in console} document.ontouchstart = function(e){ varx = e.touches[ 0].pageX; // get x coordinate of touchvary = e.touches[ 0].pageY; // get y coordinate of touchconsole.log( 'x = '+ x + ', y = '+ y); // show coordinates in console}
  大家不妨模拟器里测试下上面的代码。
  总结
  本文罗列一些响应式网页开发中的一些常见陷阱,并指定了对应的解决方案,希望可以帮助你节省开发时间。