HTML设计规范(3)基础交互设置

基础交互设置

  • meta 标签设置,禁止缩放,避免用户不小心缩放而导致的用户界面混乱
  • <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  • 添加到主屏的ICON
    <!-- Standard iPhone -->  
    <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />  
    <!-- Retina iPhone -->  
    <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />  
    <!-- Standard iPad -->  
    <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />  
    <!-- Retina iPad -->  
    <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />
  • 添加到主屏的标题
    <meta name="apple-mobile-web-app-title" content="标题" />
  • 忽略将页面中的数字识别为电话号码
    <meta name="format-detection" content="telephone=no" />
  • 忽略识别邮箱
    <meta name="format-detection" content="email=no" />
  • ​Landmark相关role
    <div class="landmark">
        <div role="banner">表示横幅区 role="banner" 横幅 内容 </div>
        <div role="navigation">表示导航区 role="navigation" 导航 内容 </div>
        <div role="search">表示搜索区 role="search" 搜索 内容 </div>
        <div role="main">表示主要内容区 role="main" 主要内容 内容 </div>
        <div role="complementary">表示补充内容区 role="complementary" 补充内容  </div>
        <div role="contentinfo">表示版权和隐私区 role="contentinfo" 版权和隐私  </div>
        <div role="form">表示表单区 role="form" 表单  </div>
        <div role="application">表示应用程序区 role="application" 表示应用程序区  </div>
    </div>

除了form和applation没有任何提示外,其他role值均有语音提示。 
banner、navigation、search、main、complementary、contentinfo可以应用到相应的提示区块。

可明显提示标签功能的role值有: 
button、checkbox、combobox、heading、menuitem、menuitemcheckbox、menuitemradio、progressbar、radio、slider、tab。