Cara Jadikan Laman Web Responsif untuk Telefon Bimbit

Untuk menjadikan laman web responsif untuk telefon, tambah tag viewport meta, bina susun atur secara mobile-first dengan lebar fleksibel, dan guna titik henti CSS untuk menyusun semula pada skrin yang lebih besar — menindih lajur, melipat menu dan menskalakan imej supaya muat. Kemudian semak setiap halaman pada lebar telefon untuk tatal ke sisi, teks kecil dan butang yang terlalu kecil untuk disentuh. Pada laman yang dibina AI, satu prompt yang jelas serta semakan dalam pratonton saiz telefon biasanya membetulkan kebanyakan perkara.

Apa sebenarnya reka bentuk responsif

Laman responsif menggunakan satu set halaman dan URL yang menyesuaikan diri dengan skrin. Daripada laman "m." berasingan, CSS menukar susun atur pada lebar tertentu, dipanggil titik henti (breakpoints). Blok binaannya:

• Tag viewport meta memberitahu pelayar mudah alih untuk menggunakan lebar sebenar peranti.
• Susun atur cecair menggunakan peratusan, flexbox dan grid dan bukan lebar piksel tetap.
• Media query (atau kelas rangka kerja seperti md: Tailwind) menukar susun atur di atas lebar tertentu.
• Media fleksibel — imej dan video yang mengecil untuk muat dalam bekasnya.

Ia penting kerana sebahagian besar trafik anda mungkin datang dari telefon, dan kerana Google mengindeks versi mudah alih halaman anda. Jika kandungan atau pautan hanya wujud di desktop, Google mungkin tidak melihatnya juga.

Pilihan dan pertukaran

Mobile-first biasanya lebih mudah: satu lajur ialah susun atur paling mudah, dan menambah lajur apabila ruang bertambah adalah kurang kerja berbanding membuangnya.

Bahagian yang biasanya rosak

Tag viewport

Jika halaman kelihatan seperti laman desktop kecil di telefon, tag viewport tiada:

<meta name="viewport" content="width=device-width, initial-scale=1">

Jangan tambah maximum-scale=1 atau user-scalable=no. Menyekat cubitan-zum menyukarkan penggunaan laman bagi orang yang berpenglihatan rendah.

Lebar tetap dan tatal mendatar

Pepijat responsif yang paling biasa ialah sesuatu yang lebih lebar daripada skrin: bekas width: 1200px yang tetap, jadual lebar, URL panjang atau blok kod, imej tanpa max-width: 100%. Halaman keseluruhan kemudian tatal ke sisi. Gunakan max-width dan bukannya width, benarkan teks dibalut, dan beri benda lebar kawasan tatal sendiri.

Navigasi

Lima pautan menu desktop jarang muat di telefon. Jawapan biasa ialah butang menu yang membuka panel. Kekalkan dua atau tiga tindakan paling penting kelihatan — "Tempah", "Troli", "Log masuk" — dan pastikan menu berfungsi dengan papan kekunci serta tertutup dengan mudah.

Teks dan sasaran sentuhan

• Teks badan sekitar 16 px ialah minimum yang munasabah pada telefon. Input dengan teks lebih kecil menyebabkan iPhone zum apabila diketik.
• Jadikan butang dan pautan mudah disentuh. WCAG 2.2 AA menetapkan had minimum 24 × 24 piksel CSS (atau jarak yang mencukupi); sekitar 44 piksel lebih selesa untuk jari.
• Beri ruang antara pautan bersebelahan supaya orang tidak tersentuh pautan yang salah.

Jadual dan data

Jadual lebar ialah bahagian paling sukar dalam apl responsif. Pilihan, mengikut susunan keutamaan: tunjukkan lebih sedikit lajur pada telefon, tukar setiap baris kepada kad, atau letakkan jadual dalam bekas yang boleh ditatal secara mendatar dengan lajur pertama dipaku. Pilih berdasarkan apa yang orang perlu bandingkan.

Imej dan media

Guna max-width: 100% dan height: auto, hantar fail yang lebih kecil ke skrin kecil dengan srcset, dan tetapkan lebar dan tinggi untuk mengelakkan lompatan susun atur. Video dan peta terbenam memerlukan pembalut responsif supaya nisbah aspeknya kekal. Imej yang lebih kecil juga menjadikan halaman lebih pantas — lihat cara jadikan laman web anda lebih pantas.

Borang

Susun label di atas medan, jadikan medan lebar penuh, dan guna jenis input yang betul (type="email", type="tel", inputmode="numeric") supaya telefon memaparkan papan kekunci yang sepadan. Letakkan butang hantar di tempat ibu jari boleh capai dan pastikan ia kelihatan apabila papan kekunci terbuka.

Interaksi hanya hover

Telefon tidak mempunyai hover. Tooltip, dropdown dan pratonton yang hanya muncul apabila dihoverkan tidak kelihatan kepada pengguna sentuhan. Jadikan ia berfungsi dengan ketik juga.

Prompt yang berkesan

Untuk binaan baharu, nyatakan dari awal:

Bina secara mobile-first. Satu lajur pada telefon, dua lajur dari lebar tablet, susun atur penuh pada desktop. Tiada tatal mendatar pada lebar 320 px, teks badan sekurang-kurangnya 16 px, sasaran sentuhan sekurang-kurangnya 44 px, butang menu pada skrin kecil, dan jadual yang bertukar kepada kad pada telefon.

Untuk halaman sedia ada, terangkan apa yang anda nampak:

Pada telefon, halaman /pricing tatal ke sisi dan tiga kad pelan dihimpit bersebelahan. Susun kad secara menegak di bawah 768 px, jadikan jadual perbandingan boleh ditatal secara mendatar dalam bekasnya sendiri dengan lajur ciri dipaku, dan kekalkan susun atur desktop tanpa perubahan.

Semak setiap halaman pada lebar 375 px. Senaraikan apa-apa yang melimpah, bertindih, teks lebih kecil daripada 16 px atau sasaran sentuhan lebih kecil daripada 44 px, atau hanya berfungsi dengan hover, kemudian betulkan setiap satu.

Langkah demi langkah

1. Sahkan tag viewport ada dalam kepala halaman.
2. Uji pada lebar 320–375 px dalam mod peranti pelayar atau pratonton saiz telefon. Tatal setiap halaman dari atas ke bawah.
3. Betulkan tatal mendatar dahulu. Cari elemen yang terlalu lebar; semua perkara lain sukar dinilai sehingga ia hilang.
4. Uruskan navigasi: butang menu, tindakan utama kelihatan.
5. Semak teks, sasaran sentuhan dan borang pada setiap aliran utama — daftar, carian, pembayaran, hubungi.
6. Uruskan jadual dan media: kad atau bekas tatal, imej dan embed responsif.
7. Semak saiz perantaraan. Seret lebar perlahan dari telefon ke desktop; susun atur sering rosak sekitar lebar tablet.
8. Uji pada telefon sebenar. Emulator terlepas perkara seperti papan kekunci atas skrin yang menutup butang, takuk, dan betapa pantas laman terasa pada data mudah alih.

Kesilapan biasa

• Hanya menguji pada satu saiz telefon. Semak telefon kecil, telefon besar dan tablet.
• Menyembunyikan kandungan pada mudah alih supaya muat. Google mengindeks versi mudah alih, dan pengguna telefon mahukan maklumat yang sama.
• Melumpuhkan zum dalam tag viewport.
• Imej bersaiz desktop pada telefon, yang menelan masa muat dan data.
• Elemen kedudukan tetap bertindih: pengepala melekat, sepanduk kuki dan gelembung sembang boleh menutup separuh skrin telefon.
• Pop-timbul yang tidak boleh ditutup pada skrin kecil kerana butang tutup berada di luar skrin.

Senarai semak mudah alih

• Tag viewport meta ada; zum tidak dilumpuhkan
• Tiada tatal mendatar pada 320 px di mana-mana halaman
• Teks badan ~16 px; input tidak mencetuskan zum
• Sasaran sentuhan cukup besar dan berjarak
• Menu berfungsi pada telefon dan dengan papan kekunci
• Jadual boleh dibaca pada telefon (kad, lajur kurang atau bekas tatal)
• Imej dan embed diskalakan; fail bersaiz betul dihidangkan
• Borang menggunakan jenis input yang betul; butang hantar boleh dicapai
• Tiada perkara penting bergantung pada hover
• Diuji pada sekurang-kurangnya satu telefon sebenar

Reka bentuk responsif juga sebahagian daripada kebolehcapaian: WCAG menuntut kandungan berfungsi pada lebar 320 px dan pada zum 200%. Jika anda membina apl yang akan digunakan orang setiap hari di telefon mereka, cara membina aplikasi web mesra mudah alih pergi lebih jauh, termasuk PWA yang boleh dipasang.

Reka bentuk responsif pada Mythex

Mythex membina apl web responsif, dan pada Pro ia boleh membungkusnya sebagai apl Android dan iPhone. Dalam ruang kerja, klik ikon telefon di atas Preview (Switch to Mobile) untuk melihat apl anda dalam bingkai saiz telefon, dan seret tepi bingkai untuk mencuba lebar lain (Preview and Code). Dokumentasi mempunyai prompt permulaan ringkas untuk membetulkan susun atur skrin kecil dalam prompt responsif mudah alih. Semak juga pada telefon sebenar — buka URL yang diterbitkan, atau kongsi pautan pratonton dan buka di telefon anda.

Soalan lazim