ایجاد هماهنگی بین صفحات وب سایت با رزیولیشن های متفاوت

[idocsidocs]

من پهنای صفحات سایتم رو روی 1024 پیکسل قرار می دم. بعد با استفاده از margin:0 auto محتویت صفحه رو در وسط مانیتور قرار می دم.

این تنظیمات برای رزیولیشن های پایین خوبه ولی وقتی از مانیتورهای واید که رزیولیشهای بالایی دارن (مثلا 900*1600) استفاده می کنم، 1024 پیکسل خیلی کم هست. و حدود 600 پیکسل از پهنای مانیتور خالی می مونه. اگه رزیولیشن مانیتور بیشتر بشه که دیگه صفحه خالی می شه.

راهی بنظرتون نمی رسه که بشه این مشکل رو حل کرد؟ مثلا از ترکیب درصد و پیکسل استفاده کرد یا ....؟

[mr.zenith]

سلام
اینکه کل صفحه را پر کنی اصلا جالب نیست و اینکه همه ی عکس ها کش بیاد باعث میشه از کیفیت آنها کم بشه.تجربه کردم که می گم.
متوانی از درصد برای پر کردن کل صفحه استفاده کنی اما فایده نداره.
بهترین را اینه که کل صفحه را محدود به 960 px کنی چون دیگه کسی 800 px نیست و برای اینکه کناره های صفحه خالی نمانه از یک پس زمینه استفاده کنی.

[idocsidocs]

سلام
اینکه کل صفحه را پر کنی اصلا جالب نیست و اینکه همه ی عکس ها کش بیاد باعث میشه از کیفیت آنها کم بشه.تجربه کردم که می گم.
متوانی از درصد برای پر کردن کل صفحه استفاده کنی اما فایده نداره.
بهترین را اینه که کل صفحه را محدود به 960 px کنی چون دیگه کسی 800 px نیست و برای اینکه کناره های صفحه خالی نمانه از یک پس زمینه استفاده کنی.
با مانیتورهایی که پهنای در حد 1024 پیکسل دارن مشکلی ندارم.

مانیتورهای جدید پهناشون در حد 1900 پیکسل هست. اگه پهنای سایت رو 960px بگیریم، تقریبا نصف مانیتور خالی می مونه و این یعنی افتضاح در طراحی !

تنها راهی که بنظرم می رسه اینه که از درصد و پیکسل استفاده کنیم.

نظر شما چیه؟

[eshpilen]

و این یعنی افتضاح در طراحی !
مگه اینهمه سایتهای دیگه چطوری هستن؟ افتضاح؟
بعدشم اونایی که بنظرت خوب هستن چطوری این کار رو انجام میدن؟

[رضا قربانی]

این سوال مربوط به بخش طراحی می شه.

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

[idocsidocs]

مگه اینهمه سایتهای دیگه چطوری هستن؟ افتضاح؟
بعدشم اونایی که بنظرت خوب هستن چطوری این کار رو انجام میدن؟
البته این طراحی از نظر من افتضاح هست !

سایتهایی مثل یاهو، جی میل و ام اس اسن، عرض صفحات سایتشون بر اساس عرض مانیتور کاربر بزرگ و کوچیک می شه.

بنظر من استفاده از پیکسل توی مانیتورها واید، کار مناسبی نیست. چون اگه عرض صفحمون رو 1024 پیکسل در نظر بگیریم و با مانیتوری که عرضش 1900 پیکسل باشه، سایت رو نگاه کنیم، سایت ما خیلی کوچیک به نظر می رسه !

راهی ارائه نشده که بتونیم این مشکل رو با مانیتورهای مختلف حل کنیم؟ حداقل سایت رو به روش سایتهایی مثل جی میل و یاهو طراحی کنیم؟

[binyaft]

مگه % چشه ؟

[eshpilen]

البته این طراحی از نظر من افتضاح هست !
بنظر من لزوما اینطوری نیست. شاید یخورده وسواس بیش از حد باشه این انتظار.
بالاخره سایت یه محتوای محدودی داره. قرار نیست همهء سایتها خودشون رو اینقدر محدود بکنن که حتما به اندازهء بزرگترین مانیتورها کش بیان و لابد محتوا هم کچل بنظر نیاد. بهرحال صفحه اگر کش بیاد اما ترکیبش مقداری عوض میشه و فضاهای خالی بیشتری توش میفته.
طراحی های استانداردی که صفحهء اونا کش نمیاد اما در مرکز میدان نمایش قرار داده شدن بنظر بنده بد نیستن. البته بعضی از اونا بیش از حد کوچک هستن (800*600) و بنظرم الان دیگه 1024*768 حداقل رزولیشن و استاندارد هست.
البته بستگی به محتویات و کاربرد سایت هم داره. شاید یه اینترفیس خیلی کوچیک و محدود بیشتر نباشه که همون 800*600 هم براش کافی باشه.

مانیتور به اون بزرگی رو آدم چطور میخواد پر کنه؟ مهم اینه سایت اندازهء نیاز و بهینه محتویات داشته باشه و خوانا و مرتب باشه.
چطور همهء سایتها میتونن برای تمام رزولیشن ها نمای کاملا ثابتی داشته باشن؟ اینکار اگر شدنی یا ساده بود همه انجام میدادن.
مثلا یک تصویر رو هم درنظر بگیری، بالاخره سایز ثابتی داره و اگر بخوای بر اساس رزولیشن بزرگش کنی کلی دردسر داره و ضمنا پرفورمنس رو هم تاحدی تحت تاثیر قرار میده. مگر از هر تصویر با دو یا چند رزولیشن کپی داشته باشی و بر اساس مانیتور بازدید کننده تصویر رو تعیین کنی، اما این خودش کار راحت و بدون عوارضی نیست و ضمنا باید سرعت اینترنت طرف رو هم درنظر گرفت.
بنظر بنده رزولیشن استانداردی که بیشتر کاربران از اون استفاده میکنن رو باید کامل ساپورت کرد، و برای رزولیشن های دیگه هم باید نگاه کرد و هرطور میشه و زیاد هزینه و سختی نداره صفحه رو مرتب و زیبا کرد، ولی دیگه لازم نیست بحد رزولیشن استاندارد کامل و زیبا باشه، چون این امر میتونه خیلی سخت و پرهزینه باشه. در این حد که خوانا و مرتب و قابل استفاده باشه کافیه.


سایتهایی مثل یاهو، جی میل و ام اس اسن، عرض صفحات سایتشون بر اساس عرض مانیتور کاربر بزرگ و کوچیک می شه. والا من تست نکردم ندیدم. مانیتور واید هم ندارم.
دقیقا یعنی با رزولیشن استاندارد برابری میکنن یا نه مقداری فرق دارن؟


بنظر من استفاده از پیکسل توی مانیتورها واید، کار مناسبی نیست. چون اگه عرض صفحمون رو 1024 پیکسل در نظر بگیریم و با مانیتوری که عرضش 1900 پیکسل باشه، سایت رو نگاه کنیم، سایت ما خیلی کوچیک به نظر می رسه !
خب اپلیکیشن های دسکتاپ هم اینطور هستن. فقط بحث صفحات وب نیست.
آیا تمام اپلیکیشن ها در این مانیتورها هیچ تفاوت ظاهری ای با رزولیشن های عادی ندارن؟
بنده بنظرم قبلا دیدم که خیلی اپلیکیشن ها توی این مانیتورها کوچیک میشن.
و یک مزیت مانیتور بزرگ یا واید هم بالاخره همینه که فضای بیشتری داره و میشه پنجره ها و برنامه های بیشتری رو باز کرد و در میدان دید داشت و البته بعضی برنامه ها هم که نیاز یا مفیده میتونن از این فضای اضافی استفاده کنن.
بنظر شما لازمه همهء برنامه ها توی یک مانیتور بزرگ به تناسب بزرگ بشن؟ و آیا این کار راحتی هست؟ آیا همیشه کار مفیدیه؟
ضمنا درواقع برنامه اونقدری هم کوچیک نشده، بلکه در مقایسه با میدان بزرگتر نمایشی کوچک بنظر میاد. البته رزولیشن بالای روی یک مانیتور برنامه رو تاحدی کوچک میکنه و فونتها ریز میشن که این طبیعی هست، اما کاربر مجبور نیست آخرین رزولیشن هر مانیتوری رو ست کنه، بلکه باید یه رزولیشنی که بنظرش بقدر کافی درشت و خوانا هست رو انتخاب کنه.
بنده همیشه از رزولیشن 1024*768 روی مانیتورهای معمولی 17 اینچ استفاده میکنم. اینطوری همه چیز بقدر کافی درشت و خوانا و طبیعی بنظر میاد و با صفحات وب و توسعهء وب هم کاملا سازگاره. اما خب روی یک مانیتور واید بهرحال عرض صفحه زیاد میشه و نباید از این رزولیشن استفاده کرد (چون این نسبت طول و عرض برای واید نیست) و همچنین یک مانیتور بزرگتر از 17 اینچ هم احتمالا رزولیشن بالاتری میخواد.

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

راستی تونستی یه چنتا اسکرین شات از سایتهای مختلف با رویه های مختلف از خوب تا بد بذاری بد نیستا! از هر سایت یکی در رزولیشن 1024*768 بذاره و یکی هم در یک رزولیشن بالا و واید.

[idocsidocs]

مگه % چشه ؟
اگه پهنای سایت رو روی 100 درصد قرار بدیم، توی مانیتورهای واید، صفحه سایت خیلی پهن می شه و اکثر سایتها این کار رو نمی کنن.

اگر پهنای سایت رو 80 درصد بدیم، توی رزیولیشن های پایین پهتای سایت خیلی کمه.

بنظرتون باید چیکار کرد؟

[idocsidocs]

بنظر من لزوما اینطوری نیست. شاید یخورده وسواس بیش از حد باشه این انتظار.

این وسواس نیست، باید بدونیم که سایتمون توی مانیتورهای مختلف چطور نمایش داده می شه.


راستی تونستی یه چنتا اسکرین شات از سایتهای مختلف با رویه های مختلف از خوب تا بد بذاری بد نیستا! از هر سایت یکی در رزولیشن 1024*768 بذاره و یکی هم در یک رزولیشن بالا و واید.

هنوز دارم دوره کارآموزی رو طی می کنم و فعلا زوده برای تز دادن :چشمک:

فعلا دارم روی یه ترکیب مناسب جستجو می کنم تا بشه عرض و ارتفاع سایت رو در رزیولیشن های مختلف به درستی نمایش داد. هنوز به نتیجه درستی نرسیدم.

خیلی از دوستان با دیدن این سوال زود می گن از درصد استفاده کن ! انگار این نکته به ذهن خودم نرسیده !
در این مورد خیلی کم وارد جزئیات می شن و به همین دلیل به نتیجه خاصی نرسیدم. چند منبع رو هم خوندم و اونا هم یا پهنای 100 درصد قرار می دن یا پهنای 1024 پیکسل که هیچ کدوم مشکل رو حل نمی کنه.

[alismith]

سلام
من متوجه نشدم شما میخای صفحه سایت در همه resolution ها wide یا میخای size خودش رو حفظ کنه؟

اگر حالت دوم باشه یک مقدار ثابت با px بده و فقط محتوا را در body که قرار میدی با center تنظیم کن

مثلا:



<body>
<center>
<!--Content-->
</center>
</body>



موفق باشید

[...!M.J!...]

عذر میخوام کی گفته یاهو سایزش تغییر میکنه؟؟ یه تست بکن دوباره !!!

این بستگی به شکل قالبت داره بله سایتی مثل جی میل رو میشه اندازشو تغییر داد چون نوعش اینجوریه ولی سایتی مثل یاهو رو نمیشه!!
اتفاقا بنظر من افتضاح توی طراحی اونه که تو سایته هی اینور اونور بره با کوچیک بزرگ کردن صفحه استاندارد هم همونطوری که دوستمون گفت 960 بزار

مثل یاهو که خودت مثال زدی

[eshpilen]

این وسواس نیست، باید بدونیم که سایتمون توی مانیتورهای مختلف چطور نمایش داده می شه.دونستن رو نگفتم.
گفتم اینکه آدم فکر کنه حتما باید سایت رو طوری طراحی که که در روزلیشن آخر بزرگترین مانیتور واید بازار هم تمام صفحه رو پر کنه و خیلی قشنگ بنظر برسه، بنظرم وسواسی هست. یعنی شما چطوری میتونی سایت رو طوری طراحی کنی که از رزولیشن 1024*768 مانیتور 17 اینچ معمولی تا اون رزولیشن های بالای بزرگترین مانیتورهای واید، تفاوت چندانی از نظر زیبایی نداشته باشه؟ آیا درمورد هر سایتی با هر محتوایی ممکن هست؟
این کار رو شاید بعضی سایتها انجام بدن، اما بستگی به ساختار و محتوای سایت هم داره. یه سایت و صفحاتی که متن و محتوای Float زیاد دارن انعطاف خیلی بیشتری میده. چون متن و محتوا خیلی دینامیک میتونه خودش رو با محدودهء صفحه تطابق بده و اغلب هم نیازی نیست شما کار زیادی انجام بدید.
البته شاید 100% کردن ابعاد صفحه زیباتر بنظر برسه، ولی بنده فکر نمیکنم همیشه از نظر زیبایی و کارایی بهینه باشه. فکر کن مثلا یکسری دکمه ها و گزینه ها سمت راست صفحه باشن و یکسری دیگه سمت چپ (روی یک مانیتور بزرگ واید). بعد ماوس رو از این ور صفحه ببری تا اون ورش خودش کلی راهه :قهقهه:
چه اشکالی داره اگر این دکمه ها و گزینه ها فقط به اندازهء فضای ضروری فاصله داشته باشن و همه در وسط صفحه Align شده باشن؟ اینطوری از نظر کاربردی راحتتر نیست؟

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

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

[idocsidocs]

[QUOTE=alismith;1309881]سلام من متوجه نشدم شما میخای صفحه سایت در همه resolution ها wide یا میخای size خودش رو حفظ کنه؟ موفق باشید[QUOTE] من می خوام پهنای سایتم توی رزیولیشن های مختلف، یه نسبتی از پهنای مانیتور باشه. البته می شه پهنای سایت رو روی 80 یا 75 درصد قرار داد ولی مشکل اینجاست که این کار توی رزیولیشن های پایین به خوبی جواب نمی ده و پهنای سایت خیلی کم می شه اما این روش توی رزیولیشنهای بالا کاملا مناسب هست. یه راهی می خوام برم که توی رزیولیشن بالا و رزیولیشن پایین به خوبی جواب بده.

[alismith]

می شه پهنای سایت رو روی 80 یا 75 درصد قرار داد ولی مشکل اینجاست که این کار توی رزیولیشن های پایین به خوبی جواب نمی ده و پهنای سایت خیلی کم می شه

دوست عزیز تصور شما اشتباه هستش ، مثلا می تونید روی 90% تنظیم کنید و این مقدار در تمام صفحه نمایش ها یکی هستش و متناسب با مانیتور تنظیم میشه و به هیچ وجه پهنا کم نمیشه چون این کار مطابق با resolution صفحه نمایش انجام میشه
البته شما می تونید طول و عرض صفحه را با javascript به دست بیارید و در زمان load صفحه تغییرات را اعمال کنید ولی این کار منطقی نیست (حجم-سرعت بارگذاری و....)


موفق باشید

[idocsidocs]

عذر میخوام کی گفته یاهو سایزش تغییر میکنه؟؟ یه تست بکن دوباره !!!

این بستگی به شکل قالبت داره بله سایتی مثل جی میل رو میشه اندازشو تغییر داد چون نوعش اینجوریه ولی سایتی مثل یاهو رو نمیشه!!
اتفاقا بنظر من افتضاح توی طراحی اونه که تو سایته هی اینور اونور بره با کوچیک بزرگ کردن صفحه استاندارد هم همونطوری که دوستمون گفت 960 بزار

مثل یاهو که خودت مثال زدی
سایت یاهو رو تست کردم.

ساختار صفحه اول این سایت از چند تگ تشکیل شده.ساختار تگها رو در ادامه قرار دادم.

<div id="y-shade"><div id="y-masthead"><div id="y-header" class="clearfix"><div id="y-content" class="clearfix y-ln-accent"><div id="y-footer"><div id="y-subfooter" role="contentinfo">

مثلا تگی که از آی دی y-conten استفاده کرده، محتویات اصلی سایت رو تو خودش جاداده از max-width: 1024px; استفاده کرده یعنی پهنای صفحاتش زیاد می شن ولی حداکثر به 1024 پیکسل می رسن.

[alismith]

خوب width چه مقداری داشت؟

البته این می تونه مربوط به محتوایی که درون این div قرار میگیره باشه و ربطی به resolution صفحه نمایش نداشته باشه :متفکر:

[idocsidocs]

دوست عزیز تصور شما اشتباه هستش ، مثلا می تونید روی 90% تنظیم کنید و این مقدار در تمام صفحه نمایش ها یکی هستش و متناسب با مانیتور تنظیم میشه و به هیچ وجه پهنا کم نمیشه چون این کار مطابق با resolution صفحه نمایش انجام میشه
البته شما می تونید طول و عرض صفحه را با javascript به دست بیارید و در زمان load صفحه تغییرات را اعمال کنید ولی این کار منطقی نیست (حجم-سرعت بارگذاری و....)


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


می تونید روی 90% تنظیم کنید و این مقدار در تمام صفحه نمایش ها یکی هستش و متناسب با مانیتور تنظیم میشه و به هیچ وجه پهنا کم نمیشه چون این کار مطابق با resolution صفحه نمایش انجام میشه
اگه ای کار رو بکنم، می تونم پهنای تگهای داخلی رو روی 1024 پیکسل تنظیم کنم تا اگه مانیتور کوچیک بود، این تگها از تگی که پهناش 90 درصد هست بیرون بزنه؟ این کار مشکل فنی ایجاد نمی کنه؟

سایت ام اسن ان از این پهنا استفاده کرده.

min-width: 972px; width: 81em;


یعنی می

[eshpilen]

مثلا تگی که از آی دی y-conten استفاده کرده، محتویات اصلی سایت رو تو خودش جاداده از max-width: 1024px; استفاده کرده یعنی پهنای صفحاتش زیاد می شن ولی حداکثر به 1024 پیکسل می رسن.
اینو گفتی بنظرم اومد احتمالا یه همچین طراحی پیاده کردن: کل صفحه 100% هست، ولی متن و عکسها در پهنای 1024 محدود شدن و در وسط صفحه قرار داده شدن. یعنی مثلا پنل ها و دکمه ها و گزینه های کلی سایت در سمت چپ و راست قرار گرفتن، ولی محتویات خاص هر صفحه مثل متن و تصویر و غیره در مرکز در یک فضای 1024 پیکسل.
اینطوریه؟
راستی آدرس صفحه رو هم بده.

[alismith]

اگه ای کار رو بکنم، می تونم پهنای تگهای داخلی رو روی 1024 پیکسل تنظیم کنم تا اگه مانیتور کوچیک بود، این تگها از تگی که پهناش 90 درصد هست بیرون بزنه؟ این کار مشکل فنی ایجاد نمی کنه؟

وقتی برای parent div یک max width تعریف نکنید، منظورم همون divی هست که 90% هستش و دارای موقعیت static باشه فکر نکنم مشکلی پیش بیاد

امتحان کنید

موفق باشید

[idocsidocs]

اینو گفتی بنظرم اومد احتمالا یه همچین طراحی پیاده کردن: کل صفحه 100% هست، ولی متن و عکسها در پهنای 1024 محدود شدن و در وسط صفحه قرار داده شدن. یعنی مثلا پنل ها و دکمه ها و گزینه های کلی سایت در سمت چپ و راست قرار گرفتن، ولی محتویات خاص هر صفحه مثل متن و تصویر و غیره در مرکز در یک فضای 1024 پیکسل.
اینطوریه؟
راستی آدرس صفحه رو هم بده.
سایت که همون یاهو هست و آدرسش فرقی نداره.


غیره در مرکز در یک فضای 1024 پیکسل.
اینطوریه؟
اینطوری نیست.
حداکثر پهنا 1024 هست و این تگها بصورت مجزا توی بادی قرار گرفتن.

خودت هم با فایرباگ یه تست بکنید و نتیجه رو اعلام کنید. بلکه بشه به یه حالت استاندارد برسیم.

البته بنظرم می رسه که اینها اول می یان مرورگر رو تشخیص می دن و بر اساس مرورگر یه فایل سی اس اس بکار می برن.

[idocsidocs]

وقتی برای parent div یک max width تعریف نکنید، منظورم همون divی هست که 90% هستش و دارای موقعیت static باشه فکر نکنم مشکلی پیش بیاد

امتحان کنید

موفق باشید
امتحان کردم و مشکلی پیش نیومده.

اما می خوام بدونم این کار باعث کرش کردن مرورگر نمی شه؟ همونطور که می دونید می شه تبهای زیادی رو باز کرد و اگه سایتی که ما طراحی کنیم باعث کرش کردن مرورگر بشه که دیگه هیچ !

[alismith]

دوست من میشه بیشتر توضیح بدید چرا باید مرورگر crash بشه؟

[idocsidocs]

دوست من میشه بیشتر توضیح بدید چرا باید مرورگر crash بشه؟
البته نگفتم که حتما کرش می کنه ولی طراحی بد و نادرست هم می تونه مرورگها رو از کار بندازه.

[calej2009]

لطفا به منم بگین از چه کدی استفاده کنم
اخه منم صفحه وب سایتم با رزولویشن مانیتورهای مختلف فیت نمی شه
ممنون می شم کسی راهنمایی کنه

[MMSHFE]

نظرتون درمورد این روش چیه؟ چند قالب CSS برای Resolutionهای مختلف طراحی کنیم و با AJAX ابعاد صفحه کلاینت رو دریافت کرده و برای PHP بفرستیم و برحسب ابعاد مربوطه، قالب مناسب انتخاب و استفاده بشه؟

[H:Shojaei]

مگه % چشه ؟
با سلام
بدون ٪ اصلا نمیشه به عنوان مثال مانیتورهای lcd اندازه ی بزرگتری نسبت به crt دارند بنا بر این باید از ٪ استفاده کرد
اگه بکید 50٪ برنامه نصف صفحه رو هرچه قدر که باشه میگیره

[H:Shojaei]

نظرتون درمورد این روش چیه؟ چند قالب CSS برای Resolutionهای مختلف طراحی کنیم و با AJAX ابعاد صفحه کلاینت رو دریافت کرده و برای PHP بفرستیم و برحسب ابعاد مربوطه، قالب مناسب انتخاب و استفاده بشه؟

لقمه رو دور سر چرخوندنه :خجالت:
وقتی با ٪ به راحتی میشه چرا از کد نویسی؟:متفکر:

[MMSHFE]

با سلام، دوست عزيز بارها من گفتم كه استفاده از % ازنظر اصول طراحي درست نيست. فرض كنيد قسمت منوها رو برحسب درصد تعيين اندازه كردين. حالا كاربر توي يك مانيتور كوچك صفحه رو مشاهده ميكنه و اون مقدار درصد، اينقدر كوچك ميشه كه نوشته هاي منوها يا از كادر خارج ميشه يا چندسطري ميشه كه درهرحال مناسب نيست. البته نميگم هيچ جا از درصد استفاده نكنيم ولي وقتي اندازه رو برحسب پيكسل نديم، خودمون هم نميدونم سايت چطور ديده ميشه چون فقط مسئله Resolution نيست، ممكنه كاربر پنجره مرورگر رو از حالت تمام صفحه خارج كنه. در هر حال، راهي كه گفتم خيلي دردسرساز نيست و ضمناً عملي هم هست.

[H:Shojaei]

با سلام، دوست عزيز بارها من گفتم كه استفاده از % ازنظر اصول طراحي درست نيست. فرض كنيد قسمت منوها رو برحسب درصد تعيين اندازه كردين. حالا كاربر توي يك مانيتور كوچك صفحه رو مشاهده ميكنه و اون مقدار درصد، اينقدر كوچك ميشه كه نوشته هاي منوها يا از كادر خارج ميشه يا چندسطري ميشه كه درهرحال مناسب نيست. البته نميگم هيچ جا از درصد استفاده نكنيم ولي وقتي اندازه رو برحسب پيكسل نديم، خودمون هم نميدونم سايت چطور ديده ميشه چون فقط مسئله Resolution نيست، ممكنه كاربر پنجره مرورگر رو از حالت تمام صفحه خارج كنه. در هر حال، راهي كه گفتم خيلي دردسرساز نيست و ضمناً عملي هم هست.

lمیشه کد ajax رو برای گرفتن Resolution مانیتور client بدید
mer30

[MMSHFE]

این کد صفحه :


<!doctype html>
<?php
session_start();
if(!isset($_SESSION['width'])) {
$_SESSION['width'] = 1024;
}
if(!isset($_SESSION['height'])) {
$_SESSION['height'] = 768;
}
?>
<html>
<head>
<title>Hello</title>
<meta charset="utf-8"/>
</head>
<script src="jqmin.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).load(function () {
$.ajax("resolution.php?width="+screen.width+"&height="+screen.height);
});
</script>
<link href="<?php echo $_SESSION['width']; ?>x<?php echo $_SESSION['height']; ?>.css" rel="stylesheet" type="text/css"/>
<body>
</body>
</html>

اینم کد فایل resolution.php :


session_start();
if(isset($_GET['width'])) {
$_SESSION['width'] = $_GET['width'];
}
if(isset($_GET['height'])) {
$_SESSION['height'] = $_GET['height'];
}

البته کد فوق در ساده ترین حالت هست که باعث میشه اولین بار، صفحه در Resolution مانیتور 1024 در 768 به نمایش در بیاد و بعد از اون، برحسب مانیتور کلاینت، اصلاح میشه. البته باید فایل css رو با نامی تحت قالب WxH.css (مثل 1600x900.css) ذخیره کنیم.
نکته دیگه اینکه روشهای دیگری هم برای اینکار هست. مثلاً اولین بار یک صفحه خوش آمدگویی به کاربر نشون بدیم و اونجا، ابعاد صفحه رو بدست بیاریم و بعد، یک Session ایجاد کنیم که دیگه صفحه خوش آمدگویی ظاهر نشه و محتویات با قالب درست به نمایش در بیاد. یا مثلاً بجای مختصات صفحه، از ابعاد مرورگر استفاده کنیم یا هر کار دیگه که صلاح بدونید!

[soroush.r70]

آقا نظرتون درباره اینکه یه ajax load بذاریم و درهنگام بارگذاری Resolution صفحه کاربر گرفته بشه و براساس اون صفحه وب سایت موردنظر load بشه به نظر شما همچین کاری می شه کرد نظر شما چیه.

[djsaeedkhan]

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

[soroush.r70]

درسته این که شما می گی یه روش عامیانه هست ولی من منظورم در مورد روش آقا محمد بود. که می شه با ajax load این کارو کرد

[mbf5923]

والا این الگوریتم عملی هستش و پیشنهاد جالبی هست اما خوب کد نویسی برای چند حالت از ریزولیشن ها باید انجام بشه که خوب یکم کار رو سخت میکنه

[tux-world]

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

[MMSHFE]

والا این الگوریتم عملی هستش و پیشنهاد جالبی هست اما خوب کد نویسی برای چند حالت از ریزولیشن ها باید انجام بشه که خوب یکم کار رو سخت میکنه
بالأخره اگه میخوایم کار خوب انجام بدیم و مثل سایتهای حرفه ای عمل کنیم، باید کمی زحمت بیشتر بکشیم. فکر میکنم سایتهای بزرگ هم حداقل با چند مانیتور مختلف سایت رو تست میکنند :چشمک:

من یه دایو تعریف میکنم و به صورت شناور از کناره ها مارگینش میکنم و خودش رو درصدی بعد تمام اجزای دیگه رو توش میذارم برای هر رزولیشنی مناسب و صد در صد کاراست. حتی موقعی که فایرفاکس رو کوچیک و بزرگ میکنید اون هم به همون نسبت تغییر میکنه
دوست عزیز، مشکل سر اینکه چطور پهنا رو شناور کنیم نیست، مسئله سر اینه که این روش در همه جا الزاماً یک روش بهینه نیست. همونطور که قبلاً هم اشاره کردم، فرض کنید برای منوها اندازه درصدی بدین و بعد مرورگر اونقدر باریک بشه که باعث چندسطری شدن گزینه های منو بشه و کلاً قیافه سایت رو بهم بریزه.

[eshpilen]

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


فرض کنید برای منوها اندازه درصدی بدین و بعد مرورگر اونقدر باریک بشه که باعث چندسطری شدن گزینه های منو بشه و کلاً قیافه سایت رو بهم بریزهمنظورت روی دسکتاپ که نیست؟ چون این دیگه خیلی وسواسیه بنظرم.
من فکر کنم منظورت صفحهء نمایش تلفن همراه و کلا این دستگاههای جورواجور هست که درآمده و صفحهء کوچکتری دارن (بنظرم و اکثرا با نسبت طول و عرض متفاوت با مانیتور رایانه).
خدا بگم اون جابز رو چیکار بکنه یه چیزایی الکی درست کرد بعدش هم گذاشت رفت :لبخند:
خدایی هیچی مثل PC نمیشه. من از این دستگاهها زیاد خوشم نمیاد. فقط دردسر ما برنامه نویسها رو کلی بیشتر میکنن.

فقط این گوشی موبایل من خوبه بخاطر تقویم فارسیش و ساعت که صبح میذارم بیدارم میکنه و تایمرش واسه آب پز کردن تخم مرغ یا جوشاندن تن ماهی :قهقهه:

[MMSHFE]

منظورت روی دسکتاپ که نیست؟ چون این دیگه خیلی وسواسیه بنظرم.
من فکر کنم منظورت صفحهء نمایش تلفن همراه و کلا این دستگاههای جورواجور هست که درآمده و صفحهء کوچکتری دارن (بنظرم و اکثرا با نسبت طول و عرض متفاوت با مانیتور رایانه).
دقیقاً. البته اگه اینکار رو انجام بدیم، مشکل دسکتاپ هم حل میشه دیگه.

خدا بگم اون جابز رو چیکار بکنه یه چیزایی الکی درست کرد بعدش هم گذاشت رفت :لبخند:
حالا باز خدا بیامرزدش که چیزای بدرد بخور ساخت. این عمو بیلی رو چی بگیم با IE که پدر ما رو درآورد!

[eshpilen]

میگم چطوره همه چیز رو بندازیم وسط صفحه و با مقادیر ثابت. مثلا 1024 در 768 که فکر میکنم استاندارد باشه.
بعد اگر کاربر خواست خب میتونه با امکاناتی که امروزه اکثر مرورگرها دارن کل محتویات صفحه رو بزرگ و کوچیک کنه دیگه. فایرفاکس هم که این تنظیمات رو برای هر سایت یادش میمونه و توی صفحات و دفعات دیگه لزوما نیازی نیست این کار رو دوباره انجام بده.
البته مسئلهء مانیتورهای wide و اینا هم هست. ولی کلا من فکر نمیکنم دیگه اینقدر انتظار بره از برنامه نویسها که برای همه شکل و همه اندازه همهء کارها رو خودشون انجام بدن. خیلی سخته. صرف نمیکنه.
همینطوریش تست و ساپورت مرورگرهای مختلف بقدر کافی کاره.