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

  • 相关阅读:
    设计人员应该看的15个很酷的 iOS 8 设计
    jQuery 人脸识别插件,支持图片和视频
    无奇不有,20款国外便携式智能手机充电器
    CSS3 过渡特性创建信封效果的联系表单
    Converse.js – 开源的 XMPP 聊天客户端
    推荐12个创建响应式布局的优秀网格框架
    使用 jQuery & CSS3 实现优雅的手风琴效果
    Walkway.js – 用线条制作简约的 SVG 动画
    20套最新的扁平界面设计素材【免费下载】
    神奇的滚动动画,30个视差滚动网站设计
  • 原文地址:https://www.cnblogs.com/attilax/p/15199768.html
Copyright © 2011-2022 走看看