butiran

mobile browser emulator

Dalam pengembangannya aplikas untuk devais mobile perlu dicoba pada emulator, simulator, dan devais sebenarnya [ 1 ]. Untuk emulator dapat menggunakan yang telah tersedia pada beberapa penjelajah internet [ 2 ] ataupun mengintstalnya sebagai ekstensi Google Chrome [ 3 ].

screenshot

Devais Samsung Galaxy A12 [ 4 ] digunakan untuk uji coba tata letak suatu halaman web yang hasilnya pada emulator dan devais sebenarnya diberikan pada Gambar 1 berikut ini.

![]({{ site.baseurl }}/assets/img/0/22/0221-c-galaxy_s20_simulator.png)
(a)(b)(c)

Gambar 1. Screenshot bug menggunakan: (a) devais Samsung Galaxy A12, (b) Google Chrome mobile browser emulator for 360×400 screen size, dan (c) Mobile simulator for Samsung Galaxy S20.

Pada dua gambar pertama pada Gambar 1 bingkai seperti wadah smartphone dibuat dengan menggunakan sudut yang melengkung (rounded corners), sedangkan pada gambar terakhir memang bersumber dari aplikasinya [ 5 ]. Oleh karena itu ada tambahan ruang di atas dan di bawah untuk kedua gambar pertama karena berkas PNG yang tidak melengkung melewati elemen span (dengan opsi display:inline-block) [ 6 ] sehingga perlu ditambahkan padding di atas dan di bawah.

exer

  1. Apa yang terjadi pada Gambar 1 (a) dan (b) bila tidak digunakan opsi padding pada stylenya?
  2. Apakah masalah yang segera terlihat pada tampilan halaman web yang dibuat?

note

  1. Sreevatsa Sreerangaraju, “Emulation vs. Simulation”, Perfecto, 29 May 2020, url https://www.perfecto.io/blog/emulation-vs-simulation [20211205].
  2. Ciprian Adrian Rusen, “How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera”, Digital Citizen, 25 Feb 2021,
  3. François Duprat, “Mobile simulator - responsive testing tool”, Mobile First, Chrome Web Store, url https://chrome.google.com/webstore/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk [20211205].
  4. Wikipedia contributors, “Samsung Galaxy A12”, Wikipedia, The Free Encyclopedia, 2 December 2021, 04:41 UTC, url https://en.wikipedia.org/w/index.php?oldid=1058216549 [20211205].
  5. Refsnes Data, “CSS Rounded Corners”, W3Schools, url https://www.w3schools.com/css/css3_borders.asp [20211205].
  6. casraf, “Answer to ‘How to set height property for SPAN’”, 26 Feb 2010, edited 12 Aug 2015, Stack Overflow, url https://stackoverflow.com/a/2344014 [20211205].

comments

 

comment twitter • show only youtube control • install node.js v16.13.1 x64 {% comment %} • {% endcomment %}