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

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

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

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

قانون css @viewport

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

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

امروزه @viewport توسط برنامه نویسان برای "Snap mode" در IE10 استفاده می شود - عملکرد ویندوز 8، به شما امکان می دهد در حالت چند پنجره ای کار کنید. به اندازه کافی عجیب، IE10 اگر اندازه پنجره کمتر از 400 پیکسل باشد، متا تگ را نادیده می گیرد، که باعث می شود سایت هایی که از این متا تگ استفاده می کنند نتوانند برای چنین پنجره های کوچکی بهینه شوند. برای رفع این مشکل، برنامه نویسان باید از پارامتر پهنای دستگاه که در بالا ذکر شد استفاده کنند یا قانون 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 است. بدین ترتیب امکان مقیاس پذیری در سایت غیرفعال می شود. و بدون مقیاس بندی، هیچ راهی برای دیدن کل صفحه وجود ندارد. اگر قالب شما واکنش گرا نیست، مقیاس بندی را غیرفعال نکنید و مقیاس اولیه را تنظیم مجدد نکنید!

آخرین به روز رسانی: 1395/05/03

اول از همه، اجازه دهید به یکی از نکات کلیدی کاربرد نگاه کنیم طراحی تطبیقی- متا تگ viewport (در واقع طراحی تطبیقی ​​با این تگ شروع می شود). بیایید با صفحه وب زیر شروع کنیم:

صفحه وب معمولی

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

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

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

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

کل ناحیه قابل مشاهده در صفحه مرورگر با مفهوم Viewport توصیف می شود. اساساً، یک viewport ناحیه ای را نشان می دهد که یک مرورگر وب سعی می کند در یک صفحه وب قرار دهد. مثلا، مرورگر سافاریدر آی‌پون و آی‌پاد، عرض نمای پیش‌فرض 980 پیکسل را تعیین می‌کند. یعنی با دریافت یک صفحه و وارد کردن آن در یک ویوپورت با عرض 980 پیکسل، مرورگر آن را به اندازه یک دستگاه تلفن همراه فشرده می کند. به عنوان مثال، اگر عرض صفحه نمایش یک گوشی هوشمند 320 پیکسل باشد، سپس صفحه به این اندازه فشرده می شود. و همه عناصر موجود در صفحه دارای ضریب مقیاس 320/980 خواهند بود.

چرا در این مورددقیقاً 980 پیکسل استفاده شده است، اما، مثلاً، نه اندازه واقعیصفحه نمایش؟ موضوع این است که، به طور پیش فرض، مرورگر فکر می کند که هر صفحه وب برای دسکتاپ طراحی شده است. و عرض معمول یک سایت دسکتاپ را می توان 980 پیکسل در نظر گرفت.

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

برای جلوگیری از این تصویر نه چندان دلپذیر، باید از متا تگ viewport استفاده کنید. تعریف زیر را دارد:

در ویژگی محتوای متا تگ می توانیم پارامترهای زیر را تعریف کنیم:

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

صفحه وب معمولی

صفحه وب قطعا به لطف استفاده از متا بهتر به نظر می رسد. تگ viewport. با استفاده از پارامتر width=device-width، به مرورگر وب می گوییم که عرض اولیه نمای پورت نباید 980 پیکسل یا تعداد دیگری باشد، بلکه باید عرض واقعی صفحه نمایش دستگاه باشد. بنابراین، مرورگر وب هیچ بزرگنمایی انجام نمی دهد، زیرا عرض و عرض نمای پورت یکسانی داریم.

همچنین می‌توانیم از گزینه‌های دیگری مانند جلوگیری از تغییر ابعاد صفحه توسط کاربر استفاده کنیم:

شکی نیست که هنگام کار با تگ متا 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 است. بدین ترتیب امکان مقیاس پذیری در سایت غیرفعال می شود. و بدون مقیاس بندی، هیچ راهی برای دیدن کل صفحه وجود ندارد. اگر قالب شما واکنش گرا نیست، مقیاس بندی را غیرفعال نکنید و مقیاس اولیه را تنظیم مجدد نکنید!

شکی نیست که هنگام کار با قالب های واکنش گرا از متا تگ 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 است. بدین ترتیب امکان مقیاس پذیری در سایت غیرفعال می شود. و بدون مقیاس بندی، هیچ راهی برای دیدن کل صفحه وجود ندارد. اگر قالب شما واکنش گرا نیست، مقیاس بندی را غیرفعال نکنید و مقیاس اولیه را تنظیم مجدد نکنید!

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

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

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

... ...

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

• عرض - عرض درگاه دید مرورگر را تنظیم می کند. یک عدد صحیح (بین 200 تا 10000) بر حسب پیکسل یا عرض دستگاه می گیرد. این ویژگی برای طرح بندی های تطبیقیسایت.
• height - ارتفاع نمای مرورگر را تنظیم می کند. یک مقدار صحیح در پیکسل (از 200 تا 10000) یا یک مقدار ارتفاع دستگاه را می پذیرد. از آنجایی که عامل تعیین کننده عرض است، ارتفاع برای چیدمان تطبیقی ​​ضروری نیست.
• مقیاس اولیه - ضریب مقیاس. مقادیر واقعی را می پذیرد (از 0.1 تا 10.0). مقدار "1.0" پیش فرض است، به این معنی که هر پیکسل فیزیکی مربوط به یک پیکسل سخت افزاری است.
• کاربر مقیاس پذیر - تعیین می کند که آیا کاربر بتواند صفحه را مقیاس کند یا خیر. دو مقدار می گیرد: no/yes
• حداقل مقیاس - حداقل مقیاس را تنظیم می کند. با اعداد واقعی اندازه گیری می شود.
• حداکثر مقیاس - حداقل مقیاس را تنظیم می کند. با اعداد واقعی اندازه گیری می شود.

نمونه های Viewport

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