חבר שלי פנה אלי לאחרונה כדי לבקש עזרה עם אתר וורדפרס שהוא בנה באמצעות ערכת הנושא X. הלקוח שלו התקשר אליו באותו בוקר לאחר שהבחין שהאתר שלו אינו מוצג כראוי באייפון שלו. ניק בדק את זה בעצמו, ואכן, העיצוב הרספונסיבי היפה שעיצב לא עבד יותר.
הוא היה עוד יותר מבולבל בגלל העובדה שכאשר שינה את גודל חלון הדפדפן שלו בשולחן העבודה שלו, האתר היה רספונסיבי, אבל באייפון שלו, רק גרסת שולחן העבודה הוצגה. מדוע אתר יהיה רספונסיבי במחשב שולחני ולא מגיב במכשיר נייד?
למה עיצוב רספונסיבי לא עובד
עיצוב רספונסיבי מפסיק לעבוד כאשר חסרה שורת קוד אחת בכותרת של קובץ HTML. אם שורת קוד יחידה זו חסרה, האייפון, האנדרואיד ומכשירים ניידים אחרים שלך יניחו שהאתר שבו אתה צופה הוא אתר שולחני בגודל מלא ויתאימו את הגודל של viewportכדי להקיף את כל המסך.
למה אתה מתכוון ב-Viewport ו-Viewport?
בכל המכשירים, גודל נקודת התצוגה מתייחס לגודל השטח של דף אינטרנט הגלוי כעת למשתמש. תאר לעצמך שאתה מחזיק אייפון 5 ברוחב של 320 פיקסלים. אלא אם נאמר אחרת במפורש, מכשירי אייפון מניחים שכל אתר שאתה מבקר בו הוא אתר שולחני ברוחב של 980px.
עכשיו, באמצעות האייפון 5 הדמיוני שלך, אתה מבקר באתר המיועד למחשב שולחני ברוחב 800 פיקסלים. אין לו פריסה רספונסיבית, כך שה-iPhone שלך מציג את גרסת שולחן העבודה ברוחב מלא.
לא זה לא. עם גודל נקודת התצוגה, ניתן לערב שינוי קנה מידה. האייפון צריך להתרחק כדי לראות את הגרסה ברוחב המלא של דף האינטרנט. זכור כי נקודת מבט מתייחסת לאזור של דף שכרגע גלוי למשתמש. האם משתמש האייפון רואה כרגע רק 320 פיקסלים של הדף, או שהוא רואה את הגרסה ברוחב המלא?
נכון: הם רואים את דף האינטרנט ברוחב המלא על הצג שלהם מכיוון שהאייפון הניח שזו התנהגות ברירת המחדל: הוא מוגדל כך שהמשתמש יוכל להציג דף אינטרנט עד ברוחב של 980 פיקסלים. לכן, יציאת התצוגה של האייפון היא 980px.
כאשר אתה מתקרב או מתרחק, גודל יציאת התצוגה משתנה. אמרנו קודם שלאתר הדמיוני שלנו יש רוחב של 800 פיקסלים, כך שאם היית מגדיל את האייפון שלך כך שקצוות האתר נוגעים בקצוות התצוגה של האייפון שלך, יציאת התצוגה תהיה 800 פיקסלים. לאייפון יכול להיות יציאת תצוגה של 320 פיקסלים באתר שולחני, אבל אם כן, היית רואה רק חלק קטן ממנו.
האתר הרספונסיבי שלי שבור. איך אני מתקן את זה?
התשובה היא שורת HTML בודדת שכאשר היא מוכנסת לכותרת של דף אינטרנט אומרת למכשיר להגדיר את יציאת התצוגה לרוחב שלו (320 פיקסלים במקרה של אייפון 5) ולא בקנה מידה (או להגדיל) את העמוד.
לדיון טכני יותר על כל האפשרויות הקשורות למטא תג זה, עיין במאמר זה באתר tutsplus.com.
איך לתקן את ערכת הנושא של WordPress X כשהוא לא מגיב
חזרה לחבר שלי מלפני: שורת הקוד האחת הזו נעלמה כשהוא עדכן את ערכת הנושא X. בעת תיקון שלך, זכור כי ערכת הנושא X אינה משתמשת רק בקובץ כותרת אחד - היא משתמשת בקבצי כותרת שונים עבור כל ערימה, כך שתצטרך לערוך את שלך.
מכיוון שניק משתמש בערימת ערימת X של Ethos, הוא היה צריך להוסיף שורת קוד שהזכרתי קודם לקובץ הכותרת שהיה ממוקם ב-x /frameworks/views/ethos/wp-header.php. אם אתה משתמש בערימה אחרת, החלף את שם המחסנית שלך (שלמות, חידוש וכו') ב'אתוס' כדי למצוא את קובץ הכותרות הנכון. הכנס את השורה האחת, והרי! אתה מוכן ללכת.
אז זה מתקן גם את שאילתות המדיה של CSS?
כשתכניס את השורה הזו לכותרת של קובץ ה-HTML שלך, שאילתות ה-@media הרספונסיביות שלך יתחילו לפתע לעבוד שוב והגרסה הניידת של האתר שלך תחזור לחיים. תודה שקראתם ואני מקווה שזה יעזור!
זכור ל-Payette Forward, David P.
