انشاء سكريبت إختبار استجابة و تصميم الموقع
استكشف موقعك بسهولة باستخدام تمرير أبعاد الشاشة الحديثة.
اختبر موقعك
المقدمة
تعد استجابة تصميم المواقع أمرًا حيويًا في عصرنا الحالي، حيث يستخدم الأشخاص أجهزة ذات شاشات وأحجام مختلفة لتصفح الإنترنت. لضمان توفير تجربة استخدام مميزة على جميع الأجهزة، يحتاج المطورون إلى أدوات تساعدهم في اختبار كيفية استجابة مواقعهم لهذه الأحجام المتنوعة.
في هذا الموضوع، سنتحدث عن أداة مميزة تمكنك من اختبار تصميم موقعك باستخدام أبعاد قابلة للتمرير، بالإضافة إلى شرح طريقة إنشاء هذه الأداة بلغة HTML وCSS وJavaScript.
ما هي الأداة؟
هذه الأداة هي تطبيق ويب بسيط يتيح لك إدخال رابط موقع إلكتروني لمعاينة تصميمه داخل نافذة مخصصة. تتيح النافذة إمكانية التمرير أفقيًا وعموديًا لاستكشاف جميع أجزاء الموقع دون الحاجة إلى إعادة ضبط الأبعاد أو التصغير.
مميزات الأداة
- سهولة الاستخدام: إدخال رابط الموقع والبدء في استعراض التصميم مباشرة.
- دعم التمرير: يسمح التمرير داخل نافذة العرض باستكشاف جميع أبعاد الموقع.
- أبعاد افتراضية حديثة: عرض الموقع بأبعاد واسعة مثل 1440×900 بكسل.
- واجهة مستخدم عصرية: تصميم بسيط ومريح للمستخدم.
- مفتوحة المصدر: يمكن تعديل الكود بسهولة ليناسب الاحتياجات المختلفة.
كيفية إنشاء الأداة؟
تم بناء هذه الأداة باستخدام تقنيات الويب الأساسية:
1. HTML:
<form id="urlForm">
<input type="url" id="websiteUrl" placeholder="https://example.com" required>
<button type="submit">عرض الموقع</button>
</form>
<div id="iframeWrapper" class="iframe-container">
<p>أدخل رابطًا لعرض الموقع هنا.</p>
</div>
2. CSS:
.iframe-container {
width: 100%;
height: 500px;
overflow: auto; /* يسمح بالتمرير */
border: 1px solid #ccc;
background-color: #eaeaea;
}
iframe {
width: 1440px; /* أبعاد العرض الافتراضية */
height: 900px;
border: none;
}
3. JavaScript:
urlForm.addEventListener('submit', function (event) {
event.preventDefault();
const url = websiteUrlInput.value;
if (!isValidUrl(url)) {
alert('يرجى إدخال رابط صالح.');
return;
}
const iframe = document.createElement('iframe');
iframe.src = url;
iframeWrapper.innerHTML = ''; // تفريغ المحتوى السابق
iframeWrapper.appendChild(iframe);
});
كيفية الاستخدام
- قم بفتح الملف في أي متصفح.
- أدخل رابط الموقع الذي تريد اختباره في الحقل المخصص.
- اضغط على زر "عرض الموقع".
- سيتم عرض الموقع داخل نافذة قابلة للتمرير لاستعراض جميع الأبعاد بسهولة.
الخاتمة
هذه الأداة البسيطة والمجانية تقدم للمطورين طريقة مريحة لاختبار استجابة تصميم مواقعهم بسهولة. من خلال إضافة ميزة التمرير، يمكن استكشاف الموقع بالكامل دون الحاجة إلى إعادة ضبط الأبعاد أو تصغير المحتوى. الأداة قابلة للتطوير والتخصيص، مما يجعلها خيارًا رائعًا لكل من الهواة والمحترفين.
