CSS - RWD Viewport نافذة العرض
CSS - نافذة العرض (Viewport) في التصميم المتجاوب
🔸 الـ Viewport هي مساحة العرض التي تُظهر محتوى صفحة الويب في المتصفح، وتختلف من جهاز لآخر (كمبيوتر - موبايل - تابلت).
لجعل موقعك يظهر بشكل جيد على الشاشات الصغيرة، من المهم التحكم في خصائص الـ Viewport باستخدام وسم <meta>.
🔹 وسم Viewport في HTML
لتمكين التصميم المتجاوب، أضف هذا الوسم داخل <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
📌 شرح الخصائص:
width=device-width: يجعل عرض الصفحة مساويًا لعرض الجهاز الفعلي.initial-scale=1.0: يحدد مقياس التكبير عند تحميل الصفحة (1.0 = بدون تكبير).
🧪 مثال عملي
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgray;
}
.box {
background-color: white;
padding: 20px;
margin: auto;
width: 90%;
}
@media (min-width: 768px) {
.box {
width: 50%;
}
}
</style>
</head>
<body>
<div class="box">
هذا محتوى متجاوب يتغير عرضه حسب حجم الشاشة.
</div>
</body>
</html>
💡 ملاحظات هامة
- بدون وسم
<meta name="viewport">، سيظهر موقعك بشكل مكبّر أو غير متناسق على الهواتف. - هذا الوسم ضروري في جميع المواقع الحديثة المتجاوبة.
- يُفضل كتابته في أعلى ملف
<head>.
تعليقات
إرسال تعليق