Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mengesan Peranti iPhone dan iPad dengan CSS?
Mengesan iPhone/iPad dengan CSS: Penyelesaian Masalah dan Penyelesaian
Soalan asal bertujuan untuk mengesan peranti iPhone dan iPad secara eksklusif melalui penggayaan CSS. Percubaan awal untuk melaksanakan penyelesaian menggunakan "@media pegang tangan, hanya skrin dan (lebar-peranti maksimum: 480px)" terbukti tidak berjaya.
Penyelesaian:
Untuk mengesan iPhone, iPad dan varian khusus mereka dengan berkesan memerlukan pendekatan yang lebih komprehensif. Pertanyaan media CSS berikut secara khusus menyasarkan dimensi skrin peranti yang berbeza dan nisbah piksel:
iPhone dan iPod touch:
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />
iPhone 4 dan iPod touch 4G :
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />
iPad:
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
Dengan memasukkan pertanyaan media ini ke dalam lembaran gaya anda, anda boleh memastikan gaya CSS tertentu digunakan berdasarkan jenis peranti yang dikesan. Pendekatan ini memberikan lebih fleksibiliti dan membolehkan anda menyesuaikan penampilan tapak web atau aplikasi anda kepada peranti iOS yang berbeza.
Atas ialah kandungan terperinci Bagaimana untuk Mengesan Peranti iPhone dan iPad dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!