حمیدرضا سلیمیان

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

دسته بندی مقالات
باهم در شبکه های اجتماعی !

متا تگ viewport :تعیین اندازه صفحه سایت در موبایل و تبلت ها

متا تگ viewport :تعیین اندازه صفحه سایت در موبایل و تبلت ها

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



 

 

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



 

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

متا تگ viewport :تعیین اندازه صفحه سایت در موبایل و تبلت ها متا تگ viewport :تعیین اندازه صفحه سایت در موبایل و تبلت ها
 

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

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

  • 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
    متا تگ viewport :تعیین اندازه صفحه سایت در موبایل و تبلت ها متا تگ viewport :تعیین اندازه صفحه سایت در موبایل و تبلت ها
     

    همونطور که میبینید در حالت بدون initial-scale صفحه زووم شده
  • درسته که width:320 کار شمارو راحت میکنه ، از این بابت که توی تمامی گوشیها با هر عرضی این طوری لود میشه ولی از کیفیت ظاهری کار کم می کنه چون صفحه با سایز اصلی نیست و حالت کشیدگی بخودش داره ،پیشنهاد من اینکه همیشه از width=device-width استفاده کنید
نام
ایمیل
متن نظر
عبارت داخل تصویر
 
شکوفه
۱۳۹۲/۱۱/۱۵ ۲۰:۲۰
ممنون.خیلی روان و خوب توضیح دادید
علی خسروی فر
۱۳۹۲/۱۱/۱۷ ۱۰:۵۷
همیشه این رو میدیدم ولی راستش نمی دونستم چی کار میکرد فقط کپیش میکردم خیلی عالی بود
morteza ansari
۱۳۹۲/۱۱/۲۰ ۰۲:۵۳
akharesh az meta tag estefa de konim ya az css esh ?
▬ ▬ حمید رضا سلیمیان
۱۳۹۲/۱۱/۲۰ ۰۹:۱۹
درسته روش متاتگ رایجه و مرورگر ها باهاش مشکلی ندارن ولی برای آینده و استاندارد سازی بهتر توی css هم بنویسیدش
هاشمی
۱۳۹۳/۰۴/۲۹ ۱۰:۵۰
سلام ممنون این کد رو کپی کردم در سایت و مشکل آیپد حل شدr مرسی
حامي
۱۳۹۳/۰۶/۲۷ ۰۰:۰۰
سلام آقاي سليمانيان ميشه يه لطفي بكنيد بگيد اين مديا اسكرين كه ميگيد دقيقاً كجاست؟ اصلاً اين كه توضيحشو شما داديد مربوط به اين مشكل آيپدمنم ميشه؟ راستش من وارد قسمت مدريت وبلاگم كه ميشم، وقتي مطلبم از يه حدي بيشتر باشه صفحه نصفه ميشه و ديگه حتي نميشه ثبت و اعمال تغييرات رو توي صفحه ديد،
▬▬ حمیدرضا سلیمیان
۱۳۹۳/۰۷/۰۸ ۲۲:۲۶
آقای حامی مدیا اسکرین یه قابلیت تو css هست که شما می تونید css خاصی رو به صفحه برای یک سایز خاص بدید ... ایم مقاله می تونه کمکتون بکنه برای وبلاگتون http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
فرامرز
۱۳۹۳/۱۲/۲۷ ۱۴:۱۳
سلام اینکه از viewport استفاده می کنید درست ولی سوال اینکه الان تو سایتی که فقط یک css برای سایز مثلا 970px تعریف شده و ما میایم داخل گوشی که عرض اون 320px سایت رو لود می کنیم بدون viewport به نظر میرسه که واکنش سایت به گوشی به این صورت که سایت رو در اندازه 970px باز می کنه ولی فقط 320px نمایش میده
▬▬حمیدرضا سلیمیان
۱۳۹۴/۰۳/۱۹ ۰۰:۰۰
با سلام عذرخواهیی بابت تاخیر بله درست میگید بخاطر همینه من توصیه می کنم که از
​content="width=device-width
استفاده کنید تا اندازه رندر رو بر عهده خود گوشی بگذارید و شما فقط روی کد های css مربوط به سایز تمرکز کن
اشکان
۱۳۹۴/۰۳/۲۹ ۰۸:۵۷
خیلی کامل و جامع بود. ایول
زهرا
۱۳۹۴/۰۵/۱۰ ۱۰:۱۸
سلام ببخشید سایتی که روش کار میکنم فقط روی مدل Samsung Galaxy Y بد نشون داده میشه، یعنی صفحه فیت نیس و منوها هم نمایش داده نمیشه، یعنی کلا روی رزولوشن ۲۴۰×۳۲۰ به پایین مشکل نمایش داره، من باید کدوم مقدارو تغییر بدم؟ یعنی اصن چیکار باید بکنم که روی گوشی های با این رزولوشن هم بدون مشکل صفحه نمایش د
▬▬ حمیدرضا سلیمیان
۱۳۹۴/۰۵/۱۹ ۱۲:۱۴
زهرا خانوم نظر من اینکه شما باید اینجا از قاعده @media تو css استفاده کنید که بتونید برای رزولوشن های خاص استایل های خاصی اعمال کنید