تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يطرح تطوير صفحات الويب والتطبيقات للأجهزة المحمولة تحديات مختلفة مقارنةً
بتطوير صفحة ويب لمتصفحات الويب لسطح المكتب. يمكن أن تساعدك الممارسات التالية في تقديم
تطبيق الويب الأكثر فاعلية لنظام Android
وغيره من أجهزة الجوال.
إعادة توجيه الأجهزة الجوّالة إلى إصدار مخصّص للأجهزة الجوّالة من موقعك الإلكتروني: هناك العديد من
لإجراء ذلك باستخدام عمليات إعادة التوجيه من جهة الخادم. إحدى الطرق الشائعة هي "التعرف" الـ
سلسلة وكيل المستخدم التي يوفّرها متصفّح الويب لتحديد
ما إذا كنت تريد عرض إصدار للأجهزة الجوّالة من موقعك الإلكتروني أم لا، ابحث عن رمز "الأجهزة الجوّالة" في وكيل المستخدم.
استخدام HTML5
للأجهزة الجوّالة HTML5 هي اللغة الترميزية الأكثر شيوعًا المستخدمة لمواقع الويب للجوّال.
يشجع هذا المعيار على تطوير الأجهزة الجوّالة أولاً للمساعدة في ضمان عمل المواقع الإلكترونية على مجموعة متنوعة من
الأجهزة. بخلاف لغات الويب السابقة، يستخدم HTML5 واجهات برمجة تطبيقات <DOCTYPE>
تعريفات charset:
<!DOCTYPEhtml>
...
<metacharset="UTF-8">
استخدِم البيانات الوصفية لإطار العرض لتغيير حجم صفحة الويب بشكل صحيح. في المستند
<head>، يجب تقديم بيانات وصفية تحدّد الطريقة التي تريد أن يتّبعها إطار عرض المتصفّح.
لعرض صفحة الويب الخاصة بك. على سبيل المثال، يمكن أن تحدد البيانات الوصفية لإطار العرض ارتفاع وعرض
إطار عرض المتصفّح وحجم الصفحة المبدئي وكثافة الشاشة المستهدفة.
يوضّح المثال التالي كيفية ضبط البيانات الوصفية لإطار العرض:
لمعرفة مزيد من المعلومات حول طريقة استخدام البيانات الوصفية لإطار العرض للأجهزة التي تعمل بنظام التشغيل Android، يمكنك الاطّلاع على مقالة إتاحة الشاشات المختلفة في تطبيقات الويب.
استخدام تنسيق خطي عمودي: تجنب حاجة المستخدم إلى الانتقال يسارًا ويمينًا أثناء
والتنقل في صفحتك. كما أن التمرير لأعلى ولأسفل أسهل على المستخدم، كما يجعل الصفحة أكثر بساطة.
اضبط ارتفاع التنسيق وعرضه على match_parent. إعداد
ارتفاع وعرض الكائن WebView إلى
يتأكّد match_parent من تحديد حجم مشاهدات تطبيقك بشكل صحيح. نحن لا ننصح بتعيين
الارتفاع إلى wrap_content لأنّ مقاسها يؤدي إلى خطأ في الحجم. وبالمثل، يؤدي تعيين
عرض التنسيق على wrap_content غير متوافق ويتسبب في:WebView
استخدام عرض الشركة الرئيسية بدلاً منها. وبسبب هذا السلوك، من المهم أيضًا التأكد من عدم
تم ضبط ارتفاع وعرض عناصر التنسيق الرئيسية لعنصر WebView على
wrap_content
تجنُّب طلبات الملفات المتعددة: لأنّ الأجهزة الجوّالة لديها عادةً سرعة اتصال
أبطأ من أجهزة الكمبيوتر المكتبية، احرص على تحميل الصفحة بأسرع ما يمكن. تتمثل إحدى طرق تسريعها في
تجنَّب تحميل ملفات إضافية، مثل أوراق الأنماط وملفات النصوص البرمجية في <head>.
ضع في اعتبارك أيضًا
إجراء تحليل للجوّال باستخدام
إحصاءات PageSpeed من Google للحصول على اقتراحات تحسين تفصيلية خاصة بتطبيقك.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Best practices for web apps\n\nDeveloping web pages and applications for mobile devices presents different challenges compared\nto developing a web page for desktop web browsers. The following practices can help you provide the\nmost effective web application for Android and other mobile devices.\n\n1. **Redirect mobile devices to a dedicated mobile version of your website.** There are several ways to do this using server-side redirects. One common method is to \"sniff\" the User Agent string provided by the web browser. To determine whether to serve a mobile version of your site, look for the \"mobile\" string in the User Agent.\n| **Note:** Large-screen Android-powered devices that are served full-size websites---such as tablets---don't include the \"mobile\" string in the User Agent, while the rest of the User Agent string is mostly the same. As such, it's important you deliver the mobile version of your website based on whether the \"mobile\" string exists in the User Agent.\n2. **Use [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)\n for mobile devices.** HTML5 is the most common markup language used for mobile websites. This standard encourages mobile-first development to help ensure that websites work on a variety of devices. Unlike previous web languages, HTML5 uses simpler `\u003cDOCTYPE\u003e` and `charset` declarations: \n\n ```xml\n \u003c!DOCTYPE html\u003e\n ...\n \u003cmeta charset=\"UTF-8\"\u003e\n ```\n3. **Use viewport metadata to properly resize your web page.** In your document `\u003chead\u003e`, provide metadata that specifies how you want the browser's viewport to render your web page. For example, your viewport metadata can specify the height and width for the browser's viewport, the initial page scale, and the target screen density.\n\n The following example shows how to set viewport metadata: \n\n ```xml\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"\u003e\n ```\n\n For more information about how to use viewport metadata for Android-powered devices, read [Support different screens in web apps](/guide/webapps/targeting).\n4. **Use a vertical linear layout.** Avoid the need for the user to scroll left and right while navigating your page. Scrolling up and down is easier for the user and makes your page simpler.\n5. **Set the layout height and width to `match_parent`.** Setting your [`WebView`](/reference/android/webkit/WebView) object's height and width to `match_parent` makes sure your app's views are sized correctly. We discourage setting the height to `wrap_content` because it results in incorrect sizing. Similarly, setting the layout width to `wrap_content` isn't supported and causes your `WebView` to use the width of its parent instead. Because of this behavior, it's also important to make sure none of your `WebView` object's parent layout objects have their height and width set to `wrap_content`.\n6. **Avoid multiple file requests.** Because mobile devices typically have a connection speed slower than desktop computers, make your page load as fast as possible. One way to speed it up is to avoid loading extra files such as stylesheets and script files in the `\u003chead\u003e`. Also, consider [performing mobile analysis with\n Google's PageSpeed Insights](https://developers.google.com/speed/docs/insights/v5/get-started) for detailed optimization suggestions specific to your app.\n\nAdditional resources\n--------------------\n\n- [Pixel-Perfect UI in the WebView](https://developers.google.com/chrome/mobile/docs/webview/pixelperfect)\n- [Learn Responsive Design](http://www.html5rocks.com/en/mobile/responsivedesign/)\n- [High DPI images for variable pixel densities](http://www.html5rocks.com/en/mobile/high-dpi/)\n- [Mobile Web Best Practices](http://www.w3.org/TR/mobile-bp/)\n- [Make the Web Faster](https://developers.google.com/speed/overview)"]]
