ทำไมส่วนหัว HTTP ไม่รวมความละเอียดของอุปกรณ์ความหนาแน่นของพิกเซล ฯลฯ

10

ฉันกำลังพัฒนาเว็บไซต์ที่ตอบสนองได้ด้วยการสืบค้นสื่อ CSS มันจะง่ายขึ้นถ้าเซิร์ฟเวอร์ส่ง HTML / CSS ที่แตกต่างกันสำหรับแต่ละวิวพอร์ต
ฉันสงสัยว่าทำไมลูกค้าถึงไม่สามารถใส่ข้อมูลวิวพอร์ตของตนเมื่อขอไฟล์ HTML พฤติกรรมนี้เป็นเรื่องปกติอยู่แล้วสำหรับการส่งคืนเว็บไซต์ในภาษาที่ถูกต้องโดยใช้Accept-Languageส่วนหัว

http

— eliocs
แหล่งที่มา

คุณสามารถส่งผ่านทาง JavaScript แล้วโหลดไฟล์ CSS ผมคิดว่าปัญหาอยู่ที่ความละเอียดสามารถเปลี่ยน ...

— Knerd

นั่นไม่ใช่ RWD HTML / CSS เหล่านั้นจะไม่ให้ผลการตอบสนองใด ๆ นอกจากคุณจะรีเฟรชหน้าเว็บ

— มาห์ดี

ความละเอียดลักษณะแบบอักษรขนาดแบบอักษรชนิดของเบราว์เซอร์ขนาดหน้าจอทั้งหมดนี้ไม่แน่นอนจากอุปกรณ์หนึ่งไปยังอีกอุปกรณ์หนึ่งคุณกำลังถามคำถามประเภทเว็บ 1.0 ไม่ว่าจะเป็นการย้ายไปยังสิ่งที่มีชีวิตชีวาเช่น ASP, PHP, การเพิ่ม Javascript เป็นต้น พอใจกับตัวเลือกสื่อที่ html ให้คุณ

— Jeff Langemeier

1

จะเป็นอย่างไรหากซอฟต์แวร์ที่ไม่มีภาพแสดงความสามารถจะถามหา html ของคุณแทนเบราว์เซอร์ เช่นโปรแกรมอ่านหน้าจอ? หรือเบราว์เซอร์ที่ใช้เทอร์มินัล

— แจ็ค

18

ในระยะสั้นนั่นไม่ใช่วิธีที่ Wild Wild Web ถูกออกแบบมาให้ทำงาน

การออกแบบดั้งเดิมนั้นง่ายๆคือ HTML นั้นให้คำแนะนำเกี่ยวกับเอกสารกับเบราว์เซอร์ บิตใดที่ต้องเน้นย้ำว่าจะไปที่ไหนเพื่อรับไฟล์ภาพ การตัดสินใจเกี่ยวกับแบบอักษร (รวมถึงขนาดใด) คืองานของเบราว์เซอร์และการตั้งค่าการกำหนดค่าท้องถิ่น

ใช่ฉันรู้ว่าโลกได้ดำเนินต่อไปและตอนนี้นักออกแบบเว็บไซต์คาดหวังที่จะควบคุมทุกพิกเซลที่สายตาของเรามองเห็น ในอดีตที่ผ่านมานั่นเป็นหน้าที่ของชุดรูปแบบเดสก์ทอปที่จะทำ

— Michael Shaw
แหล่งที่มา

3

ฉันจะบอกว่าแม้วันนี้มันควรจะเป็นงานของอุปกรณ์ ตั้งค่าชุด CSS ขั้นต่ำที่ต่างกันสองชุดและให้อุปกรณ์จัดการจากที่นั่น

— Jeff Langemeier

@JeffLangemeier เห็นด้วยทั้งหมด แม้สรรพสิ่งคำตอบนี้ถูกต้องในสาระสำคัญ แต่ก็ไม่ได้พูดถึง RWD เลย

— มาห์ดี.

1

อาจจะถึงเวลาที่จะออกแบบรูปแบบเว็บใหม่ที่สมบูรณ์แยกเนื้อหาจากการออกแบบ :)

— eliocs

@Mahdi ฉันไม่รู้สึกเหมือนคำถามเกี่ยวกับ RWD ในสาระสำคัญต่อไปมันเป็นคนพยายามที่จะบูรณาการล้อและสงสัยว่าทำไมสเป็ค HTML ไม่ได้มี <ความต้องการส่วนบุคคลโดยพลการ>

— Jeff Langemeier

@eliocs นั่นคือมันเรียกว่า html และ CSS HTML เป็นโครงสร้างและ CSS คือการออกแบบ หรือถ้าคุณต้องการแยกเนื้อหาทั้งหมดจากการออกแบบของคุณไปที่ระบบแบบไดนามิกเช่น PHP, Django ในหลาม ฯลฯ ...

— เจฟฟ์ Langemeier

8

ฉันคิดว่าคุณยังไม่ได้โดยสิ้นเชิงมีความคิดของการออกแบบเว็บที่ตอบสนอง ให้บริการ HTML / CSS / JS ที่แตกต่างกันตามเว็บเบราว์เซอร์ของลูกค้ามาพักหนึ่งแล้วและผมค่อนข้างมั่นใจว่ายังมีบางเว็บไซต์ที่ยังทำเช่นนั้น - ตัวอย่างที่ชัดเจนมากคือวิธีการให้บริการมือถือในโรงเรียนเก่า ธีมที่เป็นมิตรสำหรับเว็บไซต์

ในความคิดของฉันสิ่งที่คุณขาดหายไปคือในสถานการณ์ของคุณหากผู้ใช้เปลี่ยนวิวพอร์ตจากแนวตั้งเป็นแนวนอนคุณจะไม่ได้รับคำตอบใด ๆ นอกจากคุณจะรีเฟรชหน้าเว็บ จำเป็นต้องมีการดำเนินการเดียวกันหากคุณปรับขนาดหน้าต่างเว็บเบราว์เซอร์หรือเปลี่ยนการซูมเริ่มต้น องค์ประกอบในหน้าสามารถตอบสนองต่อองค์ประกอบอื่น ๆ เช่นกัน ดังนั้นหากคุณซ่อนแถบด้านข้างทางขวาตัวอย่างเช่นเนื้อหาหลักจะตอบสนองต่อการเปลี่ยนแปลง สิ่งเหล่านี้จะเป็นไปไม่ได้ในทางของคุณอีกครั้งเว้นแต่คุณจะรีเฟรชหน้า

คำขอ HTTP นั้นไม่ได้ออกแบบมาเพื่อเซิร์ฟเวอร์ทั้งหน้า ในหลายกรณีคุณกำลังส่งคำขอเพื่อส่ง / รับข้อมูลธรรมดา, ไฟล์, รูปภาพ, ฯลฯ ซึ่งพวกเขาไม่จำเป็นต้องดำเนินการกับข้อมูลเมตาของพอร์ตการดูและค่าใช้จ่ายในระดับเช่นอินเทอร์เน็ตจะเป็นจำนวนมากฉันเดา .

— มาห์
แหล่งที่มา

ค่าใช้จ่ายจะเป็นประโยชน์ให้บริการภาพเกินไปลองคิดว่าคุณกลับภาพความละเอียดขนาดเล็กสำหรับอุปกรณ์มือถือ ฉันยอมรับว่าวิวพอร์ตมีการเปลี่ยนแปลงเมื่อมีการโหลดหน้าเว็บเป็นข้อบกพร่องที่สำคัญในการพิจารณาของฉัน

— eliocs

@eliocs คุณพูดถูกเพราะภาพนั้นเป็นสิ่งสำคัญ ขอบคุณสำหรับการแก้ไข

— มาห์ดี

ฉันไม่คิดว่านี่เป็นปัญหาโดยตรงที่การออกแบบที่ตอบสนองได้พยายามแก้ไข ในกรณีส่วนใหญ่เป้าหมายของสิ่งนี้คือเพื่อให้แน่ใจว่ามีการจัดหาทรัพยากรจำนวนน้อยที่สุดที่จำเป็นสำหรับการเรนเดอร์แรก คุณยังคงให้การออกแบบที่ตอบสนองต่อสิ่งนี้ การมีข้อมูลในคำขอไม่ได้ห้ามการออกแบบที่ตอบสนองได้ ตัวอย่างเช่นคุณอาจใช้ HTTP2 เพื่อรับภาพที่ถูกต้องสำหรับ srcset ในการตอบกลับครั้งแรก คุณไม่สามารถทำสิ่งนี้ได้หากคุณไม่มีข้อมูลขนาดวิวพอร์ต แต่คุณยังสามารถใช้ srcset เพื่อตอบสนองต่อสิ่งต่างๆได้

— ขาวดำ

2

คุณแน่ใจหรือว่าคุณกำลังออกแบบที่ตอบสนองได้? การออกแบบที่ตอบสนองได้ในทางเทคนิคคือการรวมกันของการออกแบบของเหลวและการสืบค้นสื่อ

การออกแบบของไหลแก้ปัญหา 90% ของวิวพอร์ตสำหรับคุณถ้าคุณฉลาดเกี่ยวกับวิธีการวางสิ่งต่างๆ ข้อความค้นหาสื่อช่วยให้คุณได้รับอีก 10% โดยการเปลี่ยนลักษณะของกริดตามขนาดปัจจุบัน

หากคุณกำลังพยายามที่จะทำเพียงของเหลว (ร้อยละทุกที่เทียบขนาดในทุกสิ่งไม่มีอะไรระบุเป็นพิกเซล ฯลฯ ) คุณพบปัญหาว่าจะทำอย่างไรเมื่อวิวพอร์ตแตกต่างกันขนาด (เช่นมุมมองแนวนอนกับเดสก์ทอป มุมมองแนวตั้งมือถือ) บางสิ่งก็ไม่พอดีเมื่อคุณไปจาก 2048px ถึง 640px เมื่อคุณพยายามที่จะทำเฉพาะแบบสอบถามสื่อคุณจบลงด้วยการแบ่งแบบสอบถามแบบสอบถามสื่อหลายสิบและสิบและคุณโดยทั่วไปชั้นเรียน CSS ของคุณในกรณีนั้น วิธีการทั้งสองไม่เพียงพอสำหรับ RWD - คุณต้องรวมทั้งสองอย่างเข้าด้วยกันเพื่อให้ได้ทุกอย่าง

คำแนะนำของฉัน: สร้าง "ความละเอียดและทิศทางที่แตกต่าง" สาม - สี่อย่างเช่นแนวนอนบนเดสก์ท็อปแนวตั้งและแนวนอนของ iPad แนวตั้งและแนวนอนของ iPhone และถือเป็น wireframes ของคุณในการทำงาน จากนั้นตั้งค่าเคียวรีสื่อบันทึกของคุณสำหรับตัวแบ่งเหล่านั้น จากนั้นทำงานอย่างหนักเพื่อยึดติดกับช่วงหยุดพักเล็ก ๆ น้อย ๆ เหล่านั้นโดยใช้เลย์เอาต์ของไหลเพื่อทำให้สำเร็จ - โดยส่วนใหญ่แล้วจะมีตาราง CSS บางประเภท (มีหลายสิบแบบที่สร้างไว้ล่วงหน้าให้คุณหรือคุณสามารถหมุนเอง)

— Calphool
แหล่งที่มา

1

หากคุณมีเว็บไซต์แบบไดนามิกที่ดึงเนื้อหารหัสเช่นนี้จะทำเคล็ดลับ (ใน ES6):

var headers = new Headers();
    headers.set('window-w', window.innerWidth);  // or $('html').width()  with jQuery
    headers.set('window-h', window.innerHeight); // or $('html').height() with jQuery
fetch(url, {'credentials': 'include', 'headers': headers})
.then(function(response) {
    ...

หมายเหตุ: 'ข้อมูลรับรอง' ใช้สำหรับคุกกี้เซสชัน

จากนั้นคุณสามารถอ่านส่วนหัวเซิร์ฟเวอร์เหล่านั้นด้วยตัวอย่าง (ใน PHP):

$headers = getallheaders();
if (isset($headers['window-w']) and isset($headers['window-h'])) {
    $window_w = 1 * $headers['window-w'];
    $window_h = 1 * $headers['window-h'];
    if ($window_w * $window_h > 0) {
        ...

— Ame Nomade
แหล่งที่มา

นี่เป็นคำตอบเดียวที่ถูกต้องตอนนี้

— marvindanig

1

สิ่งนี้จะไม่ทำงานด้วยเหตุผลง่ายๆที่ผู้ใช้อาจปรับขนาดหน้าต่างเบราว์เซอร์โดยไม่ต้องโหลดหน้าซ้ำ

การออกแบบที่ตอบสนองต่อหมายถึงการเปลี่ยนแปลงเค้าโครงแบบไดนามิกในการตอบสนองต่อขนาดวิวพอร์ตที่แตกต่างกันและปัจจัยอื่น ๆ ดังนั้นหากการออกแบบได้รับการแก้ไขในฝั่งเซิร์ฟเวอร์โดยยึดตามขนาดวิวพอร์ตในเวลาที่ร้องขอมันจะไม่ตอบสนองหากผู้ใช้ปรับขนาดหน้าต่าง นี่คือสาเหตุที่แบบสอบถามสื่อได้รับการประเมินทางฝั่งไคลเอ็นต์

— JacquesB
แหล่งที่มา