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来判断浏览器,在网站中显示适当的面板及按钮...这样可以取得更好的控件及显示..不过比较麻烦.成本高..

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

paip.提升用户体验--提升java的热部署热更新能力
paip.提升用户体验--提升java的热部署热更新能力想让java做到php那么好的热部署能力 "fix online"/在线修复吗??直接在服务器上修改源码生效,无需重启应 ...
阿里云拨测：主动探测Web应用质量，助力提升用户体验
简介:阿里云拨测是一种针对互联网应用(Web页面.网络链路等)进行应用性能和用户体验监测的服务,无需嵌码即可为云上用户提供开箱即用的企业级主动拨测式应用监测解决方案. 随着中国数字化经济的蓬勃发展,越 ...
electron加载html加载不起来,Electron 预加载远程页面提升用户体验
使用场景 Electron 内置 Chromium 和 Node.js,为了提升用户体验,通常 Electron 封装的前端静态文件存储在客户端本地.但总有一些特殊情况,会使用到部分远程页面. 比如微 ...
中山一院——新一代的智慧医院建设，以流量分析为抓手，提升用户体验
导言中山大学附属第一医院,简称中山一院,位于广州市,始建于1910年,2019年中国医院排行榜发布,中山一院位居第六. 作为一家现代化大型三甲医院,中山一院在信息化系统的建设上是较为全面的,基于H ...
基础篇 | 03 | 如何提升用户体验
前言:从业多年,接触过会计类产品.企管类产品.金融类产品.电商类产品.大数据类产品.物联网类产品和硬件类产品等,用户端有客户端.WEB端.手机端.小程序和H5等.这其中都贯穿着用户体验,什么是最好的用 ...
网站优化提升用户体验的三个关键要点
众说周知,在我们优化网站的过程中用户体验这个环节至关紧要,而百度早已公开告知站长,近期调整的一系列算法都是以用户体验为目的.如果我们在用户体验的某些细节操作不当将会给网站带来很大的降权风险,但笔者认为 ...
顺丰同城入局洗衣行业与浣洗合作提升用户体验
近日,记者注意到,在"顺丰同城急送"小程序上,增加了"帮我洗"版块,点开之后,会跳转洗护下单页面,用户选择衣物品类下单后,会由顺丰同城骑士上门取件,送至智能洗护 ...
描点链接元素的优化提升用户体验
用一些大网站的时候,发现有一个很细节的共同点:点击链接元素的时候,链接元素会产生一个明显的边框,而且这个边框的颜色和#f27b04很接近,我觉得既然很多大网站都这么做,这其中肯定有一些用户体验方面的东 ...
网络营销外包——网络营销外包专员浅析提升用户体验从哪入手？
众所周知,在网站运营期间,网站跳出率的高低直接反映出用户对网站喜爱与否,也是检测网站性能是否丝滑的关键点,如果网站跳出率越高就证明用户体验越差,搜索引擎也不会更加注重抓取该网站.那么如果提高用户体验, ...
纯前端表格控件SpreadJS V12.1 隆重登场，专注易用性，提升用户体验
一款优秀的开发工具,在更新迭代中,除了要满足不同场景的业务需求,也需不断优化已有功能,尤其是细节方面,要能为用户带来使用体验和开发效率的提升. 作为一款备受业界专家和开发者认可的纯前端类Excel ...

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

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

最新文章

热门文章