Orientasi Potret: Definisi, Contoh, dan CSS

Orientasi portrait artinya layarnya lebih tinggi daripada lebarnya (tinggi lebih besar dari lebar). Orientasi landscape adalah kebalikannya: lebih lebar daripada tingginya. Penggunaan portrait yang umum meliputi feed ponsel, artikel, formulir, dan chat. Landscape cocok untuk video, peta, dan dashboard yang membutuhkan ruang horizontal. Rasio aspek (seperti 9:16 portrait atau 16:9 landscape) menggambarkan hubungan antara lebar dan tinggi; orientasi hanya menunjukkan sisi mana yang lebih panjang.

Contoh portrait vs landscape

Jika Anda mencari gambar orientasi portrait, tampilan berdampingan ini adalah idenya: satu bingkai tinggi dan satu bingkai lebar pada kelas perangkat yang sama.

Portrait memusatkan perhatian pada scroll vertikal. Landscape menampilkan lebih banyak kolom dan UI berdampingan. Keduanya adalah konteks layout, bukan sekadar label rotasi.

Orientation tidak sama dengan resolusi atau aspect ratio. Dua perangkat bisa sama-sama portrait tetapi menggunakan ukuran dan rasio piksel yang berbeda. Layout responsif harus berdasarkan bentuk viewport, bukan model ponsel tertentu.

Portrait orientation di CSS

Gunakan CSS ketika rotasi harus mengubah spacing atau struktur. The @media (orientation: portrait) query cocok untuk viewport di mana tinggi lebih besar daripada lebar. MDN mendokumentasikan ini di bawah fitur orientasi media.

/* Default: portrait-first single column */
.page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.sidebar {
  display: none;
}

@media (orientation: landscape) {
  .page {
    grid-template-columns: 280px 1fr;
  }

  .sidebar {
    display: block;
  }
}

@media (orientation: portrait) {
  .hero {
    padding-block: 24px;
  }
}

Mulai dari orientasi yang paling sering dilihat pengguna, lalu tambahkan aturan landscape. Hindari tinggi viewport tetap yang rusak saat keyboard atau browser chrome muncul. Uji formulir dan header sticky di kedua orientasi pada perangkat asli.

Untuk JavaScript yang harus bereaksi terhadap rotasi (grafik, peta, shell kustom), dengarkan screen.orientation perubahan event atau bandingkan window.innerHeight ke window.innerWidth. Jaga layout di CSS jika memungkinkan.

Mengunci orientasi di aplikasi mobile dan Capacitor

Browser memperlakukan penguncian orientasi sebagai preferensi. Aplikasi native dan Capacitor proyek dapat memaksakan arah layar per layar jika rotasi akan mengganggu tugas (sign-in, pembayaran, alur kiosk).

Panduan @capgo/capacitor-screen-orientation plugin membaca mode saat ini, mengunci portrait untuk satu route, dan membuka kunci saat pengguna meninggalkan layar tersebut. Lihat Dokumentasi plugin Screen Orientation untuk detail API.

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

await ScreenOrientation.lock({ orientation: 'portrait' });

const { type } = await ScreenOrientation.orientation();
console.log(type);

await ScreenOrientation.unlock();

Kunci dengan hemat. Jika rotasi hanya mengubah spasi, sesuaikan layout-nya. Saat mengunci, hubungkan lock dan unlock ke siklus hidup halaman agar layar media dan pengaturan tetap bisa menggunakan landscape. Untuk pola layout yang lebih luas di iOS dan Android, lihat praktik terbaik UI dan UX lintas platform untuk aplikasi Capacitor.

FAQ

Apa itu orientasi portrait?

Orientasi portrait berarti tampilan lebih tinggi daripada lebarnya. Tinggi lebih besar dari lebar, sehingga sisi panjang berjalan secara vertikal. Ponsel yang dipegang tegak untuk membaca, chat, atau scroll biasanya berada dalam mode portrait.

Apa perbedaan antara orientasi portrait dan landscape?

Portrait lebih tinggi daripada lebar. Landscape lebih lebar daripada tinggi. Perangkat yang sama beralih di antara keduanya saat diputar, tetapi rasio aspek dan ruang layout berubah, sehingga UI harus beradaptasi, bukan sekadar meregang.

Bagaimana cara menggunakan @media (orientation: portrait) di CSS?

Tambahkan media query dengan @media (orientation: portrait) { ... } untuk menerapkan gaya saat tinggi viewport melebihi lebarnya. Pasangkan dengan aturan layout untuk landscape menggunakan @media (orientation: landscape) ketika Anda membutuhkan kedua bentuk tersebut.

Apa arti change orientation di ponsel atau aplikasi?

Mengubah orientasi berarti memutar perangkat atau mengizinkan aplikasi berputar sehingga layar berpindah antara portrait dan landscape. Di web, dimensi viewport bertukar. Di aplikasi native dan Capacitor, OS juga mungkin menganimasikan transisi dan memperbarui safe area.

Apa itu content orientation?

Content orientation adalah cara konten ditata relatif terhadap bingkai, bukan hanya arah pegangan perangkat. Layar portrait mungkin masih menampilkan grafik lebar atau video letterboxed di dalamnya. Sesuaikan layout dan media dengan tugasnya, bukan hanya sudut default perangkat.

Bisakah Anda menunjukkan contoh portrait vs landscape?

Ya. Portrait terlihat seperti bingkai ponsel tinggi di mana tinggi lebih besar dari lebar. Landscape terlihat seperti bingkai lebar di mana lebar lebih besar dari tinggi. Gulir ke diagram di bawah Contoh portrait vs landscape untuk gambar berlabel.

Jika Anda merilis aplikasi Capacitor dan membutuhkan perilaku orientasi yang terkontrol bersama perbaikan pasca-rilis yang cepat, Capgo layak untuk dicoba. Platform ini menyediakan Live Update untuk aplikasi CapacitorJS dan Electron, serta memelihara plugin untuk kemampuan aplikasi seperti orientasi layar, yang sangat membantu saat Anda perlu mengunci atau mengaktifkan tampilan tertentu tanpa harus membangun ulang seluruh proses rilis.