服务报价 | 域名主机 | 网络营销 | 软件工具| [加入收藏]
 热线电话: #
当前位置: 主页 > php教程 > wordpress教程 >

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

时间:2016-09-28 00:33来源:未知 作者:最模板编辑 点击:
一直以来,我们都很倡导将wordpress做成响应式的网站,以自动适应各种触屏设备的访问,但是随着各种项目做的越多,我们越有疑问,响应式设计真的是最好的解决触屏设备和pc访问的
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上流畅的运行了!
这样是将整个主题加入了触屏的模版文件,效率更高,使用一个常用的判断即可完成。
更好的方式还可以直接建立一个wordpress子主题来兼容触屏设备,当触屏设备访问时,自动使用子主题,效果也是一样的。
这样做的好处
1.避免了臃肿的代码,如响应式的媒体查询、兼容各种神经病浏览器的css(ie6~ie8都是神经病)
2.避免了更多的php判断,如果使用响应式设备,那么你的load文件的判断就不忍直视了(非常多,这是肯定的)
3.让你的设备在触屏上加载触屏的脚本,流畅度可以与APP媲美。
 
总的来说,性能更快、效果更炫,流畅更高,对于用户的访问来说,不再是一场灾难,而是一次愉快的体验。
 
希望本文对开发者和用户有所帮助!
(责任编辑:最模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容