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

灰太狼 2022-08-05 08:56 168阅读 0赞

# **0. 目录** #

*  目录
 *  引言
 *  正文
    
     *  1 引入
     *  1 意外的文字改变
     *  2 非期望的表单样式
     *  3 误导的仿真器错误mulator Errors
     *  4 桌面端表现良好动画的移动端呈现问题
     *  5 触摸事件Touch Event的坐标注册问题
     *  6 总结
 *  声明

# **1. 引言** #

原文：[Sitepoint][]的[5 Responsive Design Pitfalls and How to Avoid Them][]  
译者：前端开发whqet，意译为主不当之处，欢迎指正！  
译言：希望能够对大家所有帮助。

# **2. 正文** #

## **2.1 引入** ##

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

好消息是，我准备在本篇文章里介绍这些可能令您抓狂的问题，并讲解相应的解决方案。主要包括以下五个问题：

1.  意外的文字改变
2.  非期望的表单样式
3.  误导的仿真器错误
4.  桌面端表现良好动画的移动端呈现问题
5.  触摸事件(Touch Event)的坐标注册问题

好的，言归正传。

**本文假设**您了解响应式网页开发的基础知识，否则您可能需要进行一下提升([简明教程][Link 1])。

## 2.1 意外的文字改变 ##

ios设备的旋转将破坏布局、改变页面中的文字大小，当元素（例如导航条、菜单等）设置为固定定位时经常产生类似的问题，只有刷新页面才可以修复问题。幸运的是，有一个方法可以防患于未然。

在您的css中添加如下代码

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

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

## 2.2 非期望的表单样式 ##

平板或移动设备经常调用默认样式搞糟您的表单样式，我们可以使用如下的css代码阻止表单的默认样式。

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

您可以根据需要选择重置的表单，例如将`input[type=text]`改变为`input`会选择所有类型的input。

## 2.3 误导的仿真器错误(mulator Errors) ##

如果您使用基于浏览器的移动仿真器进行测试，有时会产生一些烦人的问题。在您代码没有问题的情况下抛出一个问题，令人纠结。

例如，有一次正在开发中的页面底部的导航条莫名其妙的消失了，正当我准备查找问题原因时，我发现Chrome模拟器的视窗底部被切掉一部分，当我在新tab中打开页面，然后切换移动视图刷新之后就解决了问题。

遇到类似的问题，最为重要的是，要保证您的代码没问题仅仅是模拟器的问题。您可以尝试隔离问题区域看看代码是否正常工作，然后在真正的移动设备上测试一下。

## 2.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 */

这些属性动画性能良好的原因是，这些属性位于浏览器渲染器的顶层。您可以把一个网页看成一个餐桌，动画这些属性就类似于移动一个调羹，动画底层属性类似于移动整个餐桌布，您需要同时移动上面的所有覆盖物，所以更加费劲一些（性能就会差一点）。

您可以通过阅读[这篇文章][Link 2]，了解动画性能的更多信息。

为了最大化的支持您的动画，您可能需要加浏览器前缀(verdor prefix)，您也可以到[Caniuse][]了解更多的兼容情况。

另外注意，盒阴影(box-shadow)有时会影响动画性能，所以强烈建议使用盒阴影时注意移动设备的测试。

## 2.5 触摸事件(Touch Event)的坐标注册问题 ##

触摸事件的坐标注册问题也比较微妙，因为坐标在不同设备中存储区域不同。一些设备(例如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
    }

大家不妨模拟器里测试下上面的代码。

## 2.6 总结 ##

本文罗列一些响应式网页开发中的一些常见陷阱，并指定了对应的解决方案，希望可以对您为您节省时间，少些麻烦。

欢迎通过评论讨论、指教。

# **3. 声明** #

前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助，限于作者水平有限，出错难免，欢迎拍砖！  
欢迎任何形式的转载，烦请注明装载，保留本段文字。  
本文原文链接[http://blog.csdn.net/whqet/article/details/48392167][http_blog.csdn.net_whqet_article_details_48392167]  
欢迎大家访问独立博客[http://whqet.github.io][http_whqet.github.io]

[Sitepoint]: http://www.sitepoint.com/
[5 Responsive Design Pitfalls and How to Avoid Them]: http://www.sitepoint.com/5-responsive-design-pitfalls-and-how-to-avoid-them/
[Link 1]: http://simplestepscode.com/responsive-web-development-basics/
[Link 2]: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
[Caniuse]: http://caniuse.com/#feat=transforms2d
[http_blog.csdn.net_whqet_article_details_48392167]: http://blog.csdn.net/whqet/article/details/48392167
[http_whqet.github.io]: http://whqet.github.io