Media Queries:
تنظیمات مدیا کوئیری به شما امکان می‌دهد استایل‌ها و خصوصیات گوناگونی را بر اساس ویژگی‌های دستگاه‌ها تعریف کنید. این به شما اجازه می‌دهد تا ظاهر وب‌سایت خود را برای دستگاههای مختلف بهینه کنید. برای مثال، می‌توانید تنظیماتی برای دستگاههای با عرض صفحه متفاوت ایجاد کنید.
```css
/* تنظیمات مدیا کوئیری برای دستگاههای با عرض کوچکتر از 768 پیکسل */
@media (max-width: 768px) {
body {
font-size: 14px;
background-color: #f0f0f0;
}
}
/* تنظیمات مدیا کوئیری برای دستگاههای با عرض بین 768 تا 1024 پیکسل */
@media (min-width: 769px) and (max-width: 1024px) {
body {
font-size: 16px;
background-color: #e0e0e0;
}
}
/* تنظیمات مدیا کوئیری برای دستگاههای با عرض بیشتر از 1024 پیکسل */
@media (min-width: 1025px) {
body {
font-size: 18px;
background-color: #d0d0d0;
}
}
```
در این مثال، با استفاده از تنظیمات مدیا کوئیری، تنظیمات مختلفی برای اندازه‌های مختلف صفحات وب تعریف شده است. به عنوان مثال، وقتی عرض صفحه کوچکتر از 768 پیکسل است، اندازه فونت کوچکتر و رنگ پس زمینه متفاوتی اعمال می‌شود.
از این روش برای تنظیم دیگر ویژگی‌ها نیز می‌توانید استفاده کنید، مانند پنهان کردن یا نمایش المان‌های مشخص، تغییر فونت، تغییر تراز و غیره.
توجه داشته باشید که تنظیمات مدیا کوئیری تنها یکی از ابزارهایی است که در طراحی وبسایتهای پاسخگو (Responsive) مورد استفاده قرار می‌گیرد. در کنار این تنظیمات، معمولاً از ترکیب استفاده از واحد‌های نسبی مانند درصد برای اندازه‌گیری اجزای وب‌سایت و همچنین تنظیمات Flexbox یا Grid برای ترتیب المان‌ها استفاده می‌شود. این ابزارها با همکاری تنظیمات مدیا کوئیری به شما امکان می‌دهند تا صفحه وب پاسخگو و هماهنگ با اندازه‌های مختلف دستگاه‌ها را طراحی کنید.
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* تنظیمات مدیا کوئیری برای دستگاههای با عرض کوچکتر از 768 پیکسل */
@media (max-width: 768px) {
.container {
display: flex;
flex-direction: column;
}
.item {
width: 100%;
margin-bottom: 10px;
}
}
/* تنظیمات مدیا کوئیری برای دستگاههای با عرض بزرگتر از 768 پیکسل */
@media (min-width: 769px) {
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">محتوای المان ۱</div>
<div class="item">محتوای المان ۲</div>
<div class="item">محتوای المان ۳</div>
<div class="item">محتوای المان ۴</div>
</div>
</body>
</html>
```
در این مثال، با استفاده از ترکیب تنظیمات مدیا کوئیری، Flexbox و Grid، طراحی شده تا در اندازه‌های مختلف دستگاه‌ها، المان‌ها به طور مختلف نمایش داده شوند. در اندازه‌های کوچکتر از 768 پیکسل، المان‌ها به صورت عمودی نمایش داده می‌شوند و در اندازه‌های بزرگتر، به دو ستون تقسیم می‌شوند.
این نمونه‌ها نشان‌دهنده ابزارها و تکنیک‌هایی است که در طراحی صفحات وب پاسخگو مورد استفاده قرار می‌گیرند. با توجه به نیاز‌های خاص وب‌سایتتان، ممکن است از ترکیب‌ها و تکنیک‌های مختلفی استفاده کنید تا به نتیجه‌ای مناسب برسید.
بطور کلی، متا تگ‌ها در اچ‌تی‌ام‌ال (HTML) برای ارائه اطلاعاتی اضافی به موتورهای جستجو و دیگر وب سرویس‌ها استفاده می‌شوند. این تگ‌ها به عنوان متا داده‌ها شناخته می‌شوند و اطلاعاتی مانند توضیح کوتاهی از محتوای صفحه یا کلمات کلیدی مهم درباره صفحه را در اختیار موتورهای جستجو و دیگر وب سرویس‌ها قرار می‌دهند.
1 .متا تگ توضیح (Description):
این متا تگ اطلاعات کوتاهی از محتوای صفحه را ارائه می‌دهد. معمولاً توضیح کوتاه و جذابی از محتوای صفحه در این تگ قرار می‌گیرد و موتورهای جستجو از این توضیح برای نمایش در نتایج جستجو استفاده می‌کنند.
```html
<meta name="description" content="وب‌سایت تخصصی برنامه‌نویسی و تکنولوژی با مقالات جدید و آموزش‌های مفید.">
```
2 .متا تگ کلمات کلیدی (Keywords):
این متا تگ شامل لیستی از کلمات کلیدی مرتبط با محتوای صفحه است. این کلمات معمولاً به موتورهای جستجو اطلاعات بیشتری درباره محتوای صفحه می‌دهند.
```html
<meta name="keywords" content="برنامه‌نویسی, تکنولوژی, آموزش, وب‌سایت, مقالات">
```
3 .متا تگ مؤلف (Author):
این متا تگ نام نویسنده یا اشخاصی که مسئولیت ایجاد محتوای صفحه را دارند را مشخص می‌کند.
```html
<meta name="author" content="نام نویسنده">
```
4 .متا تگ معرفی (OG Meta Tags):
این متا تگ‌ها برای اشتراک‌گذاری بهتر صفحه در شبکه‌های اجتماعی مورد استفاده قرار می‌گیرند. آن‌ها اطلاعاتی مانند عنوان، تصویر و توضیح کوتاه را برای نمایش در پست‌ها یا لینک‌ها در شبکه‌های اجتماعی تعیین می‌کنند.
```html
<meta property="og:title" content="عنوان صفحه">
<meta property="og:description" content="توضیح کوتاه از صفحه">
<meta property="og:image" content="لینک تصویر">
<meta property="og:url" content="لینک کامل صفحه">
```
این نمونه‌ها توضیحاتی از معنی و کاربردهای چندین نوع از متا تگ‌ها ارائه می‌دهند. با استفاده از این تگ‌ها، می‌توانید اطلاعات مفید و مهم درباره صفحه‌های وب‌سایت خود به موتورهای جستجو و دیگر سیستم‌ها ارسال کنید.
5 .متا تگ متعهد (Viewport):
این متا تگ تنظیمات نمایشی صفحه را کنترل می‌کند، به ویژه در دستگاههای موبایل و تبلت. با تعیین این تگ، می‌توانید اندازه نمایش، مقیاس‌پذیری و دیگر ویژگی‌های نمایشی صفحه را کنترل کنید.
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
6 .متا تگ امنیتی (Content Security Policy):
این متا تگ امنیتی اجازه می‌دهد تا تنظیمات امنیتی در مورد منابعی که ممکن است در صفحه استفاده شوند، تعیین کنید. این ابزار از حملاتی مانند حملات XSS (Cross-Site Scripting) و دیگر حملات امنیتی جلوگیری می‌کند.
```html
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://example.com">
```
7 .متا تگ زبان (Language):
این متا تگ زبان اصلی صفحه را مشخص می‌کند. این اطلاعات به موتورهای جستجو کمک می‌کند تا محتوای متناسب با زبان مربوطه را نمایش دهند.
```html
<meta http-equiv="Content-Language" content="fa">
```
8 .متا تگ دیگر:
علاوه بر متا تگ‌های فوق، تنظیمات دیگری نیز وجود دارند که بسته به نیاز‌های شما می‌توانید استفاده کنید. این شامل متا تگ‌هایی مثل تنظیمات ارتباط با ایکون‌ها (Favicon)، اطلاعات نسخه و تاریخ به‌روزرسانی صفحه و غیره است.
```html
<link rel="icon" href="favicon.ico" type="image/x-icon">
<meta name="version" content="1.0.0">
<meta name="last-modified" content="2023-08-12">
```
توجه داشته باشید که تعدادی از متا تگ‌ها به خصوصیت‌های خاصی نیاز دارند و برخی دیگر به عنوان متا داده‌های اضافی در صفحه‌ها استفاده می‌شوند. با استفاده از این متا تگ‌ها، می‌توانید اطلاعات مفید و مهم را به موتورهای جستجو، مرورگرها و سایر وب سرویس‌ها ارسال کنید.
9 .متا تگ منابع نمایشی (Open Graph):
این متا تگ‌ها برای بهبود اشتراک‌گذاری لینک‌ها در شبکه‌های اجتماعی مورد استفاده قرار می‌گیرند. آن‌ها اطلاعاتی مانند عنوان، توضیح کوتاه، تصویر و نوع محتوا را برای اشتراک‌گذاری در شبکه‌های اجتماعی تعیین می‌کنند.
```html
<meta property="og:title" content="عنوان صفحه">
<meta property="og:description" content="توضیح کوتاه از صفحه">
<meta property="og:image" content="لینک تصویر">
<meta property="og:type" content="article">
<meta property="og:url" content="لینک کامل صفحه">
```
10 .متا تگ ربات‌ها (Robots):
این متا تگ‌ها برای کنترل رفتار موتورهای جستجو درباره صفحه‌ها استفاده می‌شوند. به وسیله این تگ‌ها می‌توانید مشخص کنید که موتورهای جستجو آیا باید صفحه را اسکن کنند یا نه، چگونه لینک‌ها را پی‌گیری کنند و غیره.
```html
<meta name="robots" content="index, follow">
```
11 .متا تگ اصلی (Canonical):
این متا تگ به موتورهای جستجو اطلاع می‌دهد که این صفحه، صفحه‌ای معادل یا اصلی‌تر با محتوای مشابه است. این کمک می‌کند تا محتوا تکراری به نظر نیاید.
```html
<link rel="canonical" href="لینک صفحه اصلی">
```
12 .متا تگ انتقال خودکار (Refresh):
این متا تگ از انتقال خودکار صفحه به لینک دیگر استفاده می‌کند. این ممکن است برای انتقال از یک صفحه به صفحه‌ای دیگر بعد از مدت زمان مشخص مفید باشد.
```html
<meta http-equiv="refresh" content="5; url=https://example.com">
```
همانطور که می‌بینید، متا تگ‌ها می‌توانند در طراحی و بهینه‌سازی وب‌سایت برای موتورهای جستجو و دیگر وب سرویس‌ها نقش مهمی ایفا کنند. با استفاده صحیح از متا تگ‌ها، می‌توانید اطلاعات دقیق و مناسبی را به این سرویس‌ها ارائه دهید تا کاربران به راحتی به محتوای شما دسترسی داشته باشند.
متا تگ `viewport` و مدیا کوئیری (Media Queries) دو ویژگی مختلف در طراحی وبسایتهای پاسخگو (Responsive) هستند، اما با هم تعامل دارند تا صفحات وب بهینه شده برای دستگاههای مختلف نمایش داده شوند.
1 .متا تگ `viewport`:
متا تگ `viewport` تنظیماتی درباره نمایش صفحه را کنترل می‌کند. این تگ به مرورگر اطلاع می‌دهد که چگونه صفحه باید در دستگاههای مختلف نمایش داده شود. با تنظیمات مناسب در این تگ، می‌توان از تغییر اندازه‌ها و مقیاس‌پذیری مربوط به دستگاههای مختلف به خوبی استفاده کرد.
برای مثال، تنظیم متا تگ `viewport` به شکل زیر می‌تواند به مرورگر اطلاع دهد که عرض صفحه باید با عرض دستگاه هم‌است و از مقیاس‌پذیری استفاده نشود:
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
2 .مدیا کوئیری (Media Queries):
مدیا کوئیری تنظیمات CSS هستند که بر اساس ویژگی‌های دستگاه، مثل عرض صفحه، نوع دستگاه و غیره، استایل‌ها و خصوصیات مختلف را تعریف می‌کنند. با استفاده از مدیا کوئیری، می‌توانید استایل‌های مختلفی را برای دستگاه‌ها با اندازه‌های مختلف تعیین کنید.
برای مثال، تنظیمات زیر با استفاده از مدیا کوئیری، فونت‌سایز متفاوتی را برای دستگاههای با عرض کوچکتر از 768 پیکسل و با عرض بزرگتر تعیین می‌کند:
```css
/* تنظیمات مدیا کوئیری برای دستگاههای با عرض کوچکتر از 768 پیکسل */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* تنظیمات مدیا کوئیری برای دستگاههای با عرض بزرگتر از 768 پیکسل */
@media (min-width: 769px) {
body {
font-size: 16px;
}
}
```
حالا، این دو ویژگی چگونه با یکدیگر تعامل دارند:
- تنظیمات مدیا کوئیری با استفاده از مدیا تگ‌های CSS، استایل‌ها را بر اساس ویژگی‌های دستگاه تغییر می‌دهند.
- متا تگ `viewport` با تنظیم عرض نمایش صفحه به طریق مناسب، به مرورگر اجازه می‌دهد که صفحه به طور مناسبی بر روی دستگاه نمایش داده شود.
به این ترتیب، با ترکیب تنظیمات مناسب متا تگ `viewport` و مدیا کوئیری، می‌توانید صفحه‌های وب پاسخگو را برای دستگاههای مختلف بهینه کرده و نمایشی بهتر و سازگارتر را ارائه دهید.
در تنظیم متا تگ `viewport`، می‌توانید از مقادیر مختلفی برای ویژگی‌های `width` و `initial-scale` استفاده کنید تا نمایش صفحه بر روی دستگاههای مختلف بهینه شود. در ادامه، مثال‌هایی از حالت‌های مختلف `viewport` را با توضیحات آورده‌ام:
1 .`width=device-width` و `initial-scale=1.0`:
این تنظیم باعث می‌شود عرض صفحه با عرض دستگاه تطابق داشته باشد و مقیاس‌پذیری اولیه (اولین زمانی که صفحه باز می‌شود) برابر با ۱ باشد. این تنظیم به صفحه اجازه می‌دهد که از مقیاس‌پذیری طبیعی دستگاه استفاده کند.
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
2 .`width=device-width` و `initial-scale=0.5`:
در این حالت، صفحه با عرض دستگاه تطابق داشته ولی با استفاده از مقیاس‌پذیری اولیه ۰.۵ نمایش داده می‌شود. این باعث می‌شود محتوا به نصف اندازه اصلی خود کوچک شود.
```html
<meta name="viewport" content="width=device-width, initial-scale=0.5">
```
3 .`width=500` و `initial-scale=1.0`:
در این حالت، صفحه با عرض ۵۰۰ پیکسل نمایش داده می‌شود و از مقیاس‌پذیری اولیه ۱ استفاده می‌کند. این تنظیمات می‌توانند برای مدیریت بهینه نمایش صفحه در دستگاههای با اندازه‌های خاص مفید باشند.
```html
<meta name="viewport" content="width=500, initial-scale=1.0">
```
4 .`width=device-width`, `initial-scale=1.0` و `maximum-scale=2.0`:
این تنظیمات به صفحه اجازه می‌دهند که باعث مقیاس‌پذیری بزرگتر از اندازه‌ی اصلی دستگاه شود. این به کاربر امکان می‌دهد که با مقیاس‌پذیری دستی روی صفحه کار کند.
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">
```
5 .`width=device-width`, `initial-scale=1.0` و `user-scalable=no`:
با تنظیم `user-scalable=no`، کاربران قادر به تغییر مقیاس صفحه به صورت دستی نیستند. این تنظیم ممکن است برای جلوگیری از تغییر اندازه غیرمناسب در برخی دستگاه‌ها مفید باشد.
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
```
به عنوان یک توضیح، متا تگ `viewport` از تنظیمات مختلف برای تطبیق نمایش صفحه با دستگاههای مختلف استفاده می‌کند. این تنظیمات می‌توانند در بهینه‌سازی نمایش صفحه برای دستگاههای مختلف مفید باشند و به کاربران امکان نمایش بهتر و مقیاس‌پذیری مناسب را ارائه دهند.
به طور خلاصه، تنظیم متا تگ `viewport` از تنظیمات مختلفی برای کنترل نمایش صفحه در دستگاههای مختلف استفاده می‌کند. این تنظیمات به طور عمده به دو ویژگی اصلی تعیین شده توسط متا تگ مرتبط است:
1 .`width` (عرض):
این ویژگی مشخص می‌کند چه عرضی از صفحه را مرورگر باید در نظر بگیرد. با استفاده از مقادیر مختلف می‌توانید اندازه نمایش را با عرض دستگاه هماهنگ کنید.
2 .`initial-scale` (مقیاس‌پذیری اولیه):
این ویژگی تنظیم مقیاس‌پذیری اولیه نمایش صفحه را مشخص می‌کند. مقیاس‌پذیری اولیه میزان بزرگنمایی یا کوچک‌نمایی اولیه محتوا در دستگاه را تعیین می‌کند.
با ترکیب تنظیمات مختلف این دو ویژگی، می‌توانید نمایش صفحه را در دستگاههای مختلف بهینه کنید. به عنوان مثال، با تنظیم `width=device-width` و `initial-scale=1.0`، صفحه با اندازه دستگاه تطابق پیدا می‌کند و با مقیاس‌پذیری اولیه یک نمایش داده می‌شود. این دسته از تنظیمات می‌تواند در ایجاد تجربه کاربری بهتر و بهینه‌تر بر روی دستگاههای مختلف کمک کند.
در کل، متا تگ `viewport` یک ابزار قدرتمند در طراحی وبسایتهای پاسخگو و سازگار با دستگاههای مختلف است. با تنظیم مقادیر مناسب در این تگ، می‌توانید نمایش صفحه را در دستگاههای مختلف بهینه کنید و به کاربران امکان نمایش بهتر و مقیاس‌پذیرتر را ارائه دهید.
در کنار این، مدیا کوئیری (Media Queries) نیز به شما امکان می‌دهد تا با تنظیم استایل‌های مختلف بر اساس ویژگی‌های دستگاه، تجربه کاربری بهتری برای کاربران ایجاد کنید.
به طور خلاصه، ترکیب تنظیمات مناسب در متا تگ `viewport` و استفاده از مدیا کوئیری، اجازه می‌دهد تا وب‌سایت‌ها به طور بهینه بر روی دستگاههای مختلف نمایش داده شوند و به کاربران تجربه‌ای بهتر از نمایش محتوا ارائه دهند.