Seorang teman saya baru-baru ini menghubungi saya untuk meminta bantuan terkait situs WordPress yang dibuatnya menggunakan tema X. Kliennya meneleponnya pagi itu setelah dia menyadari bahwa situs webnya tidak ditampilkan dengan benar di iPhone-nya. Nick memeriksanya sendiri, dan tentu saja, desain responsif cantik yang dirancangnya tidak berfungsi lagi.
Dia semakin bingung dengan fakta bahwa ketika dia mengubah ukuran jendela browser di desktopnya, situs tersebut responsif, tetapi di iPhone-nya, hanya versi desktop yang ditampilkan. Mengapa situs menjadi responsif di komputer desktop dan non-responsif di perangkat seluler?
Mengapa Desain Responsif Tidak Bekerja
Desain responsif berhenti bekerja ketika satu baris kode hilang dari header file HTML. Jika satu baris kode ini hilang, iPhone, Android, dan perangkat seluler lainnya akan menganggap bahwa situs web yang Anda lihat adalah situs desktop ukuran penuh dan menyesuaikan ukuran viewportuntuk mencakup seluruh layar.
Apa yang Anda maksud dengan Viewport dan Ukuran Viewport?
Di semua perangkat, ukuran viewport mengacu pada ukuran area halaman web yang saat ini terlihat oleh pengguna. Bayangkan Anda sedang memegang iPhone 5 dengan lebar 320 piksel. Kecuali dinyatakan lain secara eksplisit, iPhone berasumsi bahwa setiap situs web yang Anda kunjungi adalah situs desktop dengan lebar 980 piksel.
Sekarang, menggunakan iPhone 5 imajiner Anda, Anda mengunjungi situs web yang dirancang untuk desktop dengan lebar 800px. Tata letaknya tidak responsif, sehingga iPhone Anda menampilkan versi desktop dengan lebar penuh.
Tidak, bukan. Dengan ukuran area pandang, penskalaan dapat dilibatkan . IPhone harus memperkecil untuk melihat versi halaman web dengan lebar penuh. Ingat bahwa area pandang mengacu pada area halaman yang saat ini terlihat oleh pengguna. Apakah pengguna iPhone saat ini hanya melihat 320 piksel halaman, atau mereka melihat versi lebar penuh?
Benar: Mereka melihat halaman web dengan lebar penuh di layar mereka karena iPhone menganggap perilaku defaultnya: Halaman web diperkecil sehingga pengguna dapat melihat halaman web hingga lebar 980 piksel. Oleh karena itu, viewport iPhone adalah 980px.
Saat Anda memperbesar atau memperkecil, ukuran viewport berubah. Kami mengatakan sebelumnya bahwa situs web imajiner kami memiliki lebar 800px, jadi jika Anda memperbesar iPhone Anda sehingga tepi situs web menyentuh tepi layar iPhone Anda, viewport akan menjadi 800px. IPhone dapat memiliki viewport 320px di situs desktop, tetapi jika demikian, Anda hanya akan melihat sebagian kecil saja.
Situs Responsif Saya Rusak. Bagaimana saya memperbaikinya?
Jawabannya adalah satu baris HTML yang ketika disisipkan di header halaman web memberi tahu perangkat untuk menyetel area pandang ke lebarnya sendiri (320px untuk iPhone 5) dan bukan untuk menskalakan (atau perbesar) halaman.
Untuk diskusi lebih teknis tentang semua opsi yang terkait dengan meta tag ini, lihat artikel ini di tutsplus.com.
Cara Memperbaiki Tema WordPress X Saat Tidak Responsif
Kembali ke teman saya sebelumnya: Satu baris kode ini hilang saat dia memperbarui tema X. Saat memperbaiki milik Anda, perlu diingat bahwa tema X tidak hanya menggunakan satu file header – ini menggunakan file header yang berbeda untuk setiap tumpukan, jadi Anda harus mengedit milik Anda.
Karena Nick menggunakan tumpukan Ethos dari tema X, dia harus menambahkan baris kode yang saya sebutkan sebelumnya ke file header yang terletak di x /frameworks/views/ethos/wp-header.php . Jika Anda menggunakan tumpukan yang berbeda, gantikan nama tumpukan Anda (Integrity, Renew, dll.) dengan 'ethos' untuk menemukan file header yang benar. Masukkan satu baris itu, dan voila! Anda baik untuk pergi.
Jadi Ini Juga Memperbaiki Kueri Media CSS Saya?
Saat Anda menyisipkan baris tersebut di header file HTML, kueri @media responsif Anda akan tiba-tiba mulai berfungsi kembali dan versi seluler situs web Anda akan hidup kembali. Terima kasih telah membaca dan semoga membantu!
Ingat Payette Forward, David P.
