هل تتحدث عن موقع ويب؟ إذا كان الأمر كذلك فهى قابلة للتنفيذ:
- أحد الطرق الشائعة لفعل ذلك هي من خلال استخدام خاصية user agent لتحديد نظام التشغيل الذي يستخدمه المستخدم، واستخدام المعلومات لعرض محتوى مختلف للمستخدمين بناءًا على نظام التشغيل الخاص بهم.
<script>
const isIOS = navigator.userAgent.match(/(iPhone|iPad|iPod touch)/i);
if (isIOS) {
// Your code here
}
</script>
بالإضافة للطريقة الأولى تستطيع إضافة طبقة تأكد أخرى من خلال استخدام خاصية devicePixelRatio لتحديد كثافة بكسل الشاشة لعرض محتوى مختلف للمستخدمين بناءًا على كثافة بكسل الشاشة الخاصة بهم.
<script>
const isIOS = window.devicePixelRatio === 2;
if (isIOS) {
// Your code here
}
</script>
يوجد أيضًا خاصية orientation لتحديد اتجاه الشاشة من أجل عرض محتوى مختلف للمستخدمين بناءًا على اتجاه الشاشة الخاص بهم.
<script>
const isIOS = window.orientation === "portrait";
if (isIOS) {
// Your code here
}
</script>
وإليك مثال على كيفية استخدام خاصية user agent لعرض محتوى مختلف للمستخدمين بناءًا على نظام التشغيل الخاص بهم:
<html>
<head>
<title>My Website</title>
</head>
<body>
<div id="ios-content">
<!-- هذا المحتوى سيتم عرضه فقط لأجهزة iOS -->
</div>
<div id="other-content">
<!-- هذا المحتوى سيتم عرضه لجميع الأجهزة الأخرى -->
</div>
<script>
// التحقق مما إذا كان المستخدم يستخدم جهاز iOS
const isIOS = navigator.userAgent.match(/(iPhone|iPad|iPod touch)/i);
// عرض المحتوى المخصص لجهاز iOS إذا كان المستخدم يستخدم جهاز iOS
if (isIOS) {
document.getElementById("ios-content").style.display = "block";
document.getElementById("other-content").style.display = "none";
} else {
// عرض المحتوى لجميع الأجهزة الأخرى إذا لم يكن المستخدم يستخدم جهاز iOS
document.getElementById("other-content").style.display = "block";
document.getElementById("ios-content").style.display = "none";
}
</script>
</body>
</html>
