Pengaturan JS dan CSS Dasar untuk Tampilan Aplikasi Asli

Belajar cara mengatur aplikasi web Anda dengan pengaturan JavaScript dan CSS dasar untuk membuatnya terlihat dan terasa seperti aplikasi asli, termasuk mengaktifkan efek hover.

Kredit Artikel

Martin Donadieu

Pengarang

Valeria

Pengulas

Jordan

Pengembang

Konfigurasi JS dan CSS Dasar untuk Tampilan Aplikasi Asli

Membangun sebuah aplikasi web, sangat penting untuk membuatnya terlihat dan terasa seperti aplikasi asli untuk memberikan pengalaman pengguna yang lancar. Dalam artikel ini, kami akan membahas konfigurasi JavaScript dan CSS dasar yang diperlukan untuk mencapai tampilan aplikasi asli, termasuk mengaktifkan efek hover.

Mengaktifkan Efek Hover

On touch devices, hover effects can be problematic as they don’t have a true hover state like desktop devices. To disable hover effects on touch devices, you can use the following CSS code:

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

Ganti .element dengan selector yang sesuai untuk elemen yang ingin Anda aktifkan efek hover pada.

Mengaktifkan Pratinjau Tautan

To disable link preview on touch devices, you can use the following JavaScript code:

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

Mengaktifkan Seleksi

Untuk menonaktifkan pemilihan teks, tambahkan CSS berikut code ke stylesheet Anda:

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

Nonaktifkan Zoom

Untuk menonaktifkan penggeseran, tambahkan tag meta berikut ke bagian kepala file HTML Anda:

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

Tambahkan Zona CSS Aman

Untuk memastikan konten Anda ditampilkan di area aman perangkat, tambahkan CSS berikut code ke stylesheet Anda:

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

Tips Tambahan

Gunakan teknik desain responsif untuk memastikan aplikasi Anda terlihat bagus di semua perangkat.
Optimalkan kinerja aplikasi Anda dengan mengurangi penggunaan library JavaScript berat dan framework.
Tes aplikasi Anda di berbagai perangkat dan browser untuk memastikan konsistensi pengalaman pengguna dan kompatibilitas.

Dengan mengikuti konfigurasi JavaScript dan CSS dasar ini, Anda dapat membuat aplikasi web yang terlihat dan terasa seperti aplikasi asli, memberikan pengalaman pengguna yang halus dan menyenangkan.

Lanjutkan dari Konfigurasi JS dan CSS Dasar untuk Tampilan Aplikasi Asli

Jika Anda menggunakan Konfigurasi Dasar JS dan CSS untuk Tampilan Aplikasi Asli untuk merencanakan dashboard dan API operasi, hubungkannya dengan API Ringkasan untuk detail implementasi di API Ringkasan, Introduction untuk detail implementasi di Intro, API Kunci untuk detail implementasi di API Kunci, Peralatan untuk detail implementasi di Perangkat. Bundles untuk detail implementasi di Bundles.