Laman Web Responsif Saya Tidak Berfungsi. Pembetulan: Viewport.

My Responsive Website Isn T Working







Cuba Instrumen Kami Untuk Menghapuskan Masalah

surat-surat yang mempunyai akhlak yang baik untuk imigresen

Seorang rakan saya baru-baru ini menghubungi saya untuk meminta pertolongan dengan laman WordPress yang telah dibina menggunakan tema X. Pelanggannya memanggilnya pagi itu setelah dia menyedari bahawa laman webnya tidak dipaparkan dengan betul di iPhone. Nick memeriksanya sendiri, dan pasti, reka bentuk responsif yang indah yang dirancangnya tidak berfungsi lagi.





Dia semakin terkejut dengan kenyataan bahawa ketika dia mengubah ukuran tetingkap penyemak imbasnya di desktop, laman web tersebut adalah responsif, tetapi pada iPhone-nya, hanya versi desktop yang dipaparkan. Mengapa laman web menjadi responsif pada komputer desktop dan tidak responsif pada peranti mudah alih?



Mengapa Reka Bentuk Responsif Tidak Berfungsi

Reka bentuk responsif berhenti berfungsi apabila satu baris kod hilang dari tajuk fail HTML. Sekiranya satu baris kod ini hilang, iPhone, Android, dan peranti mudah alih anda akan menganggap bahawa laman web yang anda lihat adalah laman web desktop bersaiz penuh dan menyesuaikan ukuran kawasan pandang untuk merangkumi keseluruhan skrin.

Apa Yang Anda Maksud Dengan Ukuran Viewport dan Viewport?

Pada semua peranti, ukuran area pandang merujuk kepada ukuran luas laman web yang saat ini dapat dilihat oleh pengguna. Bayangkan anda memegang iPhone 5 dengan lebar 320 piksel. Kecuali jika dinyatakan secara jelas, iPhone menganggap bahawa setiap laman web yang anda lawati adalah laman web desktop dengan lebar 980 piksel.

Sekarang, menggunakan iPhone 5 khayalan anda,anda melayari laman web yang direka untuk desktop seluas 800px. Ia tidak mempunyai susun atur yang responsif, jadi iPhone anda memaparkan versi desktop lebar penuh.





telefon terus ke iphone mel suara

Tetapi iPhone 5 hanya selebar 320 piksel. Bukankah itu seluas ukuran pandangan?

Tidak ianya bukan. Dengan saiz ruang pandang, penskalaan boleh dilibatkan . IPhone mesti mengezum keluar untuk melihat versi laman web dengan lebar penuh. Ingat bahawa viewport merujuk kepada kawasan halaman yang kini dapat dilihat oleh pengguna. Adakah pengguna iPhone saat ini hanya melihat 320 piksel halaman, atau mereka melihat versi lebar penuh?

Betul: Mereka melihat halaman web lebar penuh di paparan mereka kerana iPhone menganggapnya sebagai tingkah laku lalai: Ia diperkecil sehingga pengguna dapat melihat halaman web dengan lebar 980 piksel. Oleh itu, paparan iPhone 980 piksel.

Semasa anda mengezum masuk atau memperkecil, ukuran ruang pandang berubah. Kami mengatakan sebelum ini bahawa laman web khayalan kami mempunyai lebar 800 piksel, jadi jika anda mengezum masuk iPhone anda sehingga tepi laman web menyentuh tepi paparan iPhone anda, ruang pandang akan menjadi 800 piksel. IPhone boleh mempunyai viewport 320px di laman desktop, tetapi jika berlaku, anda hanya akan melihat sebahagian kecil daripadanya.

imessage tidak akan menghantar mesej

Laman Web Responsif Saya Rosak. Bagaimana Saya Memperbaikinya?

Jawapannya adalah satu baris HTML yang apabila disisipkan di header halaman web memberitahu perangkat untuk mengatur viewport ke lebarnya sendiri (320px untuk iPhone 5) dan tidak membuat skala (atau zoom) halaman.

Untuk perbincangan yang lebih teknikal mengenai semua pilihan yang berkaitan dengan tag meta ini, lihat artikel ini di tutsplus.com .

Cara Memperbaiki Tema WordPress X Apabila Tidak Responsif

Kembali kepada rakan saya dari sebelumnya: Satu baris kod ini hilang ketika dia mengemas kini tema X. Semasa memperbaiki tema anda, ingatlah bahawa tema X tidak hanya menggunakan satu fail tajuk - ia menggunakan fail tajuk yang berbeza untuk setiap timbunan, jadi anda harus mengeditnya.

bateri iphone 6s tidak akan dicas

Oleh kerana Nick menggunakan tema Ethos stack of X, dia harus menambahkan baris kod yang saya sebutkan sebelumnya ke file header yang terletak di x /frameworks/views/ethos/wp-header.php . Sekiranya anda menggunakan timbunan yang berbeza, ganti nama timbunan anda (Integrity, Renew, etc.) dengan ‘etos’ untuk mencari fail tajuk yang betul. Masukkan satu baris, dan voila! Anda baik untuk pergi.

Jadi Ini Memperbaiki Pertanyaan Media CSS Saya, Terlalu?

Apabila anda memasukkan baris itu dalam tajuk fail HTML anda, pertanyaan @media responsif anda akan mula berfungsi semula dan versi mudah alih laman web anda akan kembali hidup. Terima kasih kerana membaca dan saya harap ia dapat membantu!

Ingatlah untuk Payette Forward,
David P.