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

توضیحات کاملمتا تگ درگاه دیدو صفات آن مثال ها، یادداشت ها و توصیه هایی برای تطبیق سایت برای دستگاه های تلفن همراه. و همچنین متا تگ های اضافی و مفید: دستی دوستانه, MobileOptimizedو apple-mobile-web-app-capable.

• متا تگ viewport
  • ویژگی های متا تگ viewport
• متا تگ های اضافی و مفید
  • متا تگ HandheldFriendly
  • متا تگ Mobile Optimized
  • متا تگ apple-mobile-web-app-capable
• مجموعه ای از متا تگ های پیشنهادی

متا تگ viewport

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

توجه داشته باشید: متا تگ پست دیددر استاندارد رسمی گنجانده نشده است و بخشی از مشخصات است سازگاری دستگاه CSS(http://goo.gl/FSTGbn). اما تا زمانی که این مشخصات نهایی نشده و به صورت جهانی اعمال شود، استفاده از متا تگ توصیه می شود درگاه دیدبه تنهایی و در ترکیب با سبک ها @viewportبرای اهداف سازگاری

مثال:

ویژگی های متا تگ viewport

متا تگ درگاه دیدممکن است دارای ویژگی های زیر باشد که با کاما (،) از هم جدا شده اند:

عرض- عرض درگاه دید

مقدار مشخصه یک عدد صحیح غیر منفی از است 200 قبل از 10000 پیکسل یا ثابت عرض دستگاه، که عرض صفحه را با توجه به اندازه صفحه تنظیم می کند.

اگر مقدار تنظیم نشده باشد، به طور پیش فرض روی - Mobile Safari = 980px، Opera = 850px، Android WebKit = 800px، IE = 974px تنظیم می شود.

توجه داشته باشید: برای وب سایت های ریسپانسیو توصیه می شود از: width=device-width استفاده کنید.

ارتفاع- ارتفاع درگاه دید

مقدار مشخصه یک عدد صحیح غیر منفی از است 233 قبل از 10000 پیکسل یا ثابت دستگاه-ارتفاع، که ارتفاع صفحه را با توجه به اندازه صفحه تنظیم می کند.

توجه داشته باشید: اگر ویژگی مشخص شده باشد عرض، مشخصه را مشخص کنید ارتفاعلازم نیست.

مقیاس اولیه- مقیاس اولیه صفحه

0.1 قبل از 1.0 . معنی 1.0 مقیاس را تعیین می کند 1:1 ، یعنی "مقیاس نکنید".

توجه داشته باشید: در برخی سیستم های عامل (iOS، تلفن ویندوزو غیره.)عرض صفحه، هنگام چرخش، بدون تغییر باقی می ماند. به جای توزیع مجدد محتوا، مقیاس بندی می شود. بنابراین، استفاده از: مقیاس اولیه = 1.0.

مقیاس پذیر برای کاربر- در دسترس بودن مقیاس صفحه توسط کاربر.

مقدار مشخصه یک بولی است " آره» (1) - می توان مقیاس یا « نه» (0) - مقیاس پذیر نیست.

توجه داشته باشید: توصیه می شود از مقدار " استفاده کنید آره" ، و از به صورت پیش فرض تنظیم شده است مقیاس پذیر برای کاربرممکن است نشان داده شود یا نباشد.

حداقل مقیاس- حداقل مقیاس دید

مقدار مشخصه عددی با نقطه از است 0.1 قبل از 1.0 . در موبایل مرورگر سافاریپیش فرض 0.25 است. معنی 1.0 مقیاس را تعیین می کند 1:1 ، یعنی "مقیاس نکنید".

حداکثر مقیاس- حداکثر مقیاس دید

مقدار مشخصه عددی با نقطه از است 0.1 قبل از 1.0 . مرورگر پیش فرض موبایل سافاری 1.6 است. معنی 1.0 مقیاس را تعیین می کند 1:1 ، یعنی "مقیاس نکنید".

توجه داشته باشید: اجتناب از صفات مقیاس پذیر برای کاربر, حداقل مقیاسو حداکثر مقیاس، زیرا آنها تأثیر منفی بر دسترسی به محتوا دارند.

متا تگ های اضافی و مفید

متا تگ دستی دوستانهتعیین می کند که آیا صفحه سایت برای دستگاه های تلفن همراه در Palm و Blackberry در مرورگری مانند AvantGo بهینه شده است یا خیر. در حال حاضر توسط بسیاری از مرورگرهای تلفن همراه دیگر نیز شناخته شده است.

مثال:

متا تگ MobileOptimized(http://goo.gl/ZpLjZz) عرض نمای در مرورگرهای موبایل IE Mobile یا Pocket IE را تنظیم می کند. مشابه یک صفت است عرضدر متا تگ درگاه دید.

مثال:

متا تگ apple-mobile-web-app-capable(http://goo.gl/VGDYQC) به صفحه اجازه می دهد تا در حالت تمام صفحه، مربوط به دستگاه های تلفن همراه اپل، کار کند.

مثال:

مجموعه متا تگ هایی که برای سایت هایی با طراحی ریسپانسیو و متناسب با دستگاه های تلفن همراه استفاده می کنم:

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

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

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

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

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

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

در A Tale of Two Viewports در quirksmode.org درباره viewportها در مرورگرهای مختلف تلفن همراه بیشتر بیاموزید.

مبانی Viewport

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

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

ویژگی مقیاس اولیه سطح بزرگنمایی را هنگام بارگیری صفحه برای اولین بار کنترل می کند. ویژگی‌های حداکثر مقیاس، حداقل مقیاس و ویژگی‌های مقیاس‌پذیر توسط کاربر، نحوه اجازه بزرگ‌نمایی یا کوچک‌نمایی صفحه را به کاربران کنترل می‌کنند.

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

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

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

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

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

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

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

سایت ها می توانند نمای خود را روی یک اندازه خاص تنظیم کنند. به عنوان مثال، تعریف "عرض = 320، مقیاس اولیه = 1" را می توان برای قرار دادن دقیق روی یک صفحه نمایش تلفن کوچک در حالت عمودی استفاده کرد. وقتی مرورگر صفحه‌ای را با اندازه بزرگ‌تر رندر نمی‌کند، می‌تواند مشکلاتی ایجاد کند. برای رفع این مشکل، مرورگرها در صورت لزوم، عرض درگاه دید را افزایش می‌دهند تا صفحه در مقیاس درخواستی پر شود. این به ویژه در دستگاه‌هایی با صفحه‌نمایش بزرگ مانند آی‌پد (انتخاب درگاه دید برای سایت‌های آی‌پد توسط آلن پایک توضیح خوبی دارد برای وبتوسعه دهندگان.)

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

سایر موارد موجود عبارتند از: حداقل مقیاس، حداکثر مقیاس، و مقیاس پذیر توسط کاربر. این ویژگی ها بر مقیاس و عرض اولیه و همچنین محدود کردن تغییرات در سطح زوم تأثیر می گذارد.

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

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

اندازه‌های نمای رایج برای دستگاه‌های موبایل و تبلت

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

مشخصات فنی

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

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

استفاده رایج از متا تگ viewport

به طور معمول، متا تگ viewport برای تنظیم عرض و مقیاس اولیه برای viewport در دستگاه های تلفن همراه استفاده می شود. به عنوان مثال.

استفاده از متا تگ viewport در قالب غیر پاسخگو

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

مثال

وب سایت Themify را از یک دستگاه تلفن همراه مشاهده کنید.

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

مثالی دیگر

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

این مشکل به راحتی با تنظیم عرض ویوپورت روی 720 پیکسل برطرف می شود. عرض طرح تغییر نمی کند، اما دستگاه تلفن همراه آن را تا 720 پیکسل مقیاس می دهد.

خطای عمومی

یک اشتباه رایج این است که توسعه دهندگان معمولاً برای قالب های غیر پاسخگو از ابتدا-scale=1 استفاده می کنند. این تنظیم 100% صفحه را بدون تغییر مقیاس ارائه می کند. اگر طراحی واکنش گرا نباشد، کاربر یا باید زیاد اسکرول کند یا به صورت دستی بزرگنمایی را تنظیم کند تا کل صفحه را ببیند. بدترین حالت ترکیبی از user-scalable=no یا maximum-scale=1 با initial-scale=1 است. بدین ترتیب امکان مقیاس پذیری در سایت غیرفعال می شود. و بدون مقیاس بندی، هیچ راهی برای دیدن کل صفحه وجود ندارد. اگر قالب شما واکنش گرا نیست، مقیاس بندی را غیرفعال نکنید و مقیاس اولیه را تنظیم مجدد نکنید!

زمانی که می خواهیم پنجره مرورگر دستگاه خود را شخصی سازی کنیم، معمولاً استفاده می کنیم تگ HTML . با این حال، به اندازه کافی عجیب، متا تگ "هنجاری" نیست - در استاندارد رسمی W3C نیست.

متا تگ viewport ابتدا توسط اپل در آیفون و بعداً توسط سایر فروشندگان مرورگر معرفی شد. امروزه به دلیل محبوبیت iOS، اندروید و سایر پلتفرم‌ها برای تبلت‌ها و گوشی‌های هوشمند به طور گسترده مورد استفاده قرار می‌گیرد.

از آنجایی که متا تگ viewport صرفاً برای سفارشی‌سازی نشانه‌گذاری است، می‌توان گفت که به حق متعلق به CSS است. به همین دلیل است که W3C به دنبال استانداردسازی یک روش سازگاری جدید است که کنترل پنجره را از HTML به CSS منتقل می کند.

قانون css @viewport

با قانون جدید @viewport، ما همان کنترل پنجره را با متا تگ داریم، با این تفاوت که چنین کنترلی صرفاً از طریق CSS انجام می شود. مانند متا تگ، توصیه می شود عرض پنجره مرورگر را با استفاده از دستگاه-width مستقل از دستگاه تنظیم کنید:

@viewport(
عرض:دستگاه-عرض;
}

امروزه @viewport توسط برنامه نویسان برای "Snap mode" در IE10 استفاده می شود - عملکرد ویندوز 8، به شما امکان می دهد در حالت چند پنجره ای کار کنید. به اندازه کافی عجیب، اگر اندازه پنجره کمتر از 400 پیکسل باشد، IE10 متا تگ را نادیده می گیرد، که باعث می شود سایت هایی که از این متا تگ استفاده می کنند نتوانند برای چنین پنجره های کوچکی بهینه شوند. برای رفع این مشکل، برنامه نویسان باید از پارامتر پهنای دستگاه که در بالا ذکر شد استفاده کنند یا قانون viewport@ را در کوئری رسانه تعریف کنند.

استفاده از @viewport در پرسش‌های رسانه‌ای

می‌توانیم از @viewport در پرسش‌های رسانه‌ای استفاده کنیم. به عنوان مثال، درخواست رسانه زیر برای تنظیم طرح بندی پنجره ای با عرض کمتر از 400 پیکسل استفاده می شود (به عنوان مثال، حالت چند پنجره ایدر IE10) به عرض 320 پیکسل.

صفحه رسانه @ و (حداکثر عرض: 400 پیکسل) (
@-ms-viewport (عرض: 320 پیکسل؛ )
...
}

که در این مثال، اگر دستگاه روی محدوده وضوح 640 تا 1024 پیکسل تنظیم شده باشد، قانون @viewport پنجره را تا 640 پیکسل کاهش می دهد.

صفحه رسانه @ و (عرض حداقل: 640 پیکسل) و (حداکثر عرض: 1024 پیکسل) (
@viewport (عرض: 640 پیکسل؛ )
...
}

دستگیره های جدید @viewport

حتی اگر می‌توانیم عملکرد بزرگ‌نمایی و بزرگ‌نمایی را کنترل کنیم، برخی از ویژگی‌های viewport - یا همانطور که اکنون "دسته‌ها" نامیده می‌شوند - تغییر کرده‌اند.

بزرگنمایی

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

@viewport(
عرض:دستگاه-عرض;
بزرگنمایی: 2;
}

زوم کاربر

توصیفگر زوم کاربر معادل پارامتر مقیاس پذیر توسط کاربر است

@viewport(
عرض:دستگاه-عرض;
کاربر بزرگنمایی: ثابت.
}

پشتیبانی از مرورگر

از امروز، قانون @viewport css فقط توسط Opera و IE10 پشتیبانی می شود. به نظر می رسد کروم و سایر مرورگرها نیز به زودی آن را اجرا خواهند کرد. انتظار می رود این متا تگ به زودی به استاندارد رسمی وب جدید تبدیل شود.

در حال حاضر، باید یک پیشوند فروشنده به قانون viewport@ اضافه کنید:

@-ms-viewport(
عرض:دستگاه-عرض;
}
@-o-viewport(
عرض:دستگاه-عرض;
}
@viewport(
عرض:دستگاه-عرض;
}

البته همچنان باید متا تگ viewport را در صفحه html قرار دهیم، زیرا او به این زودی ها جایی نمی رود. اما دیگر نگاه کردن به آینده چندان ترسناک نیست - افزودن قانون viewport@ فقط سایت‌ها و برنامه‌های ما را برای تغییر آماده می‌کند.

خطای عمومی

یک اشتباه رایج این است که توسعه دهندگان معمولاً برای قالب های غیر پاسخگو از ابتدا-scale=1 استفاده می کنند. این تنظیم 100% صفحه را بدون تغییر مقیاس ارائه می کند. اگر طراحی واکنش گرا نباشد، کاربر یا باید زیاد اسکرول کند یا به صورت دستی بزرگنمایی را تنظیم کند تا کل صفحه را ببیند. بدترین حالت ترکیبی از user-scalable=no یا maximum-scale=1 با initial-scale=1 است. بدین ترتیب امکان مقیاس پذیری در سایت غیرفعال می شود. و بدون مقیاس بندی، هیچ راهی برای دیدن کل صفحه وجود ندارد. اگر قالب شما واکنش گرا نیست، مقیاس بندی را غیرفعال نکنید و مقیاس اولیه را تنظیم مجدد نکنید!

اغلب مردم تفاوت بین عرض (عرض) و عرض دستگاه (عرض دستگاه) را درک نمی کنند (و علاوه بر این، نمونه هایی با حداقل (دقیقه-عرض دستگاه) و حداکثر عرض دستگاه (حداکثر عرض-دستگاه) وجود دارد) ، با استفاده از جستارهای رسانه ای CSS. این سوء تفاهم منجر به نوشتن کد بد و کار بسیار بیشتر برای توسعه دهنده می شود. این سوال در انجمن های SitePoint زیاد مطرح می شود، بنابراین وقت آن است که همه چیز را با جزئیات بیشتر توضیح دهیم. این مقاله به این موضوع می پردازد و همچنین نگاهی دقیق تر به این خواهد داشت که از کدام گزینه در هنگام ساخت سایت های واکنش گرا استفاده کنید.

تعاریف اساسی

بیایید منظورمان را وقتی در مورد پرسش های رسانه ای بر اساس «عرض» و «عرض دستگاه» صحبت می کنیم، تعریف کنیم. نقل قول های زیر از مقاله MDN در مورد پرسش های رسانه ای گرفته شده است و این تعریف از "عرض" دارد:

ویژگی محیطی "width" عرض سطح رندر شده دستگاه خروجی را توصیف می کند (به عنوان مثال، عرض پنجره سند یا عرض پنجره صفحه در چاپگر)

و اینگونه است که MDN "عرض دستگاه" را تعریف می کند:

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

پس این واقعا به چه معناست؟ به زبان ساده، "عرض" و "عرض دستگاه" به عرض دستگاه اشاره دارد، نه کل عرض نمای دید، که ممکن است مفهومی کاملاً متفاوت باشد. تنها چیزی که باید به آن اهمیت دهید، بدون توجه به عرض دستگاه، عرض درگاه دید است.

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

اکثر تبلت ها و دستگاه های تلفن همراه همیشه 1 پیکسل دستگاه در هر پیکسل CSS ندارند. به عنوان مثال، باید بدانید که iPhone 4 دارای منطقه نمایش پیش فرض صفحه نمایش 640x960 است. این به این معنی است که در این مثال، عرض دستگاه iPhone4 320x480 است. واقعیت این است که اپل درک می کند که هر سایتی به گونه ای طراحی نشده است که ریسپانسیو باشد و سعی می کند با ارائه عرضی در حدود 980 پیکسل برای نمایش نسخه دسکتاپ سایت، احساس خوبی را در همه ایجاد کند. این بدان معنی است که اگر متا تگ viewport وجود نداشته باشد، iPhone4 سایت را می گیرد و آن را به گونه ای رندر می کند که گویی 980 پیکسل عرض دارد در حالی که آن را در صفحه عریض 320 پیکسل فشرده می کند و باعث می شود سایت از دید کاربر کوچکتر به نظر برسد.

شروع

برای شروع، مانند همه چیزهایی که پاسخگو هستند و پرس و جو رسانه ای را هدایت می کنند، تگ متا ویوپورت باید در بخشی از سایت شما قرار داده شود. نسخه استاندارد پایه در زیر فهرست شده است.

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

به عنوان مثال، بیایید آیفون 4 را در نظر بگیریم که دارای عرض نمای پیش فرض 980 پیکسل است. بدون متا تگ، تلاش شما برای استفاده از پرسش‌های رسانه شکست خواهد خورد و دستگاه به درستی به نمای پیش‌فرض دسترسی نخواهد داشت. بیشتر درخواست‌های رسانه 500 پیکسل یا کمتر را هدف قرار می‌دهند. این معمولا با یک پرس و جو رسانه ای با حداکثر عرض انجام می شود. بدون متا تگ، اثر این درخواست را دریافت نخواهید کرد، زیرا آیفون 4 به ارائه نسخه گسترده 980 پیکسلی سایت ادامه خواهد داد. بیایید به مثال زیر نگاه کنیم:

بدنه ( پس‌زمینه: سفید؛ ) صفحه رسانه @ و (دقیقه عرض: 980 پیکسل) /* رومیزی */ ( بدنه ( پس‌زمینه: قرمز؛ ) ) صفحه رسانه @ و (حداکثر عرض: 979 پیکسل) /* تبلت */ (بدنه ( پس‌زمینه: آبی؛ ) ) صفحه رسانه @ و (حداکثر عرض: 500 پیکسل) /* موبایل */ ( بدنه (پس‌زمینه: سبز؛ ))

در زیر دو اسکرین شات گرفته شده با آیفون 4. هر دو صفحه دارای CSS بالا هستند، اما یکی از تگ متا viewport استفاده می کند و دیگری ندارد.

صفحه نشان داده شده در بالا حاوی متا تگ نیست، و در نتیجه، پس‌زمینه به رنگ قرمز نمایش داده می‌شود و به جای استفاده از پرس‌وجو رسانه تلفن همراه با ابعاد 500 پیکسل، یک نمای استاندارد 980 پیکسلی را تقلید می‌کند.

در این مورد، متا تگ در جای خود قرار دارد و iOS به درستی صفحه را به شکلی که ما می‌خواهیم رندر می‌کند: بر اساس عرض 320 پیکسل است و به درخواست‌های رسانه‌ای ما اجازه می‌دهد همانطور که انتظار داریم کار کنند.

چرا پهنای دستگاه را انتخاب کنید؟

صادقانه بگویم، عنوان این مقاله در ابتدا به معنای عدم استفاده از پهنای دستگاه است. با این حال، عرض دستگاه جای خود را دارد. اگر در حال ساخت سایت برای دستگاه های خاصی هستید، بله - باید از دستگاه-width استفاده کنید.

از نظر CSS و RWD، یک سایت خوب سایتی است که در واقع «دستگاه آگنوستیک» است و سعی نمی‌کند به عرض تک تک دستگاه‌ها حرکت کند. هدف قرار دادن فرد پست های بازرسیبرای «انواع» دستگاه‌های مختلف (مانند تبلت یا تلفن همراه) با تمرکز بر نحوه نمایش محتوا در یک پهنای نمای مشخص و سپس اصلاح درخواست‌های رسانه بر این اساس به دست می‌آید. بنابراین این دستگاه نیست که نقاط شکست را دیکته می‌کند، این چیدمان و محتوا است که می‌تواند در نهایت به نتایج بهینه منجر شود، هم از دیدگاه شما و هم از دیدگاه کاربران.

این ممکن است دلیلی باشد که بسیاری از افراد در ایجاد طرح‌های واکنش‌گرا مشکل دارند و از سخت بودن آن شکایت دارند. اما اگر سعی در طراحی تحت دستگاه های فردی، آنها وارد یک نبرد بازنده می شوند: تعداد دستگاه هایی که باید در نظر گرفته شوند (برای پوشش همه چیز) بسیار زیاد است و فقط همه چیز را به کد بد تقلیل می دهد. همچنین لازم به ذکر است که اگر تصمیم به استفاده از عرض دستگاه دارید، باید قوانین جداگانه ای را نیز برای جهت گیری (عمودی یا افقی) تنظیم کنید: عرض دستگاه فقط به این دلیل که دستگاه را به طرفین می چرخانید تغییر نمی کند. این به کد بیشتری نیاز دارد، که به معنای سردرد بیشتر است.

با این حال، بیایید به یک گزینه ممکن دیگر نگاه کنیم.

در مورد "عرض" چطور؟

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

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

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

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

برای آزمایش، از افزونه Responsive Web Design Tester Chrome استفاده می کنم. این به شما امکان می دهد یک دستگاه خاص را انتخاب کنید. اندازه دستگاه و نحوه نمایش صفحه شما در آن دستگاه را خواهید دید.

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

سرانجام

آیا هنوز برای استفاده از عرض دستگاه در جستارهای رسانه برنامه ریزی می کنید؟ آیا استدلال ها به اندازه کافی قانع کننده نیستند؟ استفاده از "عرض" معمولی و نمای دستگاه، طراحی واکنشگرا را ساده می کند و در نهایت بهترین گزینه برای استفاده تقریبا همیشه است.