بلاگ شخصی حمیدرضا سلیمیان

اگر صفحه سایتی (که این متا تگ رو نداره)داخل گوشی مثل آیفون بازکنید می بینید که مرورگر صفحه رو با عرض 980 پیکسل رندر میکنه درحالی که عرض واقعی صفحه آیفون 320 پیکسله .
مشکلش اینکه خوانای صفحه رو بشدت کم میکنه .برای این که بتونید خوانایی رو بالا ببرید و همچنین با @media screen در css بتونید style های مخصوص سایزهای گوشی ها و تبلت ها رو درست کنید اول باید مرورگر صفحه رو توی اون سایز رندر کنه.درواقع …r متا تگ viewport به مرورگر میگه که سایت رو تو چه عرضی (width) رندر کنه
برای این کار این متا تگ رو توی تگ Head بزارید

توی این کد شما با مشخص کردن مقدار width=device-width به مرورگر اعلام کردید که صفحه رو با سایز اصلی (مثلادر آیفون با 320px) رندر کنه
می تونید هم خودتون دستی این عدد رو بزنید مثلا

  در عکس سمت چپ حالتی رو میبینید که متا تگ تعریف نشده ,همونطور که میبینید مرورگر سایت رو باسایز 980 پیکسل رندر کرده
در عکس سمت راست حالتی رو میبینید که viewport در آن تعریف شده و در واقع سایت رو با عرض خود گوشی ( در اینجا آیفون که با 320 پیکسل) رندر کردهr

 

تنظیم مقدار زووم صفحه

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

• width : عرض صفحه (بالا توضیح دادم) میتونه عددبه پیکسل باشه یا device-width
• height: طول صفحه میتونه عددبه پیکسل باشه یا device-width
• initial-scale : مقدار زووم اولیه صفحه ، مقدار پیشنهادی عدد 1 که یعنی صفحه بدون زووم لود بشه
• maximum-scale : بیشترین مقداری که کاربر میتونه صفحه رو زووم کنه ،عددی 1 به بالا ، اگر مقدار 1 باشه کاربر نمی تونه زووم (zoom in) کنه
• user-scalable : تعیین می کنید که ایا اصلا کاربر قادر هست زووم کنه یا نه ،مقدار هاش yes یا no

آیا این متا تگ استاندارده ؟

این متا تگ توسط اپل پیاده سازی شد و سریع رایج شد ولی از اونجایی که اسم اپل پشتش بود و این که طبق معمول ماکروسافت با مرورگر مزخرفش اینترنت اکسپلولر ساز خودش رو میزد ، W3C دست به کار شد و این رو در css قرار داد

@viewport{
    zoom: 1.0;
    width: device-width;
}

یا

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

و برای اینترنت اکسپلورر 10 به بالا

@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

تجربیات و پیشنهادات

• همیشه از viewport استفاده کنید . حتی اگر قالب شما ریسپانسیو نباشد .(چرا؟) به طور مثال اگر قالب شما برای سایز های بالای 900 پیکسل درست شده باشد به احتمال خیلی زیاد قالب شما در سایز های کوچیک بهم میریزه .ولی شما می تونید با viewport تعیید کنید که با سایز اصلی 900 پیکسل در گوشی ها و تبلیت ها رندر بشه که قالب بهم نخوره
• از هر دو روش (متا تگ و استاندارد) استفاده کنید
• initial-scale را تعیین کنید اگر تعیین نشه سایت تو حالت landscape بهم میریزه . در عکس های زیر سمت چپ حالت بدون initial-scale و سمت راستی حالتی initial-scale=1
  

   
  
  همونطور که میبینید در حالت بدون initial-scale صفحه زووم شده
• درسته که width:320 کار شمارو راحت میکنه ، از این بابت که توی تمامی گوشیها با هر عرضی این طوری لود میشه ولی از کیفیت ظاهری کار کم می کنه چون صفحه با سایز اصلی نیست و حالت کشیدگی بخودش داره ،پیشنهاد من اینکه همیشه از width=device-width استفاده کنید