שלום לכולם,

לפני כחודש בניתי את האתר הבא : http://hez-laor.co.il.
האתר כולו מבוסס CSS3 ועומד בתקן HTML5 ע''פ ‪W3C Validation‬.

החלטתי לנסות לבנות בפעם הראשונה לאתר זה אתר מותאם סלולר ובאמת הצלחתי ליצור הפנייה לגדלים שונים (בעיקר ל: Iphone, Galaxy 2/3, Ipad).
האתר מוצג באופן מושלם בכל אחד מהמכשירים שבדקתי ומציג את התוכן בדיוק כמו שרציתי.

הבעיה היא שבדפדפן הכרום באייפון האתר מוצג עם גלילה לצדדים.
הפכתי את גוגל והדבר היחידי שמצאתי הוא שצריך להוסיף overflow-x:hidden או overflow:hidden אך הבעיה לא נפתרה.
שוב אני מזכיר שבסאפרי המובנה באייפון הכל מוצג מצויין כך שלא ניראה לי שהבעיה היא בגדלים.

תודה רבה לעוזרים.

אולי זה? http://www.456bereastreet.com/archi...r_overflow_bug/

אני בעיקר מנחש פה, כי על פניו מה שעשית אמור לעבוד.

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

תודה רבה על התגובה המהירה, לצערי עדיין לא..
עכשיו כשאני שם לב יש לי גם אותה בעיה עם כרום ב-Ipad, האתר מוצג טוב בסאפרי אבל בדיוק אותה בעיה בכרום.

כמו שאמרתי, אולי זה סתם אחד מהבאגים הרבים שיש בכרום...

שווה לך לשאול בקבוצות הדיון שלהם...

כי לדעתי אם מוגדר שאין overflow... אז לא אמור להיות overflow. זה די פשוט.

יש לי התנגשויות בגדלים שונים !

זה הקוד CSS שאני משתמש בו על מנת להפריד את סוגי המסכים השונים :

קוד:

@media screen and (min-device-width: 320px) and (max-device-width: 480px) { /* iphone 4 + iphone 4s */

#Iphone {text-align: center; font-size: 15pt; font-weight: bold;}
#Galaxy S2 {display: none;}
#Galaxy S3 {display: none;}
#Ipad {display: none;}

}

@media screen and (min-device-width: 480px) and (max-device-width: 800px) { /* galaxy s2 */

#Iphone {display: none;}
#Galaxy S2 {text-align: center; font-size: 15pt; font-weight: bold;}
#Galaxy S3 {display: none;}
#Ipad {display: none;}

}

@media screen and (min-device-width: 720px) and (max-device-width: 1280px) { /* galaxy s3 */

#Iphone {display: none;}
#Galaxy S2 {display: none;}
#Galaxy S3 {text-align: center; font-size: 15pt; font-weight: bold;}
#Ipad {display: none;}

}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* ipad */

#Iphone {display: none;}
#Galaxy S2 {display: none;}
#Galaxy S3 {display: none;}
#Ipad {text-align: center; font-size: 15pt; font-weight: bold;}

}

מה שקורה זה שלצורך העניין אם נבחן את הגדלים של הגלקסי S2 נראה שרוחב המירבי שלו הוא 800px בעוד שהטווח של הגלקסי S3 הוא בין 720 ל-1280 זאת אומרת שהגלקסי S2 עומד בשני התנאים שהצבתי (גם של ה-S3 וגם של ה-S2) וכך נוצר לי מצב של בלבול בהצגה.

אותו דבר קורה גם בין הגלקסי ל-Ipad.

איך אני יכול להפריד לחלוטין בין גלקסי 2 ל-3 גם אם הם חופפים בגדלים ?

אני לא יודע למה זה קורה באייפון כי אף גודל לא מתנגש איתו אבל כרגע גיליתי שיש לי גם בעיה בגלקסי.

שוב, תודה רבה !!

אבל רגע, לא אמרת שזה קורה רק בדפדפן מסויים?

אז איך זה קשור לגודל? הדפדפן משנה את המימדים של הסמארטפון שלך?

נמאס לכם לזכור סיסמאות? לחצו כאן!

מסתבר שלא בדקתי טוב, זה קורה גם בגלקסי בדפדפן המובנה כשמסובבים את מסך (מצב Landscape) המימדים משתנים ואז מוצג לי האתר שהתאמתי בכלל ל - Ipad.

אני מקווה שהצלחתי להסביר את עצמי.

נו, אז ענית לעצמך על השאלה

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

אגב, כמדומני, ישנם דפדפנים שלא מרנדרים את הדף מחדש אחרי שינוי הרזולוציה של המכשיר (למשל מעבר למצב landscape אחרי שהדף כבר נטען...) - במקרה זה שווה אולי לתפוס איזה event של javascript שיאתר שינוי רזולוציה שכזה, ויכפה רינדור מחדש...

נמאס לכם לזכור סיסמאות? לחצו כאן!

נתחיל מההגדרה שלך,
לדעתי אתה צריך לשנות את ההגדרה של "אתר מותאם" כמו שאתה מתייחס אליה -
אתה לא צריך להתאים אותו לפי סוג המכשיר, אלא לפי גודל המסך.
יש המון מכשירים ואתה הרי לא עובר אחד אחד ומתאים לו אתר.

תחשוב על נניח 2-3 גדלים שיתאימו לרוב המכשירים, לדוגמא קטן לאייפונים ודומיו, בינוני לגלקסי ודומיו וגדול לאייפדים ודומיו. ואז תבחר תנאים שלא יחפפו ויצרו בעיה.

מעבר לזה, יכול להיות שאתה בכלל לא צריך גדלים שונים.
אם האתר שלך בסופו של דבר ניראה זהה לכל המכשירים (לא בדקתי), פשוט תיצור CSS עם אחוזים.
width: 100% ימתח את רוחב האתר לכל גודל המסך, ויפתור לך בעיה של תאימות.



כמה הערות על הקוד,
מהתבוננות בקוד מקור של http://hez-laor.co.il/phone/mobile.html
ובקובץ "small.css" -

ניראה שאתה מגדיר לכל המסכים את כל הCSS מחדש.
שים לב כמה כפילויות יש בהגדרות של body , message , facebook , #div... וכדומה.
אתה יכול ליצור רשימה של כל האלמנטים עם ההגדרות הבסיסיות, ואז לשנות לכל media רק את הפרמטר הנחוץ באלמנטים הספציפיים שמשתנים.



בדוגמא שהבאת עבור שינוי התצוגות לפי ה media,
אתה יכול לנסות ולשנות את סדר ההופעה של התנאים.
תתחיל ותגדיר מהמסך הגדול ביותר לקטן ביותר.
בCSS, כל עוד לא השתמשת ב important, ואתה מגדיר פרמטר עבור אותו אלמנט, האחרון שהוגדר הוא שישפיע.
בצורה כזאת, האתר יותאם לגודל המינימלי שעונה על אחד התנאים שלך.



אם אתה רוצה להתאים בכל זאת לפי מכשירים,
יש קודים בJS / בPHP שיכולים לעזור לך לזהות את סוג המכשיר לפי יותר פרמטרים ולתת לך זיהוי קצת יותר מדוייק אודותיו.

צודק, עד עכשיו חשבתי שהכי נוח פשוט להתאים את האתר לכל מכשיר, מסתבר שזה לא נכון.
תודה !!! עזרת לי מאוד, אני אתקן את הכל ואעדכן.

שוב, תודה רבה.