నా స్నేహితుడు X థీమ్‌ని ఉపయోగించి నిర్మించిన WordPress సైట్‌తో సహాయం కోసం ఇటీవల నన్ను సంప్రదించారు. తన ఐఫోన్‌లో అతని వెబ్‌సైట్ సరిగ్గా కనిపించడం లేదని గమనించిన తర్వాత అతని క్లయింట్ ఆ రోజు ఉదయం అతనికి కాల్ చేశాడు. నిక్ దానిని స్వయంగా తనిఖీ చేసాడు మరియు అతను రూపొందించిన అందమైన ప్రతిస్పందించే డిజైన్ ఇప్పుడు పని చేయడం లేదు.
అతను తన డెస్క్‌టాప్‌లో తన బ్రౌజర్ విండో పరిమాణాన్ని మార్చినప్పుడు, సైట్ ప్రతిస్పందిస్తుంది, కానీ అతని ఐఫోన్‌లో, డెస్క్‌టాప్ వెర్షన్ మాత్రమే ప్రదర్శించబడటం వలన అతను మరింత ఆశ్చర్యపోయాడు. డెస్క్‌టాప్ కంప్యూటర్‌లో సైట్ ఎందుకు ప్రతిస్పందిస్తుంది మరియు మొబైల్ పరికరంలో ఎందుకు స్పందించదు?
ఎందుకు రెస్పాన్సివ్ డిజైన్ పని చేయదు
ఒక HTML ఫైల్ హెడర్ నుండి కోడ్ యొక్క ఒక లైన్ తప్పిపోయినప్పుడు రెస్పాన్సివ్ డిజైన్ పని చేయడం ఆగిపోతుంది. ఈ ఒక్క లైన్ కోడ్ లేకపోతే, మీ iPhone, Android మరియు ఇతర మొబైల్ పరికరాలు మీరు వీక్షిస్తున్న వెబ్‌సైట్ పూర్తి-పరిమాణ డెస్క్‌టాప్ సైట్ అని భావించి, viewport పరిమాణాన్ని సర్దుబాటు చేస్తాయిమొత్తం స్క్రీన్‌ను చుట్టుముట్టడానికి.
వ్యూపోర్ట్ మరియు వ్యూపోర్ట్ సైజ్ ద్వారా మీ ఉద్దేశ్యం ఏమిటి?
అన్ని పరికరాలలో, వీక్షణపోర్ట్ పరిమాణం ప్రస్తుతం వినియోగదారుకు కనిపించే వెబ్‌పేజీ వైశాల్యాన్ని సూచిస్తుంది. మీరు 320 పిక్సెల్‌ల వెడల్పుతో iPhone 5ని కలిగి ఉన్నారని ఊహించుకోండి. స్పష్టంగా చెప్పకపోతే, మీరు సందర్శించే ప్రతి వెబ్‌సైట్ 980px వెడల్పుతో డెస్క్‌టాప్ సైట్ అని iPhoneలు ఊహిస్తాయి.
ఇప్పుడు, మీ ఊహాత్మక iPhone 5ని ఉపయోగించి, మీరు డెస్క్‌టాప్ కోసం 800px వెడల్పుతో రూపొందించబడిన వెబ్‌సైట్‌ను సందర్శించారు. దీనికి ప్రతిస్పందించే లేఅవుట్ లేదు, కాబట్టి మీ iPhone పూర్తి వెడల్పు డెస్క్‌టాప్ వెర్షన్‌ను ప్రదర్శిస్తుంది.
కాదు, అది కానేకాదు. వీక్షణపోర్ట్ పరిమాణంతో, స్కేలింగ్ చేరి ఉంటుంది . వెబ్‌పేజీ యొక్క పూర్తి-వెడల్పు సంస్కరణను చూడటానికి iPhone జూమ్ అవుట్ చేయాలి. వీక్షణపోర్ట్ అనేది ప్రస్తుతం వినియోగదారుకు కనిపించే పేజీ యొక్క ప్రాంతాన్ని సూచిస్తుందని గుర్తుంచుకోండి. iPhone వినియోగదారు ప్రస్తుతం పేజీలోని 320 పిక్సెల్‌లను మాత్రమే చూస్తున్నారా లేదా పూర్తి వెడల్పు వెర్షన్‌ని చూస్తున్నారా?
అది నిజం: ఐఫోన్ డిఫాల్ట్ ప్రవర్తనగా భావించినందున వారు తమ డిస్‌ప్లేలో పూర్తి-వెడల్పు వెబ్‌పేజీని చూస్తున్నారు: ఇది జూమ్ చేయబడింది కాబట్టి వినియోగదారు 980 పిక్సెల్‌ల వెడల్పు వరకు వెబ్‌పేజీని వీక్షించవచ్చు. అందువల్ల, iPhone యొక్క వీక్షణ పోర్ట్ 980px.
మీరు జూమ్ ఇన్ లేదా అవుట్ చేస్తున్నప్పుడు, వీక్షణపోర్ట్ పరిమాణం మారుతుంది. మా ఊహాత్మక వెబ్‌సైట్ 800px వెడల్పును కలిగి ఉందని మేము ముందే చెప్పాము, కనుక మీరు మీ iPhoneని జూమ్ చేస్తే, వెబ్‌సైట్ అంచులు మీ iPhone డిస్‌ప్లే అంచులను తాకినట్లయితే, వీక్షణపోర్ట్ 800pxగా ఉంటుంది. ఐఫోన్ డెస్క్‌టాప్ సైట్‌లో 320px వీక్షణపోర్ట్‌ను కలిగి ఉంటుంది, కానీ అలా చేస్తే, మీరు దానిలో కొంత భాగాన్ని మాత్రమే చూస్తారు.
నా ప్రతిస్పందించే వెబ్‌సైట్ విచ్ఛిన్నమైంది. నేను దాన్ని ఎలా పరిష్కరించగలను?
సమాధానం HTML యొక్క ఒక లైన్, ఇది వెబ్‌పేజీ యొక్క హెడర్‌లో చొప్పించినప్పుడు పరికరాన్ని దాని స్వంత వెడల్పుకు (iPhone 5 విషయంలో 320px) సెట్ చేయమని మరియు స్కేల్ చేయకూడదని చెబుతుంది (లేదా జూమ్) పేజీ.
ఈ మెటా ట్యాగ్‌కు సంబంధించిన అన్ని ఎంపికల గురించి మరింత సాంకేతిక చర్చ కోసం, tutsplus.comలో ఈ కథనాన్ని చూడండి.
WWordPress X థీమ్ ప్రతిస్పందించనప్పుడు దాన్ని ఎలా పరిష్కరించాలి
ఇంతకు ముందు నుండి నా స్నేహితుడికి తిరిగి: అతను X థీమ్‌ను అప్‌డేట్ చేసినప్పుడు ఈ ఒక లైన్ కోడ్ అదృశ్యమైంది. మీది ఫిక్సింగ్ చేస్తున్నప్పుడు, X థీమ్ కేవలం ఒక హెడర్ ఫైల్‌ను ఉపయోగించదని గుర్తుంచుకోండి - ఇది ప్రతి స్టాక్‌కు వేర్వేరు హెడర్ ఫైల్‌లను ఉపయోగిస్తుంది, కాబట్టి మీరు మీ దాన్ని సవరించాల్సి ఉంటుంది.
X థీమ్ యొక్క Ethos స్టాక్‌ను నిక్ ఉపయోగిస్తున్నందున, అతను x /frameworks/views/ethos/wp-headerలో ఉన్న హెడర్ ఫైల్‌కి నేను ఇంతకు ముందు పేర్కొన్న కోడ్ లైన్‌ను జోడించాల్సి వచ్చింది.php మీరు వేరొక స్టాక్‌ని ఉపయోగిస్తుంటే, సరైన హెడర్ ఫైల్‌ను కనుగొనడానికి మీ స్టాక్ పేరును (ఇంటిగ్రిటీ, రెన్యూ, మొదలైనవి) 'ఎథోస్' కోసం ప్రత్యామ్నాయం చేయండి. ఆ ఒక్క పంక్తిని చొప్పించండి మరియు వోయిలా! మీరు వెళ్ళడం మంచిది.
కాబట్టి ఇది నా CSS మీడియా ప్రశ్నలను కూడా పరిష్కరిస్తుంది?
మీరు మీ HTML ఫైల్ యొక్క హెడర్‌లో ఆ లైన్‌ను ఇన్‌సర్ట్ చేసినప్పుడు, మీ ప్రతిస్పందనాత్మక @మీడియా ప్రశ్నలు అకస్మాత్తుగా మళ్లీ పని చేయడం ప్రారంభిస్తాయి మరియు మీ వెబ్‌సైట్ యొక్క మొబైల్ వెర్షన్ మళ్లీ జీవం పోసుకుంటుంది. చదివినందుకు ధన్యవాదాలు మరియు ఇది సహాయపడుతుందని ఆశిస్తున్నాను!
పేయెట్ ఫార్వర్డ్ గుర్తుంచుకోండి, డేవిడ్ P.
