cara asy untuk meningkatkan tapak web anda-tutorial css-php.cn

cara asy untuk meningkatkan tapak web anda

Mary-Kate Olsen

Lepaskan： 2024-12-28 16:33:10

asal

680 orang telah melayarinya

1. Elakkan peralihan reka letak pada limpahan

Jika anda mempunyai elemen dengan limpahan: auto maka ia akan mempunyai bar skrol hanya apabila elemen itu melimpah. Masalahnya ialah apabila elemen melimpah dan bar skrol muncul, kandungan telah mengecut untuk menampung lebar bar skrol.

asy ways to elevate your website
Untuk mengelakkan peralihan reka letak yang tidak perlu, tambah:
bar skrol-longkang: stabil

Ia akan menyimpan ruang untuk bar skrol walaupun ia tidak kelihatan.

asy ways to elevate your website

Pada masa menulis ini, hanya 74% pengguna mempunyai ciri ini. Tetapi ia adalah peningkatan progresif yang bagus. Bermaksud mereka yang menggunakan penyemak imbas baharu boleh menikmati pengalaman pengguna yang lebih baik manakala mereka yang menggunakan penyemak imbas yang lebih lama tidak terjejas.

2. hormati keutamaan peranti untuk mod gelap

Jika anda sudah melaksanakan mod gelap dalam tapak web anda, anda boleh mengelakkan pengguna daripada memilih mod gelap secara manual dengan menyemak pilihan peranti untuk mod terang atau gelap

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

Salin selepas log masuk

Jadi, jika pengguna sudah memilih mod gelap dalam tetapannya, maka anda boleh menetapkan nilai lalai ialah mod gelap dalam tapak web anda juga.

Sesetengah tapak web malah memilih untuk tidak mempunyai togol mod gelap sama sekali dan bergantung semata-mata pada pilihan peranti.

3. Pautan mestilah pautan sebenar

Apabila anda mempunyai butang yang harus mengubah hala ke bahagian lain tapak web anda, cara yang jelas untuk melakukannya ialah mempunyai pendengar acara untuk mengklik dan mengubah hala pengguna menggunakan JavaScript.
Ini adalah salah, apabila anda boleh menggunakan penyemak imbas primitif (cth: pautan, borang) maka anda sepatutnya hampir selalu menggunakannya.

menggunakan tag sebaliknya mempunyai banyak manfaat.

Dapat Ctrl klik (atau tekan lama pada mudah alih) untuk membuka pautan dalam tab lain
Melayang di atas pautan menunjukkan tempat anda akan diubah hala ke
Atur cara lain seperti pembaca skrin dan perangkak enjin carian akan berfungsi dengan lebih baik

Jika anda menggunakan react-router atau Next.js, anda harus menggunakan komponen Pautan rangka kerja itu untuk mengelakkan muat semula halaman penuh.

4. Pratonton pautan

Apabila pengguna berkongsi pautan ke tapak web anda, semua apl sembang dan media sosial mempunyai ciri pratonton untuk melihat beberapa kandungan tapak web tersebut sebelum pengguna mengkliknya. Dengan hanya menambah beberapa tag meta pada objek anda akan membenarkan apl lain memaparkan pratonton ke tapak web anda.

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

Salin selepas log masuk

Dan dalam tindak balas 19 adalah lebih mudah berbanding sebelum ini untuk mengedit objek. Anda sebelum ini terpaksa menggunakan perpustakaan pihak ketiga seperti react-helmet tetapi kini ia terbina dalam untuk bertindak balas.

<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>

Salin selepas log masuk

Ini dipanggil Open Graph Protocol.
Alat yang sangat berguna ialah pratonton perkongsian sosial yang membolehkan anda menguji rupa pratonton anda dalam tapak web yang berbeza dan memberi anda nasihat tentang cara menjadikannya lebih baik.

5. Gunakan label dengan input anda

Saya sering melihat kotak pilihan dan apabila saya cuba mengklik label kotak pilihan tiada apa yang berlaku. Selain daripada kebolehcapaian yang lemah, ini bermakna pengguna perlu mengklik kotak pilihan kecil untuk memilihnya.

Untuk menyelesaikannya, gunakan tag.

function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>

      <title>{post.title}</title>
      <meta name="description" content={post.excerpt} />
      <meta property="og:title" content={post.title} />
      <meta property="og:description" content={post.excerpt} />
      <meta property="og:image" content={post.image} />
      <meta property="og:url" content={post.url} />
      <meta property="og:type" content="article" />

    </article>
  );
}

Salin selepas log masuk

Ini berfungsi untuk semua jenis input. Mengklik label input teks contohnya akan memfokuskan ke dalam kotak teks.

Atas ialah kandungan terperinci cara asy untuk meningkatkan tapak web anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!