تا %60 تخفیف خرید برای 7 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

آموزش گام بە گام CSS: قسمت پانزدهم: Viewport چیست؟

Viewport

ViewPort به قسمت قابل مشاهده کاربر می گویند. مقادیر ViewPort متغیر است برای مثال در موبایل های هوشمند کوچکتر از کامپیوتر ها می باشد. همانطور که قبلا توضیح دادم، در ابتدای ساخت صفحات وب، صفحات مطابق با دستگاه تغییر سایز یا در واقع تغییر اندازه (ViewPort) نمی دادند.

با آمدن تکنولوژی HTML5 توانایی در اختیار گرفتن ViewPort برای ما بسیار ساده تر شده است. برای اینکار از تگ meta استفاده می شود.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

در مثال بالا از تگ meta با نام viewport استفاده شده است، این دستور باعث می شود که صفحه وب ما کنترل دستورالعمل های مرورگر را در اختیار بگیرد.

در قسمت دیگر از ویژگی content استفاده شده که برابر width=device-width قرار گرفته است، این ویژگی باعث می شود که عرض صفحه وب ما مطابق با عرض دستگاهی که در اختیار داریم واکنش نشان دهد.

قسمت آخر که جزو همان content است اولین سطح زوم کردن صفحه وب را در زمان لود صفحه قرار می دهد.

نکته: برای آنکه المنت هایتان در صفحات وب مطابق با اندازه تغییر کند بجای استفاده از مقادیر ثابت عددی از علامت % استفاده کنید. به مثال زیر توجه نمایید.

<!doctype html>
<html>
<head>
    <title> js </title>
<style>
    img
    {
        width: 80%;
    }
    p
    {
        width: 80%;
    }
    </style>
</head>
<body>  
 <img src="logo.png"/>
    <p>
    hello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITPro
    </p>
</body>
</html>

نویسنده : ارسطو عباسی

منبع : انجمن تخصصی فناوری اطلاعات ایران

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

نظر شما
برای ارسال نظر باید وارد شوید.
1 نظر
افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند