mediaคุณลักษณะการสืบค้นCSS3 นำไปสู่ความเป็นไปได้ที่น่าสนใจมากมายในแง่ของการพัฒนาเว็บไซต์ซึ่งปรับขนาดหน้าจอและอุปกรณ์ต่าง ๆ มากมาย
อย่างไรก็ตามในทางปฏิบัติฉันเริ่มเข้าใจแล้วว่าmediaคุณลักษณะการค้นหาCSS3 และการเคลื่อนไหว "Responsive Web Design" ทั้งหมดอาจไม่สอดคล้องกับคำสัญญา
ปัญหาที่ฉันเห็นคือในตอนท้ายของวันนักพัฒนาเว็บสนใจว่าผู้ใช้ของพวกเขาดูเนื้อหาผ่านเดสก์ท็อปแท็บเล็ตหรืออุปกรณ์มือถือ แต่ CSS3 มีวิธีการในการตรวจสอบความละเอียดหน้าจอเท่านั้น ในทางทฤษฎีแล้วการตรวจจับความละเอียดหน้าจอดูเหมือนจะเป็นวิธีที่ดีในการปรับแต่งสำหรับอุปกรณ์ต่าง ๆ แต่ในทางปฏิบัติ ...
สมมติว่าเรามีฟังก์ชั่น Javascript อย่างง่ายที่เพิ่งแสดงความกว้างของหน้าจอ:
function foo()
{
alert(screen.width);
}บน Blackberry Touch ของฉันผลลัพธ์นี้:
768บน Samsung Galaxy ของฉันผลลัพธ์นี้:
800ดังนั้น ... อืม ณ จุดนี้ความละเอียดของสมาร์ทโฟนหลักกำลังใกล้เคียงกับความละเอียดระดับเดสก์ท็อป ความสามารถในการตรวจสอบว่าผู้ใช้กำลังดูเว็บไซต์ของคุณผ่านทางสมาร์ทโฟนแท็บเล็ตหรือเดสก์ท็อปดูเหมือนว่าจะยากขึ้นหากทุกอย่างที่คุณทำคือความละเอียดหน้าจอ
สิ่งนี้ทำให้ฉันได้ถามคำถามเกี่ยวกับภูมิปัญญาทั้งหมดที่อยู่เบื้องหลังการเคลื่อนไหว "Responsive Web Design" ของ CSS3 ทั้งหมดตามการสืบค้นสื่อ ดูเหมือนว่าmediaคุณสมบัติการค้นหาจะเหมาะกว่าสำหรับการปรับขนาดหน้าต่างเบราว์เซอร์บนหน้าจอเดสก์ท็อปแทนที่จะเป็นอุปกรณ์พกพาต่างๆ
อีกเทคนิคที่เป็นไปได้สำหรับการตรวจจับอุปกรณ์มือถือหรือแท็บเล็ตคือการใช้การตรวจจับคุณสมบัติโดยการตรวจสอบว่าontouchstartสนับสนุนเหตุการณ์หรือไม่ แต่สิ่งนี้กำลังเพิ่มขึ้นอย่างไม่น่าเชื่อถือเนื่องจากหน้าจอเดสก์ท็อปจำนวนมากเริ่มสนับสนุนการสัมผัส
คำถาม:ดังนั้น ... ในฐานะนักพัฒนาเว็บถ้าผมไม่สามารถพึ่งพา RWD หรือตรวจสอบคุณสมบัติเป็นuser-agent ดม (ตามที่ฉาวโฉ่ไม่น่าเชื่อถือเช่นเคย) จริงๆเลือกที่ดีที่สุดในการตรวจสอบโทรศัพท์มือถือ?
device-widthไม่ดีเลยใช่ไหม