طريقة جعل الموقع يناسب الهاتف عن طريق zoom out

مع ضبط وسم meta المناسب وربما القليل media query طالما أنك تستعمل flex box لعمل الlayout فإنك قد لا تضطر الى تصميم خاص لكل حجم شاشة ولكن فقط تعديلات بسيطة مثل حجم الخط font-size أو display لإخفاء أو أظهار أجزاء معينة. لكن في النهاية الأمر يعتمد على درجة تعقيد ماتريد إنجازه.

...
<!-- head طبقاً لحجم الشاشة وتضعه في وسم  scale يقوم هذا الكود بعمل   -->
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
...
	

جرب تعريف استعلام وسائط ينطبق على الشاشات الصغيرة او المستهدفة، بحيث يستعمل الخاصية الموجودة بالفعل في css الخاصية transform scale ويرفقها بالقيمة المناسبة

@media only screen and (max-width: 600px) {
  body, html {
    transform: scale(0.8);
  }
}

الخاصية transform في css