เพื่อนของฉันเพิ่งติดต่อฉันเพื่อขอความช่วยเหลือเกี่ยวกับไซต์ WordPress ที่เขาสร้างขึ้นโดยใช้ธีม X ลูกค้าของเขาโทรหาเขาในเช้าวันนั้นหลังจากที่เขาสังเกตเห็นว่าเว็บไซต์ของเขาแสดงผลไม่ถูกต้องบน iPhone ของเขา Nick ได้ตรวจสอบด้วยตัวเองและแน่นอนว่าการออกแบบที่ตอบสนองอย่างสวยงามที่เขาออกแบบมานั้นไม่สามารถใช้งานได้อีกต่อไป
เขารู้สึกประหลาดใจมากขึ้นเมื่อเขาปรับขนาดหน้าต่างเบราว์เซอร์บนเดสก์ท็อปไซต์ คือ ตอบสนองได้ แต่บน iPhone ของเขาจะแสดงเฉพาะเวอร์ชันเดสก์ท็อปเท่านั้น ทำไมเว็บไซต์ถึงเป็น ตอบสนองบนคอมพิวเตอร์เดสก์ท็อป และ ไม่ตอบสนองบนอุปกรณ์มือถือ?
ทำไมการออกแบบที่ตอบสนองไม่ทำงาน
การออกแบบที่ตอบสนองจะหยุดทำงานเมื่อโค้ดหนึ่งบรรทัดขาดหายไปจากส่วนหัวของไฟล์ HTML หากโค้ดบรรทัดเดียวขาดหายไป iPhone, Android และอุปกรณ์เคลื่อนที่อื่น ๆ ของคุณจะถือว่าเว็บไซต์ที่คุณกำลังดูอยู่เป็นไซต์เดสก์ท็อปขนาดเต็มและปรับขนาดของ วิวพอร์ต เพื่อครอบคลุมทั้งหน้าจอ
คุณหมายถึงอะไรตามขนาดวิวพอร์ตและวิวพอร์ต
บนอุปกรณ์ทั้งหมดขนาดของวิวพอร์ตหมายถึงขนาดของพื้นที่ของหน้าเว็บที่ผู้ใช้มองเห็นในปัจจุบัน ลองนึกภาพว่าคุณกำลังถือ iPhone 5 ที่มีความกว้าง 320 พิกเซล iPhones จะถือว่าทุกเว็บไซต์ที่คุณเยี่ยมชมเป็นไซต์เดสก์ท็อปที่มีความกว้าง 980px เว้นแต่จะบอกไว้อย่างชัดเจน
ตอนนี้ใช้ iPhone 5 ในจินตนาการของคุณคุณเยี่ยมชมเว็บไซต์ที่ออกแบบมาสำหรับเดสก์ท็อปที่มีความกว้าง 800px ไม่มีเค้าโครงที่ตอบสนองดังนั้น iPhone ของคุณจึงแสดงเวอร์ชันเดสก์ท็อปแบบเต็มความกว้าง
verizon wireless แผนใหม่ 2016
แต่ iPhone 5 มีความกว้างเพียง 320 พิกเซล นั่นไม่ใช่ขนาดของวิวพอร์ตเสมอไปหรือ
ไม่มันไม่ใช่. ด้วยขนาดวิวพอร์ต การปรับขนาดสามารถเกี่ยวข้องได้ . 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-header.php . หากคุณใช้สแต็กอื่นให้เปลี่ยนชื่อสแต็ก (ความสมบูรณ์การต่ออายุ ฯลฯ ) เป็น 'ethos' เพื่อค้นหาไฟล์ส่วนหัวที่ถูกต้อง ใส่หนึ่งบรรทัดและ voila! คุณไปได้ดี
ดังนั้นสิ่งนี้จะแก้ไขการสืบค้นสื่อ CSS ของฉันด้วยหรือไม่?
เมื่อคุณแทรกบรรทัดนั้นในส่วนหัวของไฟล์ HTML ข้อความค้นหา @media ที่ตอบสนองของคุณจะเริ่มทำงานอีกครั้งในทันทีและเว็บไซต์เวอร์ชันมือถือของคุณจะกลับมามีชีวิตชีวาอีกครั้ง ขอบคุณที่อ่านและหวังว่ามันจะช่วยได้!
อย่าลืม Payette Forward
เดวิดพี