打造原生 App 外观的基础 JS 与 CSS 配置

在构建 Web 应用时，为了提供无缝的用户体验，使其具备原生应用的视觉和交互体验至关重要。本文将介绍实现原生应用外观所需的基础 JavaScript 和 CSS 配置，包括如何禁用悬停（hover）效果。

禁用悬停效果

在触摸设备上，由于不像桌面设备那样拥有真实的悬停状态，悬停效果可能会带来问题。要禁用触摸设备上的悬停效果，可以使用以下 CSS code：

@media (hover: none) {
  .element:hover {
    /* Reset the hover styles */
    background-color: initial;
    color: initial;
    /* Add any other style resets needed */
  }
}

替换 .element 并为需要禁用 hover 效果的元素设置合适的选择器。

禁用链接预览

若要在触摸设备上禁用链接预览，可以使用以下 JavaScript code：

document.addEventListener('touchstart', function(event) {
  if (event.target.tagName === 'A') {
    event.preventDefault();
  }
});

禁用文本选中

若要禁用文本选中，请在样式表中添加以下 CSS code：

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

禁用缩放

若要禁用缩放，请在 HTML 文件的 head 中添加以下 meta 标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

添加安全区域 CSS

为确保内容显示在设备的安全区域内，请在样式表中添加以下 CSS code：

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

更多提示

• 使用响应式设计技巧，确保你的 App 在所有设备上都能完美呈现。
• 通过减少重型 JavaScript 库和 framework 的使用，来优化应用的性能。
• 在各种设备和浏览器上测试应用，以确保兼容性并提供一致的用户体验。

遵循这些基础的 JavaScript 和 CSS 配置，你可以打造出具有原生应用质感的 Web App，从而提供流畅且愉悦的用户体验。

继续阅读：通过基础 JS 和 CSS 配置打造原生应用质感

如果你正在使用 打造原生 App 外观的基础 JS 与 CSS 配置 要规划 dashboard 和 API 操作，请将其连接到 API 概览 关于 API Overview 中的实现细节， 简介 关于 Introduction 中的实现细节， API 密钥 有关 API Keys 的实现细节， 设备 有关 Devices 的实现细节，以及 Bundle 有关 Bundles 中的实现细节。