|
Post by account_disabled on Jan 29, 2024 5:26:42 GMT
宽问题之外还应在任何移动样式表中进行一些其他更改。首先您可以通过增加任何小型或中型文本的字体大小来提高可读性。其次在移动设备上点击通常不太精确因此请确保通过设置display: block和添加可点击元素的填充来增加任何重要按钮或链接的可点击区域。 此外浮动元素可能会导致移动布局出现问题因此请考虑删除所有不是绝对必要的浮动元素。请记住水平空间在移动设备上特别昂贵因此您应该始终选择添加垂直滚动而不是水平滚动。 最后鼠标悬停状态不适用于大多数移动设备因此请确保对:active状态有正确的定义。:hover此外有时将已定义的状态中的定义应用到这些状态可能会很有用:active。当用户单击某个项目时会显示此伪类因此适用于移动设备。然而。 这只会增强用户体验不应该依赖于更重要的元素例如下拉导航。在这些情况下最好始终在移动设备中显示链接。 超越样式表 除了移动样式表之外我们还可以通过标记添加许多特殊的移动功能。 可点击的电话号码 首先大多数手持设备都包含电话因此让我们让电话号码可点击: <a href="tel:15032084566" class="phone-link">503 208-4566</a> 现在移动用户可以单击此号码进行呼叫但有一些注意事项。首先实际链接中的数字以 1 开头这一点很重要因为 购买电话号码列表 网络是国际性的(1 是美国国家/地区代码)。 其次无论用户是否拥有移动设备该链接都是可点击的。由于我们没有使用上述服务器端方法因此最好的选择是简单地隐藏该数字可通过 CSS 单击的事实。因此请使用该类phone-link禁用屏幕样式表中的链接样。 式然后在移动设备上再次包含它。 特殊输入类型 iPhone 显示特殊的 HTML5 输入类型 当谈到移动浏览时另一个问题是与标准全尺寸键盘相比打字的难度。但我们可以通过利用一些特殊的HTML5 输入类型来让用户更轻松: <输入类型=“电话”/> <输入类型=“电子邮件”/> 这些输入类型允许 iPhone 等设备显示与输入类型相关的上下文键盘。在上面的示例中type=“tel”触发一个适合输入电话号码的数字键盘并触发带有和按钮type=“email”的键盘。. HTML5 输入类型还提供浏览器内验证和特殊输入菜单这些菜单在移动和非移动浏览中都很有用。此外由于不支持的浏览器自然会降级以将这些特殊输入类型视为<input type="text" />因此当今在整个网站中使用 HTML5 输入类型不会有任何损失。 查看。
|
|