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