دقّة الشاشة ومعلومات الجهاز
هل تحتاج معرفة دقّة شاشتك للتصميم؟ أو نظام التشغيل لدعم فني؟ أو نوع المتصفّح للاستكشاف؟ هذه الأداة تعرض كل المعلومات التقنية عن جهازك دفعة واحدة. مفيدة للمطوّرين، المصمّمين، المختبرين، وأيّ شخص يحتاج معرفة تفاصيل جهازه بسرعة.
جاري تحميل المعلومات...
نصائح وملاحظات
دقّة الشاشة الفعّاليّة = الدقّة ÷ نسبة البكسلات (Retina display: 2x أو 3x).
حجم نافذة المتصفّح أصغر من الشاشة بسبب شريط العنوان والأشرطة الجانبية.
استخدم هذه المعلومات لتحسين التصميم — صمّم للموبايل أوّلاً ثم وسّع.
لقطة شاشة هذه الصفحة مفيدة للدعم الفنّي — توفّر معلومات شاملة.
المعلومات تُحدّث تلقائياً عند تغيير حجم النافذة أو دوران الجهاز.
الأخطاء الشائعة
الخلط بين دقّة الشاشة وحجم النافذة — الأولى الفيزيائية، الثانية للمتصفّح.
تجاهل نسبة البكسلات (DPR) — صورة 100×100 تظهر بـ 200×200 على Retina.
تصميم مواقع لدقّة واحدة فقط — استخدم Responsive Design.
اعتبار User Agent معلومة موثوقة — يمكن تزويرها بسهولة.
افتراض أنّ المعلومات سرّية — معظم المواقع تستطيع قراءتها.
نظرة عامة على دقّة الشاشة ومعلومات الجهاز
معلومات الجهاز والشاشة أداة تقنية تعرض كل المعلومات المتاحة عن جهازك ومتصفّحك من خلال JavaScript APIs. مفيدة للمطوّرين، المصمّمين، المختبرين، والدعم الفنّي.
المعلومات المعروضة
معلومات الشاشة
| المعلومة | الوصف | الاستخدام |
|---|---|---|
| دقّة الشاشة | عرض × ارتفاع الشاشة الفيزيائية | التصميم، الاختبار |
| المساحة المتاحة | الدقّة ناقص شريط المهامّ | تصميم نوافذ |
| حجم النافذة | المساحة داخل المتصفّح | التصميم المتجاوب |
| نسبة البكسلات (DPR) | الفيزيائي للمنطقي | صور Retina |
| عمق اللون | عدد البتات لكل بكسل | جودة الألوان |
| اتّجاه الشاشة | عمودي / أفقي | التطبيقات المتجاوبة |
معلومات المتصفّح والنظام
| المعلومة | الوصف |
|---|---|
| المتصفّح | Chrome, Safari, Firefox, Edge, Opera |
| نظام التشغيل | Windows, macOS, Android, iOS, Linux |
| اللغة | اللغة المفضّلة للمتصفّح |
| المنصّة | تفاصيل النظام |
| الكوكيز | هل مفعّلة؟ |
| الاتّصال | أونلاين / أوفلاين |
| User Agent | المعرّف الكامل للمتصفّح |
دقّات شاشة شائعة
موبايل (2024)
| الجهاز | الدقّة الفعلية | DPR |
|---|---|---|
| iPhone 15 Pro Max | 1290 × 2796 | 3x |
| iPhone 15 | 1170 × 2532 | 3x |
| Galaxy S24 Ultra | 1440 × 3088 | 3.5x |
| Galaxy A54 | 1080 × 2340 | 2.5x |
| Pixel 8 Pro | 1344 × 2992 | 3x |
لابتوب وكمبيوتر
| النوع | الدقّة | الاسم الشائع |
|---|---|---|
| HD | 1366 × 768 | اقتصادي |
| Full HD | 1920 × 1080 | القياسي |
| QHD/2K | 2560 × 1440 | عالي |
| 4K UHD | 3840 × 2160 | احترافي |
| 5K | 5120 × 2880 | iMac |
| 8K | 7680 × 4320 | المستقبل |
Device Pixel Ratio (DPR) — شرح متعمّق
DPR هو السرّ خلف حدّة Retina display:
DPR = 1: شاشة عادية. صورة 100×100 تظهر بـ 100×100 بكسل فيزيائي.
DPR = 2: شاشة Retina. صورة 100×100 تحتاج فعلاً 200×200 لتبدو حادّة. لو وضعت صورة 100×100، ستبدو ضبابية.
DPR = 3: شاشة فائقة الدقة (iPhone Pro وبعض أندرويد). صورة 100×100 تحتاج فعلاً 300×300 لتبدو حادّة.
حلّ للمطوّرين — استخدم srcset لتقديم صور مناسبة لكل DPR:
مثال: <img srcset="img-1x.png 1x, img-2x.png 2x, img-3x.png 3x">
استخدامات الأداة
للمصمّمين:
- معرفة دقّة شاشتك للعمل
- اختبار التصميم على أحجام مختلفة
- توثيق مواصفات الجهاز
- مقارنة ألوان وعمق
للمطوّرين:
- استكشاف الأخطاء البرمجية
- اختبار Responsive Design
- معرفة capabilities المتصفّح
- تحسين الأداء حسب الجهاز
للدعم الفنّي:
- جمع معلومات من المستخدم
- تشخيص مشاكل العرض
- تحديد إصدارات المتصفّحات
- تحسين تجربة المستخدم
للمختبرين:
- توثيق بيئة الاختبار
- تحديد متغيّرات المشاكل
- إعادة إنتاج الأخطاء
- تقارير الاختبار
الفرق بين Screen، Window، Viewport
Screen (الشاشة):
- مساحة الشاشة الفيزيائية كاملة
- يشمل شريط المهامّ، شريط الحالة
- ثابت لكل جهاز
Window (نافذة المتصفّح):
- المساحة التي يشغلها المتصفّح
- يشمل: العنوان، الأدوات، الإضافات
- يتغيّر بتكبير/تصغير النافذة
Viewport (منطقة العرض):
- المساحة الفعلية لمحتوى الموقع
- نافذة المتصفّح ناقص أشرطة التمرير
- الأهمّ للمطوّرين
| المثال | الشاشة | النافذة | Viewport |
|---|---|---|---|
| كمبيوتر مكتبي | 1920×1080 | 1920×1010 | 1903×910 |
| موبايل | 375×667 | 375×603 | 375×603 |
اتّجاه الشاشة (Orientation)
Portrait (عمودي): الارتفاع > العرض. للموبايل عادة. Landscape (أفقي): العرض > الارتفاع. للحاسوب أو موبايل مدار.
في CSS:
@media (orientation: portrait) { ... } @media (orientation: landscape) { ... }
عمق اللون (Color Depth)
| العمق | الألوان | الجودة |
|---|---|---|
| 1 بت | 2 (أبيض/أسود) | قديم جداً |
| 8 بت | 256 | أساسي |
| 16 بت | 65,536 | متوسّط |
| 24 بت | 16.7 مليون (True Color) | القياسي اليوم |
| 30 بت | 1.07 مليار (HDR) | احترافي |
| 48 بت | 281 ترليون | طبّي/علمي |
اليوم: معظم الأجهزة 24 بت. شاشات HDR الحديثة 30 بت.
User Agent — ما يكشفه عنك
سلسلة User Agent النموذجية:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
تكشف:
- المتصفّح: Chrome 120
- نظام التشغيل: Windows 10 (64-bit)
- المحرّك: WebKit / Blink
⚠تحذير أمان: User Agent يمكن تزويره بسهولة. لا تعتمد عليه للأمان أو منع الوصول.
الخصوصية و Browser Fingerprinting
المعلومات التي تكشفها هذه الأداة (وأيّ موقع) تُستخدم في Browser Fingerprinting:
- تتبّع المستخدم بدون كوكيز
- تحديد هويّة المستخدم عبر مواقع مختلفة
- اعتراض VPN (إذا تطابقت البصمة)
حماية:
- استخدم Brave Browser (يحمي بشكل افتراضي)
- Firefox مع إعدادات الخصوصية
- إضافات: CanvasBlocker, Privacy Badger
- Tor Browser للخصوصية القصوى
اختبار الموقع على أحجام مختلفة
أدوات للمطوّرين:
- Chrome DevTools (F12 ثمّ Toggle Device Toolbar)
- Firefox Responsive Design Mode
- BrowserStack (متصفّحات حقيقية)
- Sauce Labs (اختبار آلي)
- Responsively App (مفتوح المصدر)
نقاط الكسر (Breakpoints) الشائعة:
- < 640px: موبايل صغير
- 640-768px: موبايل كبير
- 768-1024px: تابلت
- 1024-1280px: لابتوب صغير
- > 1280px: لابتوب وأكبر
الخلاصة
هذه الأداة نافذة شاملة على معلومات جهازك التقنية. مفيدة للمطوّرين والمصمّمين للاختبار، للدعم الفنّي لتشخيص المشاكل، وللمستخدم العادي لمعرفة جهازه. اعرف ما تكشفه عن نفسك، استخدم هذه المعلومات بحكمة، وحافظ على خصوصيتك الرقمية باستخدام أدوات الحماية المناسبة.