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

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

بیایید به قوانین ممکن برای استفاده از برچسب نگاه کنیم:

1. عرض

با این کار یک عدد صحیح را در پیکسل (از 200 پیکسل تا 10000 پیکسل) نشان می دهیم یا "عرض دستگاه". این عرض نمای پورت را تنظیم می کند، اگر عرض برای شما مشخص نشده باشد، به طور خودکار گرفته می شود:

• 980 پیکسل - برای سافاری موبایل
• 850px - Opera
• 800px - Android WebKit
• 974 پیکسل - IE

2. ارتفاع

بر اساس همان اصل کار می کند عرض. با این حال، اغلب در 99٪ موارد به سادگی استفاده نمی شود، بنابراین اگر نمی دانید که آیا به آن نیاز دارید یا نه، نمی توانید آن را افشا کنید. به هر حال می توانید آن را آزمایش کنید ...

3. مقیاس اولیه

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

4. مقیاس پذیر توسط کاربر

مشخص می کند که آیا مقیاس صفحه قابل تغییر است یا خیر. می تواند ارزش ها را به ارث ببرد آرهیا نه. در مرورگر سافاری مقدار پیش فرض است آره,

5. حداقل مقیاسو حداکثر مقیاس

این گزینه ها حداقل و حداکثر مقیاس مجاز را برای متا تگ viewport تعریف می کنند. مقادیر موجود برای آن از 0.1 تا 10 است. اگر آن را روی 1.0 تنظیم کنید، به مرورگر اطلاع می دهیم که صفحه را مقیاس نمی کند. مرورگر موبایل سافاری روی حداقل مقیاس = "0.25" و حداکثر مقیاس = "1.6" تنظیم شده است.

حال به سراغ موارد استفاده می رویم.

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

اگر محتوای شما عریض نباشد (توسط مرورگر قطع نشده باشد)، بلکه باریک باشد (یک فضای خالی در جایی ظاهر می شود) می توانید دقیقاً از همین مثال پیروی کنید:

یک اشتباه معمولی که ممکن است هنگام استفاده از متا تگ viewport مرتکب شوید این است که از مقدار استفاده می کنید مقیاس اولیه = 1برای قالب های غیر پاسخگو مشکل چیه؟ مشکل اینجاست که این تنظیم باعث می شود که 100% صفحه بدون تغییر مقیاس ارائه شود. بنابراین، کاربر باید خودش مقیاس را تنظیم کند یا صفحه را برای مدت طولانی اسکرول کند.

خطا نیز می تواند باشد اشتراک گذاریمولفه های user-scalable=noیا حداکثر مقیاس=1با هم مقیاس اولیه = 1. با این کار امکان مقیاس‌سازی در سایت غیرفعال می‌شود (روشن قالب های موبایلاین ویژگی مطمئناً می تواند مفید باشد، اما به سختی ...). از آنجایی که مقیاس‌گذاری را غیرفعال می‌کنیم، فرصتی برای دیدن کل صفحه نخواهیم داشت.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پارامتر	ارزش های	شرح
	یک مقدار صحیح در پیکسل یا یک مقدار عرض دستگاه را می پذیرد	عرض ناحیه دید را تنظیم می کند
	یک مقدار صحیح به پیکسل یا یک مقدار ارتفاع دستگاه را می پذیرد	ارتفاع ناحیه دید را تنظیم می کند
		ضریب مقیاس را برای اندازه اولیه درگاه نمایش مشخص می کند. مقدار 1.0 بدون مقیاس بندی را مشخص می کند
		مشخص می کند که آیا کاربر می تواند از حرکات برای بزرگنمایی صفحه استفاده کند یا خیر
	عدد ممیز شناور از 0.1 و بالاتر	حداقل مقیاس اندازه نمایش را تنظیم می کند. مقدار 1.0 بدون مقیاس بندی را مشخص می کند
	عدد ممیز شناور از 0.1 و بالاتر	حداکثر مقیاس اندازه درگاه دید را تنظیم می کند. مقدار 1.0 بدون مقیاس بندی را مشخص می کند

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

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

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

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

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

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

html

سلام دنیا

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

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

اکنون به مرورگر بگوییم که سایت ما به هر عرض صفحه پاسخگو است.

html

چی شد:

خب الان همه چیز خیلی بهتر شده با نشان دادن width=device-width به مرورگر گفتیم که می‌خواهیم نمای محتوا برابر با عرض صفحه نمایش دستگاه همراه باشد.

می توانید به صورت دستی مقداری برای عرض تنظیم کنید. به عنوان مثال content="width=320px"، اما این توصیه نمی شود زیرا گوشی های هوشمند مختلف می توانند عرض صفحه نمایش کاملا متفاوتی داشته باشند.

یک گزینه بسیار رایج این است:

html

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

موارد زیر نیز اغلب استفاده می شود:

html

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

1. هنگامی که صفحه بارگیری می شود، مقیاس نمی شود
2. صفحه تمام عرض مرورگر تلفن همراه را اشغال می کند
3. هر گونه مقیاس بندی سفارشی ممنوع است
4. فقط اسکرول افقی و عمودی موجود است

فقط در صورتی از این پیکربندی استفاده کنید که بدانید در حال انجام چه کاری هستید.

بیایید به پارامترهای معتبر و مقادیر موجود در متا تگ viewport نگاهی بیندازیم.

عرض

یک عدد صحیح (از 200px - 10000px) یا "device-width".

عرض درگاه دید را تنظیم می کند. اگر viewport nirina مشخص نشده باشد، پس:

• برای سافاری موبایل 980 پیکسل است
• Opera - 850px
• Android WebKit - 800px
• IE - 974 پیکسل

ارتفاع

یک عدد صحیح (بین 223 پیکسل تا 10000 پیکسل) یا "ارتفاع دستگاه"

ارتفاع نما را تنظیم می کند. در 99٪ مواقع، فقط این پارامتر را نادیده بگیرید، اما اگر واقعاً به آن نیاز دارید، سعی کنید و آزمایش کنید. موفق باشید..

مقیاس اولیه

1.0 - مقیاس نکنید. مقیاس صفحه را تعیین می کند. ارزش را افزایش دهید - مقیاس را افزایش دهید.

مقیاس پذیر برای کاربر

مقادیر موجود خیر یا بله هستند

مشخص می کند که آیا مقیاس صفحه قابل تغییر است یا خیر. پیش فرض در سافاری بله است.

حداقل مقیاس و حداکثر مقیاس

مقادیر موجود (از 0.1 تا 10).

1.0 - مقیاس نکنید. به ترتیب حداقل و حداکثر مقیاس دید را مشخص می کند.

پیش‌فرض در سافاری موبایل حداقل مقیاس = "0.25"، حداکثر مقیاس = "1.6" است.

مشاوره:از متا تگ ها (از جمله این یکی) استفاده نکنید تا زمانی که متوجه نشدید که چرا همه اینها مورد نیاز است. و همه چیز را در موارد مختلف تست کنید مرورگرهای موبایل. موفق باشید!

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

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

پست تست

این یک پست آزمایشی هست

یک پست دیگر

این خیلی باحاله

مطلب جدید

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

حالا متن خوب به نظر می رسد. در اینجا نقاشی است. در سمت چپ بدون برچسب و در سمت راست با آن

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

شما همچنین می توانید مقیاس را تنظیم کنید. برای این کار استفاده می شود مقیاس اولیه

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

اما شما باید مراقب باشید، زیرا. این اتفاق می افتد که خواندن متن بسیار دشوار است و شما باید آن را بزرگ کنید، اما اگر این ممنوع باشد، باعث ناراحتی کاربر می شوید.

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

پشتیبانی از اندروید اما تا نسخه 2.2 . مقیاس اولیه است 1.0

سیمبین، نوکیا سری 40، موتورولا، اپرا موبایل/مینی و NetFront نهپشتیبانی

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

BlackBerry از نسخه پشتیبانی می کند 4.2.1

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

بنابراین، این مقاله را به پایان می رساند، با تشکر از خواندن.

→ سازگاری دستگاه CSS از طریق @viewport

زمانی که می خواهیم پنجره مرورگر دستگاه خود را شخصی سازی کنیم، معمولاً استفاده می کنیم تگ 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 پیکسل؛ ) ... )

AT این مثال، اگر دستگاه روی محدوده وضوح 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@ باعث می‌شود سایت‌ها و برنامه‌های ما برای آینده مناسب باشند.