基础交互设置
- 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。