PDA

View Full Version : سوال: Responsive کردن سایت


endomondo
یک شنبه 15 تیر 1399, 23:35 عصر
سلام به همه،
یه سوال داشتم. من دارم یه وبسایت میسازم، الان تو مرحله ریسپانسیو کردنشم.
برای تنظیم کردن سایت برای اسکرین های با سایزای مختلف از مدیا کوئری استفاده میکنم. مشکلم اینه که وقتی مثلا از توی قسمت developers tools کروم ویندوز استفاده میکنم و طول و عرض های مختلف رو میزنم که با توجه به اونا سایت رو استایل بدم، یه چیزی میبینم و وقتی واقعی سایت رو میبینم، یه چیز دیگه میبینم!
مثلا توی قسمت developers tools کروم لپتاپ، ابعاد گوشیمو میزنم (640 360x)، یه چیزی میبینم، وقتی با خود گوشیم میرم داخل سایت، سایتو یه جور دیگه میبینم!! وقتی ابعاد یکیه چرا باید فرق کنه؟!؟ حتی از سایت های شبیه ساز هم که استفاده میکنم اونجا هم یجور دیگه میبینم!!
مثل این سایت: http://whatismyscreenresolution.net/multi-screen-test

ممنون میشم کمک کنین واقعا گیر کردم
sd702004
دوشنبه 16 تیر 1399, 09:54 صبح
با سلام
البته بهتر بود فایلهای html/css رو اینجا قرار میدادین تا بهتر میشد نظر داد ولی در حالت کلی اگه موردی که در این لینک (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#Viewport_basics) بهش اشاره شده رو رعایت نکردین احتمالا مشکل به همین خاطر باشه
<meta name="viewport" content="width=device-width, initial-scale=1">
sohan5
دوشنبه 16 تیر 1399, 15:32 عصر
این مورد رو بنده هم برای سایتم تهران تخفیف (https://tehrantakhfif.ir) و فروشگاه اینترنتی (https://armitastore.com/) و دانلود کتاب (http://dlketab.ir/) دارم...لطفا راهنمایی کنید
بازی انفجار (https://betdavat.com/%D8%B4%D8%B1%D8%B7-%D8%A8%D9%86%D8%AF%DB%8C-%D8%A7%D9%86%D9%81%D8%AC%D8%A7%D8%B1-%D8%AF%D8%B1-%DA%A9%D8%A7%D8%B2%DB%8C%D9%86%D9%88-%D8%A2%D9%86%D9%84%D8%A7%DB%8C%D9%86-%D8%B3%D8%A7%DB%8C%D8%AA-%D9%87/)
endomondo
دوشنبه 16 تیر 1399, 23:05 عصر
با سلام
البته بهتر بود فایلهای html/css رو اینجا قرار میدادین تا بهتر میشد نظر داد ولی در حالت کلی اگه موردی که در این لینک (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#Viewport_basics) بهش اشاره شده رو رعایت نکردین احتمالا مشکل به همین خاطر باشه
<meta name="viewport" content="width=device-width, initial-scale=1">
سلام. ممنون از جوابتون.
چرا این مورد رو هم رعایت کردم...

کد ها هم چیز خاصی نبود که بخوام اینجا بذارم. مدیا کوئری های روتین و سی اس اس های معمول. مثلا یه div تو یه حالتای مختلف پوزیشن یا سایزش فرق میکنه! در حالی که وقتی برای مثال یه کوئری میذاری برای اسکرین های بزرگتر از 360px، دیگه چه با موبایل چه developers tools کروم روی ویندوز چه سایت های اِمولیتور، نباید فرقی داشته باشه و توی همه ی این ها سایت باید یه جور نشون داده بشه.
عکسای زیرو ببینین برای مثال:
این مثلا وقتیه که سایت رو به صورت نرمال توی کروم لپتاپ باز میکنم.
151901
اینم وقتیه که تو قسمت developers tools کروم، ابعاد اسکرین لپتاپ رو میزنم ولی باو عکس قبلی فرق داره!
151902
behzadamin12
جمعه 20 تیر 1399, 14:24 عصر
سلام برای ریسپانس و کلا سی اس اس (https://jobteam.ir/category/Css) یه دسته بندی ایجاد کردم
ان شاالله از این به بعد کامل پاسخ میدم به سوالات
https://jobteam.ir/category/Css