wordpress网站增加触屏设备更好的访问方式

2013/10/20 4801 0

WordPress技术博客 新闻资讯

一直以来，我们都很倡导将wordpress做成响应式的网站，以自动适应各种触屏设备的访问，但是随着各种项目做的越多，我们越有疑问，响应式设计真的是最好的解决触屏设备和pc访问的方式吗？

我们在各种项目的执行中发现，基于pc的浏览器内核与基于触屏设备的浏览器内核对于我们常用的jquery兼容不是一般的差，我们在PC上漂亮的、酷炫的各种滑块，在触屏设备访问，现在看来就是一场灾难。

..首先，能够在触屏设备上运行的效果，尤其是我们喜欢的非常酷的效果，往往奇卡无比，完全没有流畅的app感觉，让网站的访问感受大打折扣。

..其次，PC设备的响应方式和触屏的相应方式完全不同，在PC上，我们很多效果都是使用鼠标经过（mouseenter 和mouseleave）、单击（click）的方式来响应各种效果的，而触屏设备使用的是触屏的手势，如tap(轻击)、taphold（轻击不放）、swipeleft（向左划动）、swiperight（向右划动）等手指的方式来执行的，这样的差别，让pc端的代码基本无法很正常的运行流畅的动画，很多时候，具有pc动画效果的按钮，我们需要在触屏上点击2次才会调传链接。

..最后，在触屏访问时，我们网站上很多的工具，如侧边栏的小工具等等，是不需要显示的，因为造成页面过长，由于触屏设备的尺寸比pc小很多，响应式设计中，那些宽度不够被挤下去的模块，都会增加网站的长度，这样对于访问者来说也是糟糕的存在，我们需要在触屏设备中出现的只是清晰的导航、便于阅读的正文，去除臃肿的部分。

不得不说，这样的访问方式对于用户来说，是多么糟糕！

这不得不让我们去思考，响应式的网站到底是否是解决触屏和PC端的最好方式？下面我们来分析一下如何解决这个问题。

折中：如果你坚持响应式，那么不同的设备加载不同的动作脚本

动作脚本和css

如果你坚持响应式设计，那么使用 Mobile_Detect（php设备判断插件），来判断一下设备的系统（判断安卓和ios等触屏系统，而其他则判断为PC即可）从而判断到底是触屏设备还是PC设备的访问，加载不同的脚本文件，css文件，让你的网站运行更加流畅。

不必要的臃肿内容

使用css将不必要的模块隐藏掉，从而达到清晰的界面，不过你要知道，即使他们一开始就被隐藏，但是还是会在网站开始加载时拖慢你的网站加载时间。

更好的性能：使用全新的触屏样式和html

使用响应式的方式，即使使用上面折中的方式，响应式本身的臃肿代码也是无法避免的，我们都知道wordpress的超强扩展性，这就给我们一条更好的方式，使用全新的触屏样式和html。

在PC端做好你的网站，在兼容宽屏的工作中，你可以使用最大宽度max-widtht，和最小宽度min-width进行兼容，而不去考虑小屏幕的手机使用css的媒体查询。

在建立新的触屏header、index、archive、category、page、single等并且加入设备判断，如果是触屏，则使用这些新的触屏文件，这样就能使你的网站能够以更好的性能在触屏上和pc上流畅的运行了！

这样是将整个主题加入了触屏的模版文件，效率更高，使用一个常用的判断即可完成。