میرے ایک دوست نے حال ہی میں مجھ سے ایک ورڈپریس سائٹ کے بارے میں مدد مانگنے کے لیے رابطہ کیا جسے اس نے X تھیم کا استعمال کرتے ہوئے بنایا تھا۔ اس کے مؤکل نے اس صبح اسے فون کیا تھا جب اس نے دیکھا کہ اس کی ویب سائٹ اس کے آئی فون پر صحیح طریقے سے ڈسپلے نہیں ہو رہی ہے۔ نک نے اسے خود چیک کیا، اور یقینی طور پر، اس نے جو خوبصورت ریسپانسیو ڈیزائن بنایا تھا وہ اب کام نہیں کر رہا تھا۔
وہ اس حقیقت سے مزید پراسرار تھا کہ جب اس نے اپنے ڈیسک ٹاپ پر اپنی براؤزر ونڈو کا سائز تبدیل کیا تو سائٹ ریسپانسیو تھی، لیکن اس کے آئی فون پر صرف ڈیسک ٹاپ ورژن ہی دکھائی دیتا تھا۔ کوئی سائٹ ڈیسک ٹاپ کمپیوٹر پر ریسپانسیو اور موبائل ڈیوائس پر غیر ریسپانسیو کیوں ہوگی؟
رسپانسیو ڈیزائن کیوں کام نہیں کرتا
ایچ ٹی ایم ایل فائل کے ہیڈر سے کوڈ کی ایک لائن غائب ہونے پر ریسپانسیو ڈیزائن کام کرنا بند کر دیتا ہے۔ اگر کوڈ کی یہ واحد لائن غائب ہے، تو آپ کے آئی فون، اینڈرائیڈ، اور دیگر موبائل آلات یہ مان لیں گے کہ آپ جو ویب سائٹ دیکھ رہے ہیں وہ ایک فل سائز کی ڈیسک ٹاپ سائٹ ہے اور viewport کے سائز کو ایڈجسٹ کریں گے۔پوری اسکرین کو گھیرنے کے لیے۔
ویو پورٹ اور ویو پورٹ سائز سے آپ کا کیا مطلب ہے؟
تمام آلات پر، ویو پورٹ کا سائز کسی ویب پیج کے اس علاقے کے سائز سے مراد ہے جو فی الحال صارف کو نظر آتا ہے۔ تصور کریں کہ آپ کے پاس 320 پکسلز کی چوڑائی والا آئی فون 5 ہے۔ جب تک کہ واضح طور پر دوسری صورت میں نہ بتایا جائے، iPhones فرض کرتے ہیں کہ آپ جو بھی ویب سائٹ دیکھتے ہیں وہ ایک ڈیسک ٹاپ سائٹ ہے جس کی چوڑائی 980px ہے۔
اب، اپنے خیالی آئی فون 5 کا استعمال کرتے ہوئے، آپ ڈیسک ٹاپ کے لیے ڈیزائن کردہ ویب سائٹ پر جاتے ہیں جس کی چوڑائی 800px ہے۔ اس میں ریسپانسیو لے آؤٹ نہیں ہے، اس لیے آپ کا آئی فون مکمل چوڑائی والا ڈیسک ٹاپ ورژن دکھاتا ہے۔
نہیں ایسا نہیں. ویو پورٹ سائز کے ساتھ، اسکیلنگ کو شامل کیا جا سکتا ہے۔ آئی فون کو ویب پیج کا مکمل چوڑائی والا ورژن دیکھنے کے لیے زوم آؤٹ کرنا ہوگا۔ یاد رکھیں کہ ویو پورٹ سے مراد صفحہ کا وہ علاقہ ہوتا ہے جو فی الحال صارف کو نظر آتا ہے۔ کیا آئی فون صارف فی الحال صفحہ کا صرف 320 پکسلز دیکھ رہا ہے، یا وہ مکمل چوڑائی والا ورژن دیکھ رہا ہے؟
یہ ٹھیک ہے: وہ اپنے ڈسپلے پر پوری چوڑائی والا ویب صفحہ دیکھ رہے ہیں کیونکہ آئی فون نے یہ فرض کر لیا ہے کہ یہ ڈیفالٹ رویہ ہے: اسے زوم آؤٹ کر دیا گیا ہے تاکہ صارف 980 پکسلز کی چوڑائی تک ویب صفحہ دیکھ سکے۔ لہذا، آئی فون کا ویو پورٹ 980px ہے۔
جیسے ہی آپ زوم ان یا آؤٹ کرتے ہیں، ویو پورٹ کا سائز بدل جاتا ہے۔ ہم نے پہلے کہا تھا کہ ہماری خیالی ویب سائٹ کی چوڑائی 800px ہے، اس لیے اگر آپ اپنے آئی فون کو اس طرح زوم کریں کہ ویب سائٹ کے کنارے آپ کے آئی فون کے ڈسپلے کے کناروں کو چھو رہے ہوں، تو ویوپورٹ 800px ہوگا۔ آئی فون میں ڈیسک ٹاپ سائٹ پر 320px کا ویو پورٹ ہو سکتا ہے، لیکن اگر ایسا ہوتا تو آپ کو اس کا صرف ایک چھوٹا سا حصہ نظر آتا۔
میری ریسپانسیو ویب سائٹ ٹوٹ گئی ہے۔ میں اسے کیسے ٹھیک کروں؟
جواب ایچ ٹی ایم ایل کی ایک واحد لائن ہے جسے ویب پیج کے ہیڈر میں داخل کرنے پر ڈیوائس کو ویو پورٹ کو اپنی چوڑائی (آئی فون 5 کے معاملے میں 320px) پر سیٹ کرنے اور اسکیل کرنے کے لیے نہیں کہا جاتا ہے۔ (یا زوم) صفحہ۔
اس میٹا ٹیگ سے متعلق تمام اختیارات کے بارے میں مزید تکنیکی بحث کے لیے، tutsplus.com پر یہ مضمون دیکھیں۔
ورڈپریس ایکس تھیم کو کیسے ٹھیک کیا جائے جب یہ جوابدہ نہ ہو
پہلے سے میرے دوست کے پاس واپس: کوڈ کی یہ ایک لائن غائب ہوگئی جب اس نے X تھیم کو اپ ڈیٹ کیا۔ آپ کو ٹھیک کرتے وقت، ذہن میں رکھیں کہ X تھیم صرف ایک ہیڈر فائل کا استعمال نہیں کرتا ہے - یہ ہر اسٹیک کے لیے مختلف ہیڈر فائلز استعمال کرتا ہے، اس لیے آپ کو اپنی ترمیم کرنی ہوگی۔
چونکہ نک X تھیم کا ایتھوس اسٹیک استعمال کرتا ہے، اس لیے اسے ہیڈر فائل میں کوڈ کی لائن شامل کرنی پڑی جس کا میں نے پہلے ذکر کیا تھا جو x/frameworks/views/ethos/wp-header میں موجود تھی۔php اگر آپ مختلف اسٹیک استعمال کرتے ہیں، تو صحیح ہیڈر فائل تلاش کرنے کے لیے اپنے اسٹیک کا نام (انٹیگریٹی، رینیو، وغیرہ) کو 'ایتھوس' کے لیے بدل دیں۔ وہ ایک لائن داخل کریں، اور آواز! آپ کا جانا اچھا ہے۔
تو یہ میرے CSS میڈیا کے سوالات کو بھی ٹھیک کرتا ہے؟
جب آپ اپنی HTML فائل کے ہیڈر میں اس لائن کو داخل کریں گے تو آپ کے جوابی @media سوالات اچانک دوبارہ کام کرنا شروع کر دیں گے اور آپ کی ویب سائٹ کا موبائل ورژن دوبارہ زندہ ہو جائے گا۔ پڑھنے کے لیے شکریہ اور مجھے امید ہے کہ اس سے مدد ملے گی!
پییٹ فارورڈ کو یاد رکھیں، ڈیوڈ پی.
