Vue menentukan peranti permintaan

Dengan pembangunan Internet mudah alih, semakin banyak tapak web dan aplikasi perlu bertindak balas dan memproses secara berbeza mengikut jenis peranti pengguna, saiz skrin dan ciri-ciri lain untuk memberikan pengalaman pengguna yang lebih baik. Apabila membangunkan aplikasi bahagian hadapan web, selalunya perlu untuk menentukan jenis peranti pengguna untuk menyediakan antara muka dan gelagat yang berbeza.

Vue.js ialah rangka kerja bahagian hadapan yang popular yang boleh membantu kami mencapai pembangunan komponen, pengikatan data dan fungsi lain. Dalam Vue.js, menentukan jenis peranti pengguna boleh dicapai dengan cara berikut.

Gunakan window.navigator.userAgent

window.navigator.userAgent ialah rentetan yang mengandungi pengeluar penyemak imbas, nombor versi, sistem pengendalian dan maklumat lain. Kami boleh menentukan jenis peranti pengguna dengan mengesan kata kunci tertentu dalam userAgent.

Kod sampel adalah seperti berikut:

const isMobile = /iPhone|iPad|iPod|Android/i.test(window.navigator.userAgent);

Kod ini menggunakan ungkapan biasa untuk mengesan sama ada nilai userAgent mengandungi kata kunci iPhone, iPad, iPod atau Android untuk menentukan sama ada peranti itu peranti mudah alih . Jika benar dikembalikan, peranti itu mudah alih.

Gunakan window.matchMedia

window.matchMedia ialah API JavaScript yang boleh memantau pertanyaan media skrin dan menentukan lebar, ketinggian dan ciri lain skrin peranti. Kami boleh menentukan jenis peranti dengan menetapkan pertanyaan media yang berbeza.

Kod sampel adalah seperti berikut:

const isMobile = window.matchMedia('(max-width: 768px)').matches;

Kod ini menunjukkan bahawa jika lebar skrin kurang daripada atau sama dengan 768 piksel, peranti itu ialah peranti mudah alih.

Gunakan atribut yang dikira bagi Vue.js

Dalam Vue.js, kita boleh menggunakan atribut yang dikira untuk mengira nilai atribut Apabila nilai atribut berubah, atribut yang dikira akan dikemas kini secara automatik . Melalui atribut yang dikira, kita boleh mengira sifat komponen yang berbeza berdasarkan jenis peranti semasa.

Kod sampel adalah seperti berikut:

<template>
  <div>
    <h1 v-if="isMobile">Mobile Device</h1>
    <h1 v-else>Desktop Device</h1>
  </div>
</template>

<script>
export default {
  computed: {
    isMobile () {
      return /iPhone|iPad|iPod|Android/i.test(window.navigator.userAgent);
    }
  }
};
</script>

Dalam kod ini, apabila isMobile kembali benar, "Peranti Mudah Alih" dipaparkan, jika tidak "Peranti Desktop" dipaparkan.

Gunakan perpustakaan pihak ketiga

Selain kaedah di atas, kami juga boleh menggunakan beberapa perpustakaan pihak ketiga untuk menentukan jenis peranti, seperti device.js, bowser, Detect.js , dsb. Perpustakaan ini menyediakan fungsi pertimbangan peranti yang lebih lengkap, termasuk mengesan jenis peranti, jenis penyemak imbas, sistem pengendalian dan maklumat lain, dan sesuai untuk senario yang lebih kompleks.

Kod sampel adalah seperti berikut:

import device from 'device.js';

const isMobile = device.mobile();

Kod ini menggunakan kaedah mudah alih() pustaka device.js untuk menentukan sama ada peranti itu peranti mudah alih.

Ringkasnya, menentukan peranti permintaan dalam Vue.js adalah perkara yang sangat mudah. Kami boleh memilih kaedah yang berbeza mengikut keperluan pengguna, melaksanakan pertimbangan jenis peranti dalam kod dan memberikan respons dan pemprosesan yang berbeza untuk memberikan pengguna pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Vue menentukan peranti permintaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!