Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mengesan Peranti iPhone dan iPad dengan CSS?

Bagaimana untuk Mengesan Peranti iPhone dan iPad dengan CSS?

Patricia Arquette
Patricia Arquetteasal
2024-11-08 20:16:02662semak imbas

How to Detect iPhone and iPad Devices with 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn