Seorang rakan saya baru-baru ini menghubungi saya untuk meminta bantuan dengan tapak WordPress yang telah dibinanya menggunakan tema X. Pelanggannya telah menghubunginya pagi itu selepas dia menyedari bahawa tapak webnya tidak dipaparkan dengan betul pada iPhonenya. Nick menyemaknya sendiri, dan pastinya, reka bentuk responsif yang cantik yang direka bentuknya tidak berfungsi lagi.
Dia semakin keliru dengan fakta bahawa apabila dia mengubah saiz tetingkap penyemak imbasnya pada desktopnya, tapak itu responsif, tetapi pada iPhonenya, hanya versi desktop dipaparkan. Mengapakah tapak akan responsif pada komputer meja dan tidak responsif pada peranti mudah alih?
Mengapa Reka Bentuk Responsif Tidak Berfungsi
Reka bentuk responsif berhenti berfungsi apabila satu baris kod tiada daripada pengepala fail HTML. Jika satu baris kod ini tiada, iPhone, Android dan peranti mudah alih anda yang lain akan menganggap bahawa tapak web yang anda lihat ialah tapak desktop bersaiz penuh dan melaraskan saiz viewportuntuk merangkumi keseluruhan skrin.
Apakah Maksud Anda Dengan Viewport dan Saiz Viewport?
Pada semua peranti, saiz port pandangan merujuk kepada saiz kawasan halaman web yang boleh dilihat oleh pengguna pada masa ini. Bayangkan anda memegang iPhone 5 dengan lebar 320 piksel. Melainkan dinyatakan sebaliknya secara jelas, iPhone menganggap bahawa setiap tapak web yang anda lawati ialah tapak desktop dengan lebar 980px.
Sekarang, menggunakan iPhone 5 khayalan anda, anda melawati tapak web yang direka untuk desktop selebar 800px. Ia tidak mempunyai reka letak responsif, jadi iPhone anda memaparkan versi desktop lebar penuh.
Tidak ianya bukan. Dengan saiz viewport, penskalaan boleh terlibat . IPhone perlu mengezum keluar untuk melihat versi lebar penuh halaman web. Ingat bahawa viewport merujuk kepada kawasan halaman yang pada masa ini boleh dilihat oleh pengguna. Adakah pengguna iPhone hanya melihat 320 piksel halaman pada masa ini atau adakah mereka melihat versi lebar penuh?
Betul: Mereka melihat halaman web lebar penuh pada paparan mereka kerana iPhone telah menganggapnya sebagai tingkah laku lalai: Ia dizum keluar supaya pengguna boleh melihat halaman web sehingga lebar 980 piksel. Oleh itu, port pandangan iPhone ialah 980px.
Sambil anda mengezum masuk atau keluar, saiz port pandangan berubah. Kami berkata sebelum ini bahawa tapak web khayalan kami mempunyai lebar 800px, jadi jika anda mengezum masuk ke iPhone anda supaya tepi tapak web menyentuh tepi paparan iPhone anda, port pandangan akan menjadi 800px. IPhone boleh mempunyai port pandangan 320px pada tapak desktop, tetapi jika ia berlaku, anda hanya akan melihat sebahagian kecil daripadanya.
Tapak Web Responsif Saya Rosak. Bagaimana Saya Membetulkannya?
Jawapannya ialah satu baris HTML yang apabila disisipkan dalam pengepala halaman web memberitahu peranti untuk menetapkan port pandangan kepada lebarnya sendiri (320px dalam kes iPhone 5) dan bukan untuk skala (atau zum) halaman.
Untuk perbincangan yang lebih teknikal tentang semua pilihan yang berkaitan dengan tag meta ini, lihat artikel ini di tutsplus.com.
Cara Membetulkan Tema WordPress X Apabila Ia Tidak Responsif
Kembali kepada rakan saya sebelum ini: Satu baris kod ini hilang apabila dia mengemas kini tema X. Apabila membetulkan milik anda, perlu diingat bahawa tema X tidak menggunakan hanya satu fail pengepala - ia menggunakan fail pengepala yang berbeza untuk setiap tindanan, jadi anda perlu mengedit fail anda.
Memandangkan Nick menggunakan timbunan Ethos tema X, dia terpaksa menambah baris kod yang saya nyatakan sebelum ini pada fail pengepala yang terletak dalam x /frameworks/views/ethos/wp-header.php . Jika anda menggunakan tindanan yang berbeza, gantikan nama tindanan anda (Integriti, Perbaharui, dsb.) dengan 'ethos' untuk mencari fail pengepala yang betul. Masukkan satu baris itu, dan voila! Anda boleh pergi.
Jadi Ini Membetulkan Pertanyaan Media CSS Saya Juga?
Apabila anda memasukkan baris itu dalam pengepala fail HTML anda, pertanyaan @media responsif anda akan tiba-tiba mula berfungsi semula dan versi mudah alih tapak web anda akan hidup semula. Terima kasih kerana membaca dan saya harap ia membantu!
Ingat kepada Payette Forward, David P.
