بهم ریختگی طراحی

1401/07/24

بهم ریختگی طراحی :

سلام و وقت بخیر

دوستان و جناب قربانی

یه مشکل عجیبی دارم و یک سایتی طراحی کردم که قسمت تماس با ما از چند تا اینپوت و ... برای پر کردن مشخصات کاربر استفاده کردم

متاسفانه مشکل عجیبی دارم و زمانی که روی موبایل واقعی کاربر روی اینپوت ها کلیک میکنه و کیبورد مجازی بالا میاد تا بتونه فیلد ها رو پر کنه طراحی سایت بهم میریزه و عرض صفحه خیلی زیاد میشه ! بنظر میاد نوبار سایت عرضش زیاد میشه زمانی که کیبورد مجازی بالا میاد ( وقتی که فوکوس رو از روی اینپوت بر میدارم مشکل حل میشه و طراحی اوکی میشه دوباره !)

توی نت سرچ کردم و یکسری کارها که توی استک و... گفته بودن مثل عرض ثابت دادن به body در حالت های focus , و active بودن اینپوت ها رو امتحان کردم ولی فایده ای نداشت

ممنون میشم راهنمایی کنید

amin da

یونس قربانی

1401/07/27
ساعت 21:20

سلام دوست من

در ری اکت نیتیو کامپوننت هایی برای این مورد هست ولی در ری اکت نه و با اضافه کردن طول عرض ثابت یا fixed کردن محل قرارگیری یا postion در طراحی درست باید جلوگیری کرد ازش

اگر از Material UI استفاده کنید یا Chakra UI به صورت پیشفرض از این مشکلات جلوگیری میکنن

اگر کیبورد روی input قرار میگیره و به هم میریزه با دادن positon با مقدار fixed مشکل حل نمیشه ؟

میتونی این کد رو در تگ script درون index.html یا درون useEffect برای mount در کامپوننت والد قرار بدی

document.querySelector(function() {
    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    document.querySelector("html, body").css({"width":w,"height":h});
});

این کد باعث میشه که طول و عرض body به px باشه

تست کن ببین مشکل برطرف میشه

amin da