teknologi tokopedia untuk membedakan tampilan mobile dan desktop?

teknologi apa yang digunakan tokopedia untuk mengubah tampilannya ketika user agen di set ke safari iphone/ipad atau membedakan tampilan desktop dan mobile?

apa ini yg disebut pwa? bagaimana mengimplementasikannya?
avatar dembilesmana

@dembilesmana

11 Kontribusi 1 Poin


Jawaban

CMIIW

Saya pernah dengar kalau tim developer untuk view browser mobile dan browser desktop itu berbeda. sehingga mereka dapat membuat user interface nya secara berbeda

sehingga pada tampilan mobile dia akan langsung di redirect / arahkan ke subdomain m.tokopedia.com

kalau berbicara tentang pwa.. ini bukan termasuk pwa, kalau pwa itu sendiri berfokuskan pada metode caching, indexed db pada aplikasi sehingga aplikasi dapat dijalankan pada kondisi offline.

strateginya dapat dilihat pada link berikut https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures

untuk implementasi pwa dapat dilihat pada web developer google sendiri

kalau untuk implementasi auto redirect page web app tersebut, bisa dideteksi dari media screen dan user agent
avatar insanz01

@insanz01

82 Kontribusi 54 Poin

  • kayanya bukan itu yang di pake tokopedia. soalnya dia ga ngeredirect halaman dari desktop ke mobile. kalo di pwa untuk styling bisa pake file yang berbeda ga ya? - @dembilesmana
  • Kalau untuk styling berbeda mungkin bisa dengan cara import menggunakan javascript Jadi kita bisa deteksi user agent atau screen size kemudian import css nya langsung dari javascript nya - @insanz01


cara yang saya tahu untuk membedakan tampilan mobile dengan tampilan desktop: 
- menggunakan @media di css nya
- atau menggunakan innerHeight atau InnerWidth dengan javascript

mungkin masih banyak cara lain, tapi yang saya tahu hanya itu saja

semoga terbantu !!

css @media -->
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
innerHeight & innerWidth -->
https://www.w3schools.com/jsref/prop_win_innerheight.asp

avatar NauraFaradisa

@NauraFaradisa

11 Kontribusi 10 Poin

  • itu masuk ke kategori responsif, yang saya amati tokopedia ga pake design responsif. - @dembilesmana
  • Ada tapi tidak terlalu banyak - @NauraFaradisa
  • Kalau dilihat source-code nya, cari "@media" pasti ada beberapa - @NauraFaradisa

Tampikan semua |


Pakai Regex :http://detectmobilebrowsers.com/ : pakai regex
bisa dipilih pakai bahasa pemrograman apa, biasanya pada pakai javascript karena websitenya dibuat pakai javascript, misalnya shopee pakai reactjs.

Pakai navigator.userAgentData.mobile :  pakai javascript
buka saja console lalu beri perintah :
navigator.userAgentData.mobile
Hasilnya akan bernilai true atau false (boolean).
avatar syahid246

@syahid246

66 Kontribusi 155 Poin


Login untuk gabung berdiskusi
premium logo tube

Hey, sedang ada diskon premium untuk akses semua kelas. Lihat di sini