ເພື່ອນຂອງຂ້ອຍບໍ່ດົນມານີ້ໄດ້ຕິດຕໍ່ຫາຂ້ອຍເພື່ອຂໍຄວາມຊ່ວຍເຫຼືອກ່ຽວກັບ WordPress ທີ່ລາວໄດ້ສ້າງໂດຍໃຊ້ຫົວຂໍ້ X. ລູກຄ້າຂອງລາວໄດ້ໂທຫາລາວໃນເຊົ້າມື້ນັ້ນຫລັງຈາກລາວສັງເກດເຫັນວ່າເວບໄຊທ໌ຂອງລາວບໍ່ໄດ້ຖືກສະແດງຢູ່ໃນ iPhone ຂອງລາວຢ່າງຖືກຕ້ອງ. Nick ໄດ້ກວດເບິ່ງຕົວເອງ, ແລະແນ່ໃຈວ່າການອອກແບບທີ່ສວຍງາມທີ່ລາວອອກແບບບໍ່ໄດ້ເຮັດວຽກອີກຕໍ່ໄປ.
ລາວມີຄວາມລຶກລັບຕື່ມອີກໂດຍຄວາມຈິງທີ່ວ່າໃນເວລາທີ່ລາວປັບຂະ ໜາດ window browser ຂອງລາວຢູ່ ໜ້າ desktop, ເວັບໄຊທ໌້ ແມ່ນ ຕອບສະຫນອງ, ແຕ່ວ່າໃນ iPhone ຂອງລາວ, ພຽງແຕ່ສະບັບ desktop ໄດ້ຖືກສະແດງ. ເປັນຫຍັງເວັບໄຊທ໌້ຈະເປັນ ຕອບສະຫນອງໃນຄອມພິວເຕີ desktop ແລະ ບໍ່ຕອບສະ ໜອງ ໃນອຸປະກອນມືຖືບໍ?
ເປັນຫຍັງການອອກແບບທີ່ຕອບຮັບບໍ່ໄດ້ຜົນ
ການອອກແບບທີ່ມີຄວາມຮັບຜິດຊອບຢຸດເຮັດວຽກເມື່ອລະຫັດເສັ້ນ ໜຶ່ງ ເສັ້ນຫາຍໄປຈາກສ່ວນຫົວຂອງເອກະສານ HTML. ຖ້າລະຫັດສາຍດຽວນີ້ຫາຍໄປ, iPhone, Android ແລະອຸປະກອນມືຖືອື່ນໆຂອງທ່ານຈະສົມມຸດວ່າເວັບໄຊທ໌ທີ່ທ່ານ ກຳ ລັງເບິ່ງແມ່ນເວັບໄຊທ໌ຄອມພິວເຕີ້ທີ່ມີຂະ ໜາດ ເຕັມແລະປັບຂະ ໜາດ ຂອງເວັບໄຊທ໌. ມຸມມອງ ເພື່ອລວມເອົາ ໜ້າ ຈໍທັງ ໝົດ.
ຂະ ໜາດ ຂອງ Viewport ແລະ Viewport ໝາຍ ຄວາມວ່າແນວໃດ?
ໃນອຸປະກອນທັງ ໝົດ, ຂະ ໜາດ ຂອງມຸມມອງ ໝາຍ ເຖິງຂະ ໜາດ ຂອງພື້ນທີ່ຂອງ ໜ້າ ເວັບທີ່ຜູ້ໃຊ້ສາມາດເບິ່ງເຫັນໄດ້ໃນປະຈຸບັນ. ຈິນຕະນາການວ່າທ່ານ ກຳ ລັງຖື iPhone 5 ທີ່ມີຄວາມກວ້າງ 320 pixels. ເວັ້ນເສຍແຕ່ໄດ້ບອກຢ່າງອື່ນຢ່າງຊັດເຈນ, iPhone ຖືວ່າທຸກໆເວັບໄຊທ໌ທີ່ທ່ານເຂົ້າເບິ່ງແມ່ນເວັບໄຊທ໌ desktop ເຊິ່ງມີຄວາມກວ້າງ 980px.
ດຽວນີ້, ໂດຍໃຊ້ໄອໂຟນ 5 ຂອງທ່ານ,ທ່ານເຂົ້າເບິ່ງເວບໄຊທ໌ທີ່ອອກແບບ ສຳ ລັບ desktop ເຊິ່ງກວ້າງ 800px. ມັນບໍ່ມີຮູບແບບທີ່ຕອບສະ ໜອງ ໄດ້, ສະນັ້ນ iPhone ຂອງທ່ານຈະສະແດງຮູບແບບທີ່ມີຄວາມກວ້າງເຕັມ ໜ້າ ຈໍ.
ອາດຈະບໍ່ຮອງຮັບອຸປະກອນເສີມນີ້
ແຕ່ວ່າ iPhone 5 ມີຄວາມກວ້າງພຽງແຕ່ 320 ພິກະເຊນເທົ່ານັ້ນ. ມັນບໍ່ແມ່ນຂະ ໜາດ ຂອງມຸມມອງຂອງ ໜ້າ ຈໍສະ ເໝີ ບໍ?
ບໍ່ມັນບໍ່ແມ່ນ. ດ້ວຍຂະ ໜາດ ຂອງມຸມມອງ, ການຂະຫຍາຍສາມາດມີສ່ວນຮ່ວມ . iPhone ຕ້ອງຂະຫຍາຍອອກໄປເພື່ອເບິ່ງສະບັບເຕັມຂອງ ໜ້າ ເວັບ. ຈື່ໄວ້ວ່າມຸມມອງເບິ່ງ ໝາຍ ເຖິງພື້ນທີ່ຂອງ ໜ້າ ເວັບທີ່ຜູ້ໃຊ້ສາມາດເບິ່ງເຫັນໄດ້ໃນປະຈຸບັນ. ປະຈຸບັນຜູ້ໃຊ້ iPhone ເຫັນ ໜ້າ ພຽງ 320 ພິກເຊວຂອງ ໜ້າ, ຫລືພວກເຂົາ ກຳ ລັງເຫັນຮູບແບບເຕັມຮູບແບບບໍ?
ນັ້ນແມ່ນຖືກຕ້ອງ: ພວກເຂົາ ກຳ ລັງເຫັນ ໜ້າ ເວບໄຊທ໌ທີ່ມີຄວາມກວ້າງເຕັມໃນຈໍສະແດງຜົນຂອງພວກເຂົາເພາະວ່າ iPhone ໄດ້ຖືວ່າມັນແມ່ນພຶດຕິ ກຳ ທີ່ບໍ່ຖືກຕ້ອງ: ມັນຖືກຂະຫຍາຍອອກເພື່ອໃຫ້ຜູ້ໃຊ້ສາມາດເບິ່ງ ໜ້າ ເວັບໄດ້ເຖິງຄວາມກວ້າງ 980 ພິກະເຊນ. ເພາະສະນັ້ນ, ມຸມມອງຂອງ iPhone ແມ່ນ 980px.
ຂະນະທີ່ທ່ານຫຍໍ້ເຂົ້າຫລືອອກ, ຂະ ໜາດ ຂອງມຸມມອງຈະປ່ຽນໄປ. ພວກເຮົາໄດ້ກ່າວກ່ອນ ໜ້າ ນີ້ວ່າເວັບໄຊທ໌ພາບຈິນຕະນາການຂອງພວກເຮົາມີຄວາມກວ້າງ 800px, ສະນັ້ນຖ້າທ່ານ ກຳ ລັງຂະຫຍາຍໂທລະສັບ iPhone ຂອງທ່ານເພື່ອໃຫ້ແຄມຂອງເວັບໄຊທ໌ໄດ້ ສຳ ພັດກັບຂອບຂອງຈໍສະແດງຜົນ iPhone ຂອງທ່ານ, ມຸມມອງຂອງ ໜ້າ ຈໍຈະມີ 800px. The iPhone ສາມາດ ມີມຸມເບິ່ງຂະ ໜາດ 320px ໃນເວບໄຊທ໌ desktop, ແຕ່ຖ້າມັນເຮັດ, ທ່ານພຽງແຕ່ເຫັນສ່ວນນ້ອຍຂອງມັນເທົ່ານັ້ນ.
ວິທີການໂທຫາ iphone ແບບບໍ່ລະບຸຊື່
ເວັບໄຊທ໌ຕອບສະ ໜອງ ຂອງຂ້ອຍຖືກຫັກ. ຂ້ອຍຈະແກ້ໄຂແນວໃດ?
ຄຳ ຕອບແມ່ນເສັ້ນ HTML ດຽວໃນເວລາທີ່ໃສ່ໃນສ່ວນຫົວຂອງ ໜ້າ ເວັບບອກໃຫ້ອຸປະກອນຕັ້ງຄ່າມຸມມອງຂອງ ໜ້າ ຈໍໃຫ້ກວ້າງ (320px ໃນກໍລະນີຂອງ iPhone 5) ແລະບໍ່ຄວນຂະຫຍາຍ (ຫລືຫຍໍ້) ໜ້າ.
ສຳ ລັບການສົນທະນາທາງວິຊາການຫລາຍກວ່າທຸກທາງເລືອກທີ່ກ່ຽວຂ້ອງກັບແທັກ meta ນີ້, ໃຫ້ກວດເບິ່ງ ບົດຂຽນນີ້ໃນ tutsplus.com .
ວິທີການແກ້ໄຂຫົວຂໍ້ WordPress X ເມື່ອມັນບໍ່ຕອບສະ ໜອງ
ກັບໄປຫາເພື່ອນຂອງຂ້ອຍຈາກແຕ່ກ່ອນ: ລະຫັດນີ້ ໜຶ່ງ ເສັ້ນຫາຍໄປເມື່ອລາວອັບເດດຫົວຂໍ້ X. ເມື່ອແກ້ໄຂບັນຫາຂອງທ່ານ, ຈົ່ງຈື່ໄວ້ວ່າຫົວຂໍ້ X ບໍ່ໄດ້ໃຊ້ພຽງແຕ່ເອກະສານ header ດຽວເທົ່ານັ້ນ - ມັນໃຊ້ໄຟລ໌ header ທີ່ແຕກຕ່າງກັນ ສຳ ລັບທຸກໆ stack, ດັ່ງນັ້ນທ່ານຈະຕ້ອງແກ້ໄຂຂອງທ່ານ.
ວິທີການແກ້ໄຂຫນ້າຈໍສີດໍາໃນ ipad mini
ເນື່ອງຈາກວ່າ Nick ໃຊ້ຊຸດ Ethos ຂອງຫົວຂໍ້ X, ລາວຕ້ອງໄດ້ເພີ່ມແຖວລະຫັດທີ່ຂ້າພະເຈົ້າໄດ້ກ່າວມາກ່ອນໃນເອກະສານ header ທີ່ຕັ້ງຢູ່ໃນ x /frameworks/views/ethos/wp-header.php . ຖ້າທ່ານໃຊ້ stack ທີ່ແຕກຕ່າງກັນ, ປ່ຽນຊື່ຂອງ stack ຂອງທ່ານ (ຄວາມຊື່ສັດ, ຕໍ່ ໃໝ່, ແລະອື່ນໆ) ເພື່ອ 'ethos' ເພື່ອຊອກຫາເອກະສານ header ທີ່ຖືກຕ້ອງ. ໃສ່ແຖວນັ້ນ, ແລະ voila! ທ່ານດີທີ່ຈະໄປ.
ດັ່ງນັ້ນນີ້ແກ້ໄຂ ຄຳ ຖາມ CSS Media ຂອງຂ້ອຍ, ເຊັ່ນກັນບໍ?
ເມື່ອທ່ານໃສ່ແຖວນັ້ນຢູ່ໃນສ່ວນຫົວຂອງເອກະສານ HTML ຂອງທ່ານ, ການສອບຖາມ @media ທີ່ຕອບສະ ໜອງ ຂອງທ່ານຈະເລີ່ມເຮັດວຽກຢ່າງກະທັນຫັນແລະສະບັບມືຖືຂອງເວັບໄຊທ໌ຂອງທ່ານກໍ່ຈະກັບມາມີຊີວິດອີກ. ຂອບໃຈ ສຳ ລັບການອ່ານແລະຂ້ອຍຫວັງວ່າມັນຈະຊ່ວຍໄດ້!
ຈື່ໄວ້ວ່າ Payette Forward,
David P.