آشنایی با متاتگ viewport

استفاده از متا تگ viewport برای کنترل طرح بندی در مرورگرهای تلفن همراه

در این بخش نحوه استفاده از تگ <viewport"<meta" برای کنترل اندازه و شکل viewport توضیح داده می شود.

پیش زمینه

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

دستگاه های با صفحه نمایش باریک (مثلاً تلفن های همراه) صفحات را در یک پنجره مجازی یا viewport، که معمولاً عریض تر از صفحه نمایش است، رندر می کنند و سپس نتیجه رندر شده را کوچک می کنند تا همه آن ها به یکباره دیده شوند. سپس کاربران می توانند برای دیدن مناطق مختلف صفحه، حرکت و بزرگنمایی (zoom) کنند. به عنوان مثال، اگر صفحه نمایش تلفن همراه دارای عرض 640 پیکسل باشد، ممکن است صفحات با یک viewport مجازی 980 پیکسلی نمایش داده شوند، و سپس کوچک شوند تا در فضای 640 پیکسلی قرار گیرند.

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

وارد کردن متا تگ viewport

با این حال، این مکانیسم برای صفحاتی که برای صفحه نمایش های باریک با استفاده از media queries بهینه شده اند، چندان خوب نیست - برای مثال اگر viewport مجازی 980 پیکسل باشد، media queries که با 640 پیکسل یا 480 پیکسل یا کمتر وارد می شوند، هرگز استفاده نخواهند شد و کارایی چنین تکنیک های طراحی رسپانسیوی را محدود می کند.

برای حل این مشکل viewport مجازی در دستگاه های با صفحه نمایش باریک، اپل "viewport meta tag" را در Safari iOS معرفی کرد تا به توسعه دهندگان وب اجازه دهد اندازه و مقیاس viewport را کنترل کنند. در حال حاضر بسیاری از مرورگرهای موبایل دیگر از این تگ پشتیبانی می کنند، هرچند که بخشی از هیچ استاندارد وبی نیست. اسناد اپل به خوبی توضیح می دهد که چگونه توسعه دهندگان وب می توانند از این تگ استفاده کنند، اما ما مجبور شدیم یک کار کارآگاهی انجام دهیم تا دقیقاً نحوه پیاده سازی آن در Fennec را بفهمیم. برای مثال، اسناد Safari می گوید که محتوا یک «فهرست محدود شده با کاما» است، اما مرورگرها و صفحات وب موجود از هر ترکیبی از کاما، نقطه ویرگول و فاصله به عنوان جداکننده استفاده می کنند.

مبانی و اصول Viewport

یک سایت معمولی بهینه شده برای موبایل حاوی چیزی شبیه به زیر است:

ویژگی width اندازه viewport را کنترل می کند. می توان آن را روی تعداد خاصی از پیکسل ها مانند width=600 یا مقدار ویژه device-width ، که عرض صفحه در پیکسل های CSS در مقیاس 100٪ است، تنظیم کرد. (مقادیر height و device-height مرتبطی وجود دارد، که ممکن است برای صفحات دارای عناصری که اندازه یا موقعیت خود را بر اساس ارتفاع viewport تغییر می دهند مفید باشد.)

ویژگی initial-scale سطح بزرگنمایی (zoom level) را هنگام بارگیری صفحه برای اولین بار کنترل می کند. ویژگی های maximum-scale ، minimum-scale و ویژگی های user-scalable چگونگی اجازه بزرگ کردن یا کوچک کردن صفحه را به کاربران کنترل می کنند.

هشدار: استفاده از user-scalable=no می تواند مشکلات دسترسی را برای کاربرانی که دارای اختلالات بینایی مانند دید ضعیف هستند، ایجاد کند.

یک پیکسل یک پیکسل نیست!

در سال های اخیر، رزولوشن یا وضوح صفحه نمایش به اندازه ای افزایش یافته است که تشخیص تک تک پیکسل ها با چشم انسان دشوار است. برای مثال، گوشی های هوشمند اخیر عموماً دارای صفحه نمایش 5 اینچی با وضوح 1080 تا 1920 پیکسل (400 dpi~) هستند. به همین دلیل، بسیاری از مرورگرها می توانند با ترجمه چندین پیکسل سخت افزاری برای هر "پیکسل " CSS، صفحات خود را در اندازه فیزیکی کوچکتر نمایش دهند. در ابتدا این امر باعث ایجاد مشکلات قابلیت استفاده و خوانایی در بسیاری از وب سایت های بهینه شده لمسی (touch-optimized web sites) شد. Peter-Paul Koch در مورد این مشکل در A pixel is not a pixel نوشته است.

در صفحات با dpi بالا، صفحات با initial-scale=1 از طریق مرورگرها به طور موثری بزرگ می شوند. متن آنها صاف و واضح خواهد بود، اما تصاویر bitmap آنها احتمالاً از وضوح تمام صفحه استفاده نمی کنند. برای دریافت تصاویر واضح تر در این صفحه ها، توسعه دهندگان وب ممکن است بخواهند تصاویر – یا طرح بندی های کامل – را در مقیاسی بالاتر از اندازه نهایی شان طراحی کنند و سپس با استفاده از ویژگی های CSS یا Viewport، مقیاس آن ها را کاهش دهند. این مطلب با CSS 2.1 specification مطابقت دارد که می گوید:

اگر تراکم پیکسلی دستگاه خروجی بسیار متفاوت از یک نمایشگر معمولی کامپیوتر باشد، user agent باید مقادیر پیکسل را تغییر دهد. توصیه می شود که واحد پیکسل به کل تعداد پیکسل های دستگاهی که به بهترین شکل ممکن پیکسل مرجع (reference pixel) را تخمین می زند اشاره کند. همچنین توصیه می شود که پیکسل مرجع زاویه دید یک پیکسل در دستگاهی با تراکم پیکسلی 96dpi و فاصله از خواننده به اندازه یک بازو باشد.

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

نسبت پیکسل پیش فرض به تراکم نمایشگر بستگی دارد. در نمایشگری با تراکم کمتر از 200dpi ، این نسبت برابر با 1.0 است. در نمایشگرهایی با تراکم بین 200 تا 300dpi ، این نسبت برابر با 1.5 است. برای نمایشگرهایی با تراکم بیش از 300dpi ، این نسبت کف عدد صحیح است (density/150dpi). توجه داشته باشید که نسبت پیش فرض تنها زمانی درست است که مقیاس viewport برابر با 1 باشد. در غیر این صورت، رابطه بین پیکسل های CSS و پیکسل های دستگاه به سطح زوم فعلی بستگی دارد.

عرض viewport و عرض صفحه نمایش

سایت ها می توانند viewport نمای خود را روی یک اندازه خاص تنظیم کنند. به عنوان مثال، تعریف "width=320, initial-scale=1" را می توان برای دقیق متناسب کردن روی یک صفحه نمایش تلفن کوچک در حالت عمودی استفاده کرد. وقتی مرورگر صفحه ای را با اندازه بزرگ تر رندر نمی کند، این امر می تواند مشکلاتی ایجاد کند. برای رفع این مشکل، مرورگرها در صورت لزوم، عرض viewport را افزایش می دهند تا صفحه در مقیاس درخواستی پر شود. این به ویژه در دستگاه های با صفحه نمایش بزرگ مانند iPad مفید است. (انتخاب یک viewport برای سایت های iPad توسط Allen Pike توضیح خوبی برای توسعه دهندگان وب دارد.)

برای صفحاتی که یک مقیاس اولیه یا حداکثر را تنظیم می کنند، این بدان معناست که ویژگی width در واقع به یک حداقل عرض viewport ترجمه می شود. به عنوان مثال، اگر طرح شما به عرض حداقل 500 پیکسل نیاز دارد، می توانید از نشانه گذاری زیر استفاده کنید. وقتی صفحه نمایش بیش از 500 پیکسل عرض داشته باشد، مرورگر viewport را (به جای zoom) گسترش می دهد تا متناسب با صفحه نمایش باشد:

سایر attribute های موجود عبارتند از: حداقل مقیاس (minimum-scale)، حداکثر مقیاس (maximum-scale) و مقیاس پذیر توسط کاربر (user-scalable). این property ها بر مقیاس و عرض اولیه و همچنین محدود کردن تغییرات در سطح زوم تأثیر می گذارد.

همه مرورگرهای تلفن همراه تغییرات جهت (orientation) را به یک شکل انجام نمی دهند. به عنوان مثال، Mobile Safari اغلب هنگام تغییر از حالت عمودی به افقی، به جای اینکه صفحه را همانطور که در ابتدا در حالت افقی بارگذاری شده بود قرار دهد، فقط صفحه را زوم می کند. اگر توسعه دهندگان وب می خواهند تنظیمات مقیاس آن ها هنگام تغییر جهت ها در آیفون ثابت بماند، باید یک مقدار maximum-scale را برای جلوگیری از این عمل زوم کردن اضافه کنند، که گاهی اوقات عوارض جانبی ناخواسته ای دارد که مانع از انجام zoom توسط کاربران می شود:

با تنظیم مقیاس اولیه و مقادیر حداقل مقیاس روی 0.86، زوم کوچک اعمال شده توسط بسیاری از تلفن های هوشمند را متوقف کنید. نتیجه این است که اسکرول افقی در هر جهتی متوقف می شود و کاربر در صورت تمایل می تواند زوم کند.

اندازه های viewport رایج برای موبایل و تبلت

اگر می خواهید بدانید چه دستگاه های تلفن همراه و تبلتی دارای چه عرض viewport هستند، فهرست جامعی از اندازه های نمای موبایل و تبلت وجود دارد که اطلاعاتی مانند عرض viewport در جهت عمودی و افقی و همچنین اندازه فیزیکی صفحه نمایش، سیستم عامل و تراکم پیکسلی دستگاه را ارائه می دهد.