این آموزش در تاریخ ۱۴۰۰/۱۰/۲۲ آپدیت شده است.

آموزش واکنش گرایی صفحات وب قدم اول

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

آموزش واکنش گرایی صفحات وب قدم اول

Free-Learn

آموزش واکنش گرایی صفحات وب قدم اول

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

این خط کد که میگم ، در واقع یک متاداده ( یا Meta Data ) هست بنام ویو پورت ( یا View Port ) ( در لغت به فارسی یعنی درگاه نمایش ) بطور کلی این متاداده باعث میشه مقیاس عناصر موجود در یک صفحه وب دقیقا به نسبت مقیاس صفحه نمایش باشه.

مثلا اندازه صفحه نمایش کامپیوتر خب بزرگه مال لپ تاپ کمی حالا میگیم کوچکتر، دوباره اندازه صفحه نمایش تبلت ها کوچکترن و در نهایت دوباره اندازه صفحه نمایش های موبایل کوچیکه.

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

ولی اگه ما از ویو پورت ( یا View Port ) استفاده نکرده باشیم ، عناصر در اندازه واقعی خودشون نمایش داده نمیشن و در نتیجه عناصر در صفحه خیلی ریز نشون داده میشن و نیازه مثلا با دست هی زوم کنیم ( و این تو حوزه طراحی وب یعنی اون سایت واکنش گرا نیست )

یادتون باشه اگه شما قدم دوم و سوم از واکنش گرایی رو هم یاد گرفته باشید و روی سایتتون پیاده کرده باشید ولی این متای ویو پورت رو در صفحه وبتون اضافه نکنید بازم بی فایدس و انگار هیچکاری نکردید.

خب من ۲ تا صفحه که یکیش از viewport استفاده کرده و دیگری از viewport استفاده نکرده براتون آماده کردم ، لطفا بهشون توجه نمایید.

اگه با گوشی موبایل وارد این صفحه شده اید برای مشاهده یک صفحه با متای viewport اینجا کلیک کنید و صفحه ای بدون viewport اینجا کلیک کنید.

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

Free-Learn

با متای ViewPort بیشتر آشنا شید

خب در ادامه آموزش واکنش گرایی صفحات وب قدم اول ، میخوایم با نحوه نوشتن و استفاده از متاداده ویو پورت آشنا بشیم.

  • شکل کلی این متاداده بصورت زیر می باشد :

  • که از ویژگی های زیر میتونیم در قسمت content استفاده نماییم :
ویژگی توضیح
height برای تنظیم میزان اندازه ارتفاع ViewPort
( پشتیبانی نمیشه پس نباید استفاده کرد )
width برای تنظیم میزان اندازه عرض ViewPort
بهترین مقدار : width=device-width
initial-scale میزان مقیاس ( رشد / بزرگ بودن ) عناصر را مشخص میکند
بهترین مقدار = initial-scale=1.0
minimum-scale حداقل میزانی که کاربر میتواند با دستش زوم کند
( استفاد ازش اصلا پیشنهاد نمیشه )
maximum-scale حداکثر میزانی که کاربر میتواند با دستش زوم کند
( استفاد ازش اصلا پیشنهاد نمیشه )
user-scalable مشخص میکند که آیا کاربر بتواند با دست بروی صفحه زوم کند یا خیر
( استفاده ازش پیشنهاد میشه )

Free-Learn

مثال از متای ViewPort

در ادامه چندین مثال از این متاداده میتوانید مشاهده نمایید.

مثال شماره ۱ : پراستفاده ترین و بهینه ترین روش استفاده از این ویوپورت ( پیشنهاد میشه )

امتحان کنید

مثال شماره ۲ : کاربر اجازه بزرگ نمایی ( زوم کردن با دست ) را ندارد

 

مثال شماره ۳ :استفاده از حداقل و حداکثر میزان بزرگ نمایی توسط کاربر


Free-Learn

نکات و توضیحات

  • این متاداده باید حتما در بین تگ <head> صفحه اضافه شود.
  • سعی کنید از مثال شماره ۱ که بیشترین سازگاری و استانداردتر می باشد استفاده نمایید.
  • بصورت پیش فرض مقدار user-scalable برابر با yes می باشد، این یعنی کاربر میتونه با دستش روی صفحه زوم کنه ( بهتره اینو همون yes بزارید و کاریش نداشته باشید )
  • این متاداده قدم اول برای واکنش گرایی می باشد ولی تنها و کافی نیست، باید حتما قدم ۲ و ۳ رو در جلسات بعدی یاد بگیرید.

Free-Learn

دریافت PDF یا پرینت این مطلب