HTML یک ذاتاً یک رسانه روان است. متن و ظروف به صورت افقی و عمودی گسترش می یابند تا از فضای موجود استفاده کنند. این سیالیت باعث پیچیده تر شدن طرحهای پیچیده شد ، بنابراین با شروع هزاره ، بسیاری از سایتها بر اساس اندازه محبوب صفحه نمایش دارای عرض ثابت بودند.
این روند همچنان ادامه داشت زیرا اندازه صفحه از 800 × 600 به 1024 × 768 و بالاتر افزایش یافت. با این حال ، ظهور گوشی های هوشمند و عرضه آیفون در سال 2007 این روند را برعکس کرد. امروز، بیش از نیمی از کاربران در یک دستگاه تلفن همراه کوچکتر به صفحات وب دسترسی دارند.
توجه: از نظر فنی ، تلفنهای هوشمند اغلب از وضوح بالاتری نسبت به بسیاری از مانیتورها برخوردار هستند ، اما پیکسلهای جداگانه نامرئی می شوند. آیفون 11 مکس رزولوشن سخت افزاری 2688 12 1242 خود را به وضوح منطقی عملیتر 896 × 414 تبدیل می کند. هر پیکسل منطقی به شبکه ای از 3 × 3 پیکسل واقعی ترسیم می شود ، که باعث می شود قلم های نرمتر و جزئیات تصویر بیشتر شود.
راه حل اولیه دو سایت بود: یکی برای دسک تاپ و دیگری برای موبایل ، که اغلب با عامل کاربری بو می کند تا در صورت لزوم هدایت شود. با رشد تصاعدی انواع دستگاه ها ، این به سرعت غیر عملی شد.
سرانجام ، اصطلاح طراحی وب پاسخگو (RWD) توسط اتان مارکوت در سال 2010. این تکنیک به سایت مشابه اجازه می دهد بدون توجه به اندازه صفحه یا ابعاد نمای در هر دستگاهی کار کند.
RWD چگونه کار می کند؟
هیچ رویکرد یا فناوری واحد RWD وجود ندارد.
ابتدا باید تعیین کنید که طراحی سایت چگونه به نمایشگرهای با اندازه متفاوت واکنش نشان می دهد. این یک چالش است و بسیاری از اولین سایتهای RWD طرح دسک تاپ موجود را در نظر گرفتند و با کاهش ابعاد صفحه ، بخشها را حذف کردند.
تکنیک بهتری بود اول موبایل. این کار با یک نمای موبایل خطی شروع شد ، که در همه دستگاه ها کار می کرد و سپس محتوای دیگر را مرتب می کرد یا با دسترسی بیشتر به ویژگی های مرورگر پشتیبانی شده ، محتوای آن را تغییر می داد. اخیراً ، بسیاری از سایتها طرحهای ساده تری را پذیرفته اند ، که در آن تجربه موبایل و دسک تاپ بیشتر شبیه است.
یک نمونه معمول از RWD در عمل ، منوی همبرگر است. کسانی که در صفحه های کوچکتر هستند می توانند بر روی یک نماد کلیک کنند تا پیوندهای ناوبری را مشاهده کنند ، در حالی که کسانی که صفحه بزرگتری دارند ممکن است همه گزینه ها را در یک لیست افقی مشاهده کنند.
بخشهای زیر تعدادی از گزینه های پیاده سازی فنی را ارائه می دهد.
HTML viewport متا تگ
صرف نظر از هر روش RWD ، برچسب زیر باید در HTML خود تنظیم کنید <head>:
<meta name="viewport" content="width=device-width,initial-scale=1">
width=device-width تنظیم اطمینان می دهد که مرورگرهای تلفن همراه پیکسل های CSS منطقی را در عرض صفحه مقیاس می کنند. بدون این ، مرورگر تصور می کند که یک سایت دسک تاپ ارائه می دهد و بر اساس آن مقیاس بندی می کند تا بتوان آن را تغییر داد و بزرگنمایی کرد.
داستان های رسانه
داستان های رسانه اساس اولیه اولین سایتهای RWD بودند. آنها به CSS اجازه می دهند دامنه های خاصی از بعد نمایش را هدف قرار دهد. مثلا:
p {
font-size: 1rem;
}
@media (min-width: 900px) and (max-width: 1200px) {
p {
font-size: 1.5rem;
}
}
از س quالات رسانه هنوز استفاده می شود ، اگرچه گزینه های صریح کمتری هم اکنون در دسترس هستند.
<picture> عناصر
HTML <picture> عنصر از نحو پرس و جو رسانه استفاده می کند تا کنترل کند که کدام تصویر از انتخاب نمایش داده می شود <source> گزینه ها. این به طور معمول برای جهت هنری به منظور نمایش یک تصویر مناسب برای نمای دستگاه استفاده می شود. مثلا:
<picture>
<source srcset="landscape.jpg"
media="(min-aspect-ratio:1/1)"
alt="landscape" />
<img src="portrait.jpg" alt="portrait" />
</picture>
CSS Viewport Units
vw و vh واحدهای CSS به ترتیب 1٪ از عرض و ارتفاع نمای را نشان می دهند. vmin 1٪ از کوچکترین بعد است ، و vmax 1٪ از بزرگترین بعد است.
اینها انعطاف پذیری RWD را ایجاد می کنند ، به ویژه هنگامی که در کنار هم استفاده می شوند calc. مثلا:
p {
font-size: 1rem + 0.5vw;
}
ستون های CSS
طرح های چند ستونی CSS با ایجاد ابعاد یک ظرف ، روشی برای ایجاد چندین ستون متن ارائه دهید. مثلا:
.container {
columns: 12rem auto;
column-gap: 2rem;
}
CSS Flexbox و Grid
CSS Flexbox و شبکه CSS تکنیک های مدرنی را ارائه دهید که عناصر کودک را بسته به محتوای آنها و فضای موجود مشخص می کند. تفاوت اصلی:
- Flexbox برای طرح های یک بعدی استفاده می شود. عناصر می توانند در صورت لزوم به خط بعدی بپیچند (یا نه) بنابراین ستون ها ممکن است به صورت خطی قرار نگیرند.
- Grid برای طرح های دو بعدی است ، معمولاً با ردیف ها و ستون های قابل شناسایی.
برای ایجاد یک می توان از هر یک استفاده کرد طرح ذاتی (اصطلاحی که توسط جن سیمونز ابداع شد) در اصل ، عناصر با توجه به ابعاد viewport و بدون نیاز به پرس و جوهای رسانه ، اندازه می شوند. مثلا:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
grid-gap: 1rem;
}
گزینه های JavaScript RWD
همچنین می توان از JavaScript برای تعیین ابعاد viewport و عکس العمل مناسب استفاده کرد. مثلا:
const
vw = window.innerWidth,
vh = window.innerHeight;
به طور مشابه ، ابعاد یک عنصر فردی را می توان با بررسی کرد offsetWidth و جبران قد، اگر چه روش () getBoundingClientRect می تواند اطلاعات بیشتری از جمله کسرهای پیکسل را بازگرداند:
const
element = document.getElementById('myelement'),
rect = element.getBoundingClientRect(),
ew = rect.width,
eh = rect.height;
با چرخش دستگاه یا تغییر اندازه پنجره مرورگر ، ابعاد پنجره و عنصر می تواند تغییر کند. matchMedia API می تواند پرس و جوهای رسانه CSS را تجزیه کند و وقایع تغییر را تحریک کنید:
const mql = window.matchMedia('(min-width: 600px)');
mqTest(mql);
mql.addListener(mqTest);
function mqTest(e) {
if (e.matches) {
console.log('viewport is at least 600px width');
}
else {
console.log('viewport is less than 600px width');
}
}
پشتیبانی مرورگر
بیش از هر چیز فناوری های RWD پشتیبانی خوبی از مرورگر ارائه می دهند. آخرین گزینه – CSS Grid – است تقریباً توسط 95٪ مرورگرهای امروزی مورد استفاده پشتیبانی می شود. با این حال ، هنوز هم لازم است سایت خود را در طیف وسیعی از دستگاه ها ، رزولوشن ها و مرورگرها آزمایش کنید …
تست درون مرورگر
تغییر اندازه پنجره مرورگر خود یک استراتژی تست معقول برای چند ساعت است ، اما به سرعت نادرست و دست و پا گیر می شود. بیشتر مرورگرها a حالت طراحی پاسخگو که به شما امکان می دهد دستگاه و عامل کاربری را انتخاب کنید ، آن را بچرخانید ، وضوح را انتخاب کنید ، تراکم پیکسل ، پهنای باند دریچه گاز را تغییر دهید ، لمس را تقلید کنید و عکس بگیرید.
در Firefox ، را انتخاب کنید حالت طراحی پاسخگو از توسعه دهنده وب منو یا فشار دهید Ctrl | Cmd + تغییر مکان + م:
در مرورگرهای مبتنی بر Chromium ، باز کنید ابزارهای توسعه دهنده از ابزار بیشتر منو یا فشار دهید Ctrl | Cmd + تغییر مکان + من. سپس روی کلیک کنید نوار ابزار دستگاه را تغییر دهید آیکون:
برای مشاهده سایت تغییر یافته به برگه مرورگر برگردید:
در Safari ، گزینه را فعال کنید نمایش منوی توسعه در نوار منو گزینه از پیشرفته برگه مرورگر اولویت ها. صفحه ای را بارگیری کنید و انتخاب کنید وارد حالت طراحی پاسخگو شوید از توسعه دادن منو.
با این حال ، توجه داشته باشید که فقط این ابزارها هستند تقلید کردن ابعاد صفحه دستگاه و عامل کاربر. آنها نمی توانند موارد زیر را به طور دقیق تقلید کنند:
-
قابلیت های رندر
مرورگر از موتور رندر خود استفاده خواهد کرد – نه از موتور شبیه سازی شده. یک ویژگی CSS که در Firefox کار می کند بدون در نظر گرفتن پشتیبانی واقعی ، در نمای آیفون شبیه سازی شده آن “کار می کند”. همانطور که گفته شد ، دسک تاپ Chrome تقریب منطقی با Android Chrome را نشان می دهد ، و macOS Safari مشابه آیفون خواهد بود زیرا براساس موتورهای رندر یکسانی ساخته شده اند.
-
دستگاه های قدیمی تر
آزمایش مشاهده مرورگر آیفون بر روی آخرین نسخه Safari نمی تواند به طور دقیق دستگاه های قدیمی دارای سیستم عامل و نرم افزار قدیمی را نشان دهد.
-
نمایشگرهای با چگالی بالا
شما به پیکسل های فیزیکی مانیتور کامپیوتر خود محدود هستید ، بنابراین ممکن است یک سایت در یک دستگاه واقعی بهتر یا بدتر به نظر برسد.
-
دست زدن به
ماوس یا پد لمسی نسبت به دستگاه صفحه لمسی با نمایشگر کوچک کنترل دقیق تری دارد. ممکن است مشاهده اثرات اعمال شده در حالت شناور غیرممکن باشد.
-
سرعت پردازش
به احتمال زیاد سرعت رایانه و رایانه در رایانه شخصی شما از یک دستگاه تلفن همراه بیشتر است.
شبیه سازهای سیستم عامل تلفن همراه
اجرای یک ماشین مجازی Android یا iOS بر روی دستگاه شما به شما امکان می دهد مرورگرهای تلفن همراه واقعی را نصب و اجرا کنید و از موتورهای ارائه دهنده واقعی آنها استفاده کنید.
شبیه سازهای اندروید عبارتند از:
- تولید مجدد: گزینه های Cloud رایگان و تجاری ، همه نسخه های Android برای ویندوز ، macOS و Linux
- Android Studio (و شبیه ساز): رایگان ، ویندوز ، macOS و لینوکس
- Visual Studio Xamarin (و شبیه سازها): تجاری ، ویندوز و macOS
- Bliss OS: رایگان ، Android 9 برای ویندوز ، Linux و سیستم عامل Chrome
- سیستم عامل ققنوس: رایگان ، اندروید 7.1 یا 5.1 برای ویندوز و macOS
- Android-x86: ISO های Android رایگان برای هر سیستم عامل ماشین مجازی.
Chrome انتخاب آشکار مرورگر برای Android است ، اما شما همچنین می توانید آن را نصب کنید اپرا مینی، که در تلفنهای دارای قدرت کم مصرف برجسته است.
گزینه ها برای iOS محدودتر هستند:
این شبیه سازها هنوز جنبه های منفی دارند:
- این نرم افزار به برخی از تخصص های فنی نیاز دارد و از منابع سیستم قابل توجهی استفاده می کند.
- بسیاری از گزینه های iOS وجود دارد شبیه سازها. آنها موتور رندر دیگری را تطبیق می دهند و همیشه دقیق نیستند.
خدمات تست آنلاین
این بخش با مشارکت با ایجاد شده است LambdaTest. با تشکر از شما برای حمایت از شرکایی که SitePoint را امکان پذیر می کنند.
چندین سرویس آنلاین به شما امکان می دهد صفحات پاسخگو را در مرورگرهای تلفن همراه از طریق وب آزمایش کنید. در واقع شما در دستگاه واقعی زمان اجاره می کنید و می توانید صفحه نمایش آن را در مرورگر خود مشاهده کنید. هیچ نرم افزاری برای راه اندازی یا نگهداری وجود ندارد.
علاوه بر آزمایش زنده ، برخی از سرویس ها شامل API های تست خودکار هستند که به شما امکان می دهد اسکریپت ها را اجرا کرده و از نظر یکپارچه سازی مدل ها یا رابط های کاربری خراب بررسی کنید.
LambdaTest بیش از فراهم می کند 2000 ترکیب دستگاه ، سیستم عامل و مرورگر. امکانات عبارتند از:
- آزمایش کردن
localhostصفحاتی که در رایانه شما در حال توسعه هستند - اشکال زدایی با ابزار توسعه دهنده یکپارچه
- آزمایش موقعیت جغرافیایی از مکان های مختلف
- عکسهای صفحه تمام صفحه به طور خودکار در چندین دستگاه ایجاد می شود
- یک ردیاب شماره داخلی
- نرم افزار مرورگر LT (Windows، macOS، Linux) برای آزمایش و مقایسه دستگاه ها با بارگیری خودکار و همگام سازی پیمایش
- API های تست خودکار مبتنی بر سلنیوم
- پشتیبانی 24/7
- آ طرح رایگان با دسترسی نامحدود از 15 دلار در ماه.
برای یک حساب LambdaTest رایگان ثبت نام کنید
خدمات جایگزین که همچنین آزمایش زنده و خودکار تلفن همراه را ارائه می دهند عبارتند از:
تست دستگاه واقعی
سرانجام ، هیچ جایگزینی برای آزمایش بر روی دستگاه های واقعی وجود ندارد. این بهترین روش برای ارزیابی سرعت پردازش واقعی ، کنترل لمسی و طراحی وب سایت پاسخگو است.
در حالت ایده آل ، باید هرچه بیشتر دستگاه تست کنید ، اما ممکن است گوشی هوشمند اخیر شما نشانگر سخت افزار متوسط نباشد. سعی کنید دستگاه های میان رده با عمر یک یا دو سال مانند Moto G7 دست دوم یا آیفون 8 تهیه کنید.
دستگاه های موجود در همان شبکه می توانند با وارد کردن آدرس IP رایانه شخصی شما در مرورگر ، به سرور دسترسی پیدا کنند. این را می توان با استفاده از ifconfig در macOS و Linux یا ipconfig در ویندوز
همچنین می توانید تلفن هوشمند را با کابل USB به رایانه شخصی متصل کنید. با این کار می توانید دستگاه را از راه دور کنترل کرده و به راحتی به پنل های ابزار توسعه دهنده آن برای رفع اشکال دسترسی پیدا کنید. این تکنیک در سیستم عامل ها متفاوت است اما برای اشکال زدایی Android Chrome در نسخه دسک تاپ مرورگر:
- در دستگاه Android ، را انتخاب کنید گزینه های توسعه دهنده از تنظیمات و فعال کنید اشکال زدایی USB.
- با استفاده از کابل USB مناسب دستگاه را به رایانه خود متصل کنید. اولین باری که این کار را انجام می دهید ، ممکن است از شما خواسته شود اقدامات مربوط به یک یا هر دو دستگاه را تأیید کنید.
- Chrome را روی رایانه شخصی خود راه اندازی کرده و باز کنید
- به دلخواه تنظیم کنید پورت حمل و نقل – به عنوان مثال ، بندر
8888در دستگاه از راه دور می توان بهlocalhost:8888. - دستگاه شما باید در لیست نشان داده شود. اکنون می توانید یک برگه جدید یا موجود را باز کنید که ابزار توسعه دهنده دستگاه را باز می کند:
برای اشکال زدایی Safari برای iPhone ، موارد زیر را انجام دهید:
- تلفن خود را به رایانه Apple متصل کنید.
- صفحه وب مورد نظر جهت رفع اشکال در Safari را در iPhone باز کنید.
- Safari را در رایانه خود راه اندازی کنید.
- در Safari در رایانه ، به رفتن به توسعه دادن > [your iPhone] > [website to inspect]. با این کار ابزارهای توسعه دهنده Safari در رایانه شما باز می شود و به شما این امکان را می دهد که سایت را در iPhone خود اشکال زدایی کنید.
یک سایت ، تعداد زیادی بازدید
فناوری های Responsive Design Design به شما امکان می دهد یک وب سایت واحد ایجاد کنید که بدون در نظر گرفتن محدودیت ها و محدودیت های فنی ، توسط هر کسی در هر دستگاه قابل مشاهده باشد. تبدیل آن به یک تجربه کاربری عالی موضوع دیگری است ، اما دامنه و قابلیت های ابزار آزمایش همچنان بهبود می یابد.
