سایزهای استاندارد طراحی وب سایت ریسپانسیو

سایزهای استاندارد طراحی وب سایت ریسپانسیو
بعدها ساخت وب سایت تلفن همراه

320*480 پیکسل

360*640 پیکسل

بعدها طراحی وب سایت تبلت و دسکتاپ

1024*768 پیکسل

طراحی سایت در مشهد

بعدها ساخت سایت دسکتاپ

800*1280 پیکسل

980*1280 پیکسل

1280*600 پیکسل

1290*900 پیکسل

زمانی که شما در ساخت وب سایت برای دسکتاپ ، در برگه سه div کنار هم داشته باشید که پهنا ورقه را پوشش می‌دهند ، در سود برای اکران وب سایت در شرایطی که رزولوشن 360 پیکسل می باشد ، می بایست سه div تولید گردیده پایین هم اکران داده شوند.

برای اخذ شایسته ترین سود می بایست اندازه پهنا موادتشکیل دهنده (width) را با درصد تهیه نمود و خیر پیکسل ، یعنی در نمونه نقل شده می بایست معیار پهنا هر div به اندازه 30% باشد خیر 300پیکسل.

تصویر تحت گویای این زمینه می‌باشد.

به کد ذیل اعتنا نمایید :

درین قطعه بیان شده که در شرایطی که اندازه مرورگر از 500 پیکسل بزرگتر باشد رنگ بگراند سبز و در غیر این فیس قرمز رنگ باشد.

یعنی شما با کوچک و وسیع کردن مرورگر بایستی این تغییرات را ببینید.

همان طور که گفته شد برای تایپ کردن یک تارنما ریسپانسیو احتیاج به به کارگیری از کتابخانه ها و کامپوننت های خاصی خواهید داشت.

وسیع ترین نیازمندی کاغذ عکس العمل گرا این میباشد که وبسایت شما قابلیت و امکان رندر شدن در دستگاه های با رزولوشن های دیگر را داشته باشد ، به کارگیری از تگ viewport تارنما را قابل رندر شدن در سایزهای متعدد می کند.

فارغ از این تگ مرورگرها برگه وب سایت شمارا با اندازه 980 رندر می‌نمایند.

تگ viewport چه است؟
همان طور که گفته شد این تگ چه در ساخت وب سایت ریسپانسیو و چه در وب سایت های غیر ریسپانسیو تگ مفیدی می باشد ، چرا‌که در‌صورتی‌که وب سایت شما برای اندازه های فراتر از 900 پیکسل درج شده باشد هنگام اکران در سایزهای کوچکتر به هم می‌خورد ، به کار گیری از این متا تگ سبب رندر شدن وبسایت در سایز 900 در گوشی خواهد شد و از به هم ریختگی تارنما در گوشی دوری میکند.

چه گونه از تگ viewport استعمال کنیم؟
کد نمونه بالا را در نظربگیرید ، برای تولید مثال وبسایت ریسپانسیو ، در بخش head تارنما ، کد پایین را وارد نمائید(مانند نمونه):

meta name=”viewport” content=”width=device-width, initial-scale=1.0″

همانگونه که می‌بینید در بخش content میتوانید حالت مختلفی را جهت اکران وب سایت انتخاب فرمائید.

وظیفه width=device-width چه چیزی است؟
width=device-width به مرورگر امر میدهد که پهنا برگه وب سایت را با پهنا موبایل یکسان نماید ، یعنی در صورتی تارنما در تلفن همراه گوشی با اندازه 360 چشم شود ، وبسایت نسبت بدین اندازه برخورد نشان داده و پهنا آن به 360 عوض میشود.

این متغیر حتی قابلیت اخذ مقدار عددی را هم داراست.

وظیفه initial-scale :
معیار zoom پیش فرض مرورگر را انتخاب می نماید ، ممکن می باشد مبتنی بر مدل تارنما ، طراح بخواهد هنگام اکران تارنما در یک دستگاه به طور پیش فرض در موقعیت zoom دوبرابر یا این که غیره قرار داشته باشد.

در وضعیت پیش فرض زووم روی 1 تهیه شده‌است.

وظیفه user-scalable=yes/noچیست؟
قابلیت و امکان zoom کردن روی وبسایت را به طور کلی می اقتدار با به کار گیری از این متغیر به بازدید کننده بخشید (yes) و یا این که کلا زووم را غیر فعال نمود (no)