עיצוב אתר רספונסיבי עם media-queries

31/01/2013 16:24

אבי כהן

שלום חברים.
אני רוצה ליצור אתר רספונסיבי (אני מתכוון לעבודה עם media-queries)
אם רוחב המסך הוא למשל 10366 תצוגת הדף תכיל גלריה וכו'...
ואם רוחב המסך הוא 320 או 480 התצוגה לא תכיל את הגלריה כיוון שהיא הופכת ללא נוחה לצפייה, וגם בגלל שאני מעדיף להציג טקסט ולא תמונות מוקטנות.
אם אני עושה שינויי ב html הוא משפיע על כל הפלטפורומות יחדיו. לכן השאלה היא האם יש דרך להציג מידע שונה בכל פלטפורמה?

שימוש ב-Media Queries

01/02/2013 11:41

דוד כהן

היי אבי,

אין בעיה ליצור מצב באתר שאובייקטים מסויימים לא יוצגו או יעבדו אחרת ברזולוציות מסך שונות, או על מכשירים והתקנים (devices) שונים.

ראשית, אם אתה עושה התאמה סלולרית או למכשיר מסויים, ניתן באמצעות קוד PHP פשוט לזהות על איזה מכשיר האתר שלך עובד. תוכל להעזר במשתנה HTTP_USER_AGENT (חפש בגוגל) שיחזיר לך את הערך של ה-device עליו מורץ האתר.

שנית, אם אתה מחפש את הרזולוציה בקוד JS, תוכל להעזר במשתנים window.innerWidth או document.documentElement.clientWidth (הראשון הוא תקני והשני מותאם לדפדפן אקספלורר בלבד). אלו משתנים של רוחב המסך, אבל יש גם את אחיהם התאומים של הגובה.

דבר אחרון, תוכל לעזר ביכולות Media Query של CSS3. תוכל לקרוא על כך עוד חומר פה מצויין עם דוגמאות בעמוד פה:
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

מקווה שעזרתי :)

תודה ושבת שלום,
דוד

אוקיי תודה

02/02/2013 22:07

אבי

תודה על התשובה, מצאתי כיוון נוסף: ליצור AP דיב וברזולוציות מסוימות לכבות או להדליק את הנראות שלו.
עכשו אני רק צריך למצוא את הקוד המתאים.

אולי יעניין אותך הפוסט הבא: אתר מכירות דינמי עם פייפאל ואשראי

חזור אל פורום בניית אתרי מכירות ופורטלים