Do you use responsive images, lazy loading, or other optimizations? If not, why not? What affects your decisions?
Answer a few simple questions to help us understand your needs, and what we can do to make your life easier. Get Started

Menguji Viewport dalam Mode Responsif dan Perangkat Tertentu

Device Mode yang diperbarui (sejak Chrome 49) adalah bagian integral dari DevTools yang sekarang dan mengutamakan tampilan seluler dan memperluas bilah DevTools utama. Pelajari cara menggunakan kontrolnya untuk menyimulasikan beraneka ragam perangkat atau menguji secara responsif sepenuhnya.

TL;DR

  • Menguji daya respons situs Anda menggunakan emulator layar Device Mode.
  • Menyimpan preset khusus sehingga Anda bisa dengan mudah mengaksesnya nanti.
  • Mode perangkat bukan pengganti pengujian perangkat nyata. Ketahui keterbatasannya.

Menggunakan kontrol viewport

mode perangkat diaktifkan

Kontrol Viewport digunakan untuk menguji situs pada beragam perangkat, serta secara responsif sepenuhnya. Ada dua mode kontrol:

  1. Responsive. Membuat Viewport bisa disesuaikan ukurannya secara bebas melalui tuas di sisi mana pun.
  2. Specific Device. Mengunci Viewport ke ukuran tampilan perangkat tertentu secara persis dan mengemulasikan karakteristik perangkat tersebut.

Mode Responsif

Kami merekomendasikan menggunakan Responsive Mode sebagai mode kerja default. Gunakan selama tahap pengembangan aktif situs dan aplikasi sering-seringlah mengubah ukuran viewport untuk menciptakan desain responsif yang dapat menyesuaikan diri dengan jenis perangkat, bahkan yang tidak diketahui atau perangkat baru di masa mendatang.

Untuk memaksimalkan pemanfaatan Responsive Mode, aktifkan Bilah Kueri Media.

Sesuaikan ukuran viewport

Tarik tuas pengubah ukuran yang besar pada viewport atau klik nilai di panel menu untuk menetapkan ukuran secara tepat.

Mode perangkat tertentu

Gunakan Device-specific Mode saat Anda mendekati akhir fase pengembangan aktif dan ingin menyempurnakan tampilan situs di layar perangkat seluler tertentu (mis. di iPhone atau Nexus tertentu).

Preset perangkat bawaan

Kami menyertakan perangkat paling populer saat ini di menu tarik-turun perangkat. Setelah memilih perangkat, setiap preset otomatis mengonfigurasi emulasi karakteristik perangkat tertentu:

  • Menyetel string "User Agent" (UA) yang benar.
  • Menyetel resolusi dan DPI perangkat (rasio piksel perangkat).
  • Mengemulasikan kejadian sentuh (jika tersedia).
  • Mengemulasikan overlay bilah scroll seluler dan meta viewport.
  • Otomatis mengubah ukuran (memperbesar) halaman tanpa viewport yang ditentukan.
pilih perangkat

Menambahkan preset perangkat khusus

Device Mode menawarkan berbagai jenis perangkat untuk emulasi. Anda bisa menambahkan perangkat khusus jika Anda menemukan kasus ekstrem atau perangkat sangat khusus yang tidak tercakup.

Untuk menambahkan perangkat khusus:

  1. Masuk ke Setelan DevTools.
  2. Klik tab Devices.
  3. Klik Add custom device.
  4. Masukkan nama perangkat, lebar, tinggi, rasio piksel perangkat, dan string agen-pengguna.
  5. Klik Add.

Perangkat khusus baru ini sekarang tersedia di menu tarik-turun Device.

pilih perangkat

Keadaan dan orientasi perangkat

beralih orientasi

Saat mengemulasikan perangkat khusus, toolbar Device Mode menampilkan kontrol tambahan yang utamanya berfungsi beralih orientasi antara lanskap dan potret.

Di perangkat yang didukung, kontrol tidak hanya mengalihkan orientasi. Untuk perangkat yang didukung seperti Nexus 5X, terdapat menu tarik-turun untuk mengemulasikan keadaan perangkat tertentu, seperti:

  • UI browser default
  • Dengan menu navigasi Chrome
  • Dengan keyboard terbuka
Mengubah UI Perangkat

Zoom to fit

Terkadang, Anda ingin menguji perangkat yang resolusinya lebih besar dari ruang yang tersedia di jendela browser. Dalam kasus seperti ini, opsi Zoom to Fit sangat berguna:

  1. Fit to Window akan otomatis menyetel level pembesaran ke ruang maksimum yang tersedia.
  2. Explicit percentages berguna bila Anda ingin menguji DPI pada gambar, misalnya.
Zoom to Fit

Kontrol opsional (mis. sentuh, kueri media, DPR)

Kontrol opsional bisa diubah atau diaktifkan dengan mengklik tiga titik kecil di sebelah kanan toolbar perangkat. Opsi saat ini meliputi

  • Tipe agen-pengguna (mengemulasikan UA dan kejadian sentuh)
  • Rasio piksel perangkat
  • Kueri Media
  • Aturan
  • Konfigurasi Jaringan (UA, Throttling Jaringan)
Setelan Device Mode

Lanjutkan baca untuk mempelajari lebih lanjut tentang setiap opsi.

Tipe agen-pengguna

Setelan User Agent Type, atau Device Type, memungkinkan Anda mengubah tipe perangkat. Kemungkinan nilainya:

  1. Mobile
  2. Desktop
  3. Desktop with touch

Mengubah setelan ini akan memengaruhi viewport di perangkat seluler dan emulasi kejadian sentuh serta mengubah string UA. Jadi, jika Anda ingin membuat situs responsif untuk Desktop dan ingin menguji efek pengarahan kursor ke atas objek, beralih ke "Desktop" di Responsive Mode.

Tips: Anda juga bisa menyetel agen-pengguna di panel samping Network conditions .

Rasio piksel perangkat (DPR)

Jika Anda ingin mengemulasikan perangkat Retina dari mesin non-Retina atau sebaliknya, sesuaikan Device pixel ratio. Rasio piksel perangkat (DPR) adalah rasio antara piksel logis dan piksel fisik. Perangkat dengan layar Retina, misalnya Nexus 6P, memiliki kepadatan piksel lebih tinggi dibandingkan perangkat biasa, yang bisa memengaruhi ketajaman dan ukuran konten visual.

Berikut beberapa contoh sensitivitas "Rasio Piksel Perangkat" (DPR) di web:

  • Kueri media CSS, seperti:

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }

  • Aturan CSS image-set .

  • Atribut srcset pada gambar.

  • Properti window.devicePixelRatio.

Jika Anda memiliki layar Retina bawaan, Anda akan melihat aset dengan "Titik Per Inci" (DPI) yang rendah akan tampak mengalami pikselisasi sedangkan aset ber-DPI tinggi tampak tajam. Untuk menyimulasikan efek ini pada tampilan standar, tetapkan DPR ke 2 dan skalakan viewport dengan pembesaran. Aset 2x akan tetap tampak tajam, sedangkan aset 1x akan tampak mengalami pikselisasi.

Kueri media

Kueri media adalah bagian penting dari desain web responsif.Untuk menampilkan pemeriksa kueri media, klik Show Media queries di menu tiga titik. DevTools mendeteksi kueri media di stylesheet dan menampilkannya sebagai bilah berwarna di aturan atas.

show media queries

pemeriksa kueri media

Kueri media diberi kode warna sebagai berikut:

Kueri yang menargetkan lebar maksimum.
Kueri yang menargetkan lebar dalam rentang tertentu.
Kueri yang menargetkan lebar minimum.

Melihat pratinjau kueri media dengan cepat

Klik bilah kueri media untuk menyesuaikan ukuran viewport dan menampilkan pratinjau gaya untuk ukuran layar yang ditargetkan.

Tampilkan CSS yang terkait

Klik kanan bilah untuk melihat tempat kueri media didefinisikan di CSS dan masuk ke definisinya di kode sumber.

tampilan kueri media dasar-dasar web

Aturan

Alihkan opsi ini untuk menampilkan aturan berbasis piksel di sebelah viewport.

Konfigurasi jaringan (UA, network throttling)

Dengan memilih opsi ini panel samping Network Conditions, tempat Anda bisa mengubah perilaku jaringan berikut:

  1. Disk Cache: Nonaktifkan Disk Cache menghentikan halaman dan asetnya dari disimpan di cache oleh browser saat DevTools terbuka.
  2. Network Throttling: Simulasikan koneksi jaringan lambat.
  3. User Agent: Untuk menyetel penggantian string UA (User Agent) tertentu.

Batasan

Device Mode memiliki beberapa keterbatasan.

  • Device hardware
    • Perilaku GPU dan CPU tidak diemulasikan.
  • Browser UI
    • Tampilan sistem, seperti kolom URL, tidak diemulasikan.
    • Tampilan bawaan, seperti <select> elemen, tidak diemulasikan sebagai daftar modal.
    • Beberapa peningkatan, seperti masukan angka yang membuka keypad, bisa berbeda dari perilaku perangkat sebenarnya.
  • Browser functionality
    • WebGL beroperasi di emulator, tetapi tidak didukung di perangkat iOS 7.
    • MathML tidak didukung di Chrome, tetapi didukung di perangkat iOS 7.
    • Pemutaran HLS (HTTP Live Streaming untuk video) tidak didukung saat beremulasi, tetapi tidak didukung secara asli di Android Chrome dan iOS.
    • Bug pembesaran orientasi iOS 5 tidak diemulasikan.
    • Properti CSS line-height beroperasi di emulator, tetapi tidak didukung di Opera Mini.
    • Batas aturan CSS, seperti yang ada di Internet Explorer, tidak diemulasikan.
  • AppCache

Terlepas dari keterbatasan ini, Device Mode cukup andal untuk sebagian besar tugas. Bila Anda ingin menguji pada perangkat sesungguhnya, Anda bisa menggunakan Proses Debug Dari Jauh untuk memperoleh insight tambahan.

Masukan

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.