paip.提升用户体验---WEB程序页面的手机及平板浏览器兼容支持

paip.提升用户体验---WEB程序页面的手机及平板浏览器兼容支持

作者Attilax ， 1466519819@qq.com

移动互联网时代的到来,WEB程序应该可以兼容手机及平板电脑浏览器
移动设备浏览器的问题是对HTML,CSS,JS的支持可能不全..特别是CSS支持度比较差
为了提高兼容性,以下是我的总结

以下是我总结的

1.一些控件,组件只能在PC浏览器下才能运行...
可以增加一个隐藏的DIV...,使用DISPLAY,或者VISUAL属性,根据情况而定...里边增加可以在移动设备浏览器中使用的组件....因为DISPLAY许多

移动设备都不支持,所以可以在手机中显示出来.而在PC中,则会隐藏起来..

2.提交按钮图片
----------------------
尽可能不要用IMG标签..以及A标签.,以及BUTTON标签..尽量使用image类型的input...
或者多提供一个BUTTON ,以便在手机下使用.

 3.AJAX提交的改变
--------------------
需要增加无JS支持时的提交按钮.以及FORM,以便顺利运行..
使用NOSCRIPT或者DISPLAY方式来设置,以便在手机下显示出来

4.链接加大图标大按钮
--------------------------
普通的文字链接在手机下实在是太小了,特别是触摸屏手机,很难选中,需要增加一个大图标,后面<BR>+文字..这样的形式..图标的大小应该在

50*50左右..这样方便点击..如果不是太重要的图标,可以设置为24*24的小图标..

5.checkbox 等控件增加LABLE标签+图标
-----------------------------------
checkbox等控件在手机下显示太小了,不好点中.需要使用大图标,以及LABLE标签..这样就容易选中了.

6.无显示图片时的支持
--------------------
为了加快速度,手机设备等可能关闭图片显示,此时也需要网页可以浏览而不至于失去功能..
a.图片设置一个背景色,这样可以关闭图片后可以看到它的位置..B.设置ALT属性..C.TITLE属性.

7.无JS支持
----------------------
一定要考虑无JS支持时的情况...参见PC中的JS无缝降级使用指南..

8.适当冗余增加一些按钮,连接,以便不同设备下总会有一个可以使用,提高兼容性..可以在后边用灰色字指示用在手机平板等非PC环境下.

9.通过查看USER-AGENT来判断浏览器,在网站中显示适当的面板及按钮...这样可以取得更好的控件及显示..不过比较麻烦.成本高..