Bagaimana untuk Mengesan Orientasi Peranti dan Viewport untuk Pengalaman Pengguna Mudah Alih Optimum?

Mengesan Orientasi Peranti dan Viewport untuk Pengalaman Pengguna Optimum

Apabila mereka bentuk tapak web mudah alih, adalah penting untuk mempertimbangkan pengalaman pengguna merentas pelbagai peranti dan orientasi . Untuk meningkatkan perjalanan pengguna, anda mungkin menghadapi situasi di mana halaman tertentu terbaik dilihat dalam mod landskap.

Mengesan Orientasi Port Pandangan Pengguna

Untuk menentukan sama ada pengguna melihat halaman dalam mod potret atau landskap, anda boleh memanfaatkan kod JavaScript. Kod ini menyemak dimensi port pandangan:

if(window.innerHeight > window.innerWidth){
    // User is viewing in portrait mode
}
else{
    // User is viewing in landscape mode
}

Memaparkan Mesej Makluman Orientasi

Jika pengguna melihat halaman dalam mod potret, anda boleh memaparkan mesej amaran yang menasihati mereka untuk bertukar kepada mod landskap untuk pengalaman yang dioptimumkan.

if(window.innerHeight > window.innerWidth){
    alert("Please use landscape mode for the best experience!");
}

Pilihan Alternatif untuk Pengesanan Orientasi

jQuery Mobile menyediakan acara orientationchange, yang tercetus apabila orientasi peranti berubah. Anda boleh menggunakan acara ini untuk memaparkan mesej dengan sewajarnya.

Selain itu, anda boleh menggunakan sifat window.orientation, yang mengukur orientasi peranti dalam darjah.

Mengendalikan Kehadiran Papan Kekunci

Pada peranti mudah alih, kehadiran papan kekunci boleh menjejaskan nilai window.innerHeight dan window.innerWidth. Untuk mengurangkan isu ini, anda boleh menggunakan screen.availHeight dan screen.availWidth sebaliknya, yang memberikan dimensi yang lebih tepat walaupun apabila papan kekunci dibuka.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Orientasi Peranti dan Viewport untuk Pengalaman Pengguna Mudah Alih Optimum?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!