เพื่อนของฉันเพิ่งติดต่อฉันเพื่อขอความช่วยเหลือเกี่ยวกับไซต์ WordPress ที่เขาสร้างขึ้นโดยใช้ธีม X ลูกค้าของเขาโทรหาเขาในเช้าวันนั้นหลังจากที่สังเกตเห็นว่าเว็บไซต์ของเขาแสดงผลไม่ถูกต้องบน iPhone นิคตรวจสอบด้วยตัวเอง และแน่นอนว่าการออกแบบที่ตอบสนองอย่างสวยงามที่เขาออกแบบนั้นใช้งานไม่ได้อีกต่อไป
เขารู้สึกประหลาดใจมากขึ้นเมื่อปรับขนาดหน้าต่างเบราว์เซอร์บนเดสก์ท็อป ไซต์มีการตอบสนอง แต่บน iPhone จะแสดงเฉพาะเวอร์ชันเดสก์ท็อปเท่านั้น เหตุใดไซต์จึงตอบสนองบนคอมพิวเตอร์เดสก์ท็อปและไม่ตอบสนองบนอุปกรณ์พกพา
ทำไม Responsive Design ถึงใช้งานไม่ได้
Responsive design หยุดทำงานเมื่อโค้ดหนึ่งบรรทัดหายไปจากส่วนหัวของไฟล์ HTML หากไม่มีโค้ดบรรทัดเดียว iPhone, Android และอุปกรณ์เคลื่อนที่อื่นๆ ของคุณจะถือว่าเว็บไซต์ที่คุณกำลังดูเป็นไซต์เดสก์ท็อปขนาดเต็ม และปรับขนาดของ viewportเพื่อให้ครอบคลุมทั้งหน้าจอ
คุณหมายถึงอะไรโดยวิวพอร์ตและขนาดวิวพอร์ต
ในทุกอุปกรณ์ ขนาดของวิวพอร์ตหมายถึงขนาดพื้นที่ของหน้าเว็บที่ผู้ใช้มองเห็นได้ในปัจจุบัน ลองจินตนาการว่าคุณกำลังถือ iPhone 5 ที่มีความกว้าง 320 พิกเซล iPhones จะถือว่าทุกเว็บไซต์ที่คุณเข้าชมเป็นไซต์เดสก์ท็อปที่มีความกว้าง 980px เว้นแต่จะระบุไว้เป็นอย่างอื่นอย่างชัดเจน
ตอนนี้ เมื่อใช้ iPhone 5 ในจินตนาการ คุณไปที่เว็บไซต์ที่ออกแบบมาสำหรับเดสก์ท็อปที่มีความกว้าง 800px ไม่มีเค้าโครงที่ตอบสนอง ดังนั้น iPhone ของคุณจึงแสดงเวอร์ชันเต็มความกว้างของเดสก์ท็อป
ไม่มันไม่ใช่. ด้วยขนาดวิวพอร์ต การปรับขนาดจึงมีส่วนร่วม iPhone ต้องซูมออกเพื่อดูหน้าเว็บแบบเต็มความกว้าง โปรดจำไว้ว่าวิวพอร์ตหมายถึงพื้นที่ของหน้าเว็บที่ผู้ใช้มองเห็นได้ในขณะนี้ ขณะนี้ผู้ใช้ iPhone เห็นหน้าเว็บเพียง 320 พิกเซล หรือกำลังดูแบบเต็มความกว้าง
ใช่แล้ว: พวกเขาเห็นหน้าเว็บแบบเต็มความกว้างบนจอแสดงผล เพราะ iPhone ถือว่ามันเป็นการทำงานเริ่มต้น: มันถูกย่อเพื่อให้ผู้ใช้สามารถดูหน้าเว็บที่มีความกว้างสูงสุด 980 พิกเซล ดังนั้น วิวพอร์ตของ iPhone คือ 980px
เมื่อคุณซูมเข้าหรือออก ขนาดวิวพอร์ตจะเปลี่ยนไป เราเคยกล่าวไว้ก่อนหน้านี้ว่าเว็บไซต์ในจินตนาการของเรามีความกว้าง 800px ดังนั้นหากคุณซูมเข้าใน iPhone เพื่อให้ขอบของเว็บไซต์สัมผัสกับขอบจอแสดงผลของ iPhone วิวพอร์ตจะมีขนาด 800px iPhone สามารถมีวิวพอร์ตที่ 320px บนไซต์เดสก์ท็อป แต่ถ้ามี คุณจะเห็นเพียงส่วนเล็กๆ เท่านั้น
เว็บไซต์ตอบสนองของฉันเสีย ฉันจะแก้ไขได้อย่างไร
คำตอบคือ HTML บรรทัดเดียวที่เมื่อแทรกในส่วนหัวของหน้าเว็บจะบอกอุปกรณ์ให้ตั้งค่าวิวพอร์ตเป็นความกว้างของตัวเอง (320px ในกรณีของ iPhone 5) และไม่ต้องปรับขนาด (หรือซูม) หน้า
สำหรับการสนทนาทางเทคนิคเพิ่มเติมเกี่ยวกับตัวเลือกทั้งหมดที่เกี่ยวข้องกับเมตาแท็กนี้ โปรดดูบทความนี้บน tutsplus.com
วิธีแก้ไข WordPress X Theme เมื่อไม่ตอบสนอง
ย้อนกลับไปหาเพื่อนของฉันจากเมื่อก่อน: โค้ดหนึ่งบรรทัดนี้หายไปเมื่อเขาอัปเดตธีม X เมื่อแก้ไขธีมของคุณ โปรดทราบว่าธีม X ไม่ได้ใช้ไฟล์ส่วนหัวเพียงไฟล์เดียว แต่จะใช้ไฟล์ส่วนหัวที่แตกต่างกันสำหรับแต่ละสแต็ก ดังนั้นคุณจะต้องแก้ไขไฟล์ของคุณเอง
เนื่องจาก Nick ใช้ชุดรูปแบบ Ethos stack ของ X เขาจึงต้องเพิ่มบรรทัดของโค้ดที่ฉันกล่าวถึงก่อนหน้านี้ไปยังไฟล์ส่วนหัวที่อยู่ใน x /frameworks/views/ethos/wp-headerphp . หากคุณใช้สแต็กอื่น ให้แทนที่ชื่อสแต็กของคุณ (Integrity, Renew ฯลฯ) ด้วย 'ethos' เพื่อค้นหาไฟล์ส่วนหัวที่ถูกต้อง ใส่หนึ่งบรรทัดและ voila! คุณพร้อมลุย
ดังนั้นสิ่งนี้จึงแก้ไขข้อความค้นหาสื่อ CSS ของฉันด้วย
เมื่อคุณแทรกบรรทัดนั้นในส่วนหัวของไฟล์ HTML ข้อความค้นหา @media ที่ตอบสนองของคุณจะเริ่มทำงานอีกครั้งในทันที และเว็บไซต์เวอร์ชันมือถือของคุณจะกลับมามีชีวิตอีกครั้ง ขอบคุณที่อ่านและหวังว่ามันจะช่วยได้!
อย่าลืม Payette Forward, David P.
