ต.ย. กำหนด media ให้กับ viewport 3 ขนาด 1. ถ้า media ขนาดไม่เกิน 320 ให้ตารางมีพื้นสีเขียว (iphone5) 2. ถ้า media ขนาดไม่เกิน 321 - 375 ให้ตารางมีพื้นสีเขียว (iphone6) 3. ถ้า media ขนาดไม่เกิน 768 ให้แสดงเส้นขอบตาราง (ipad) ต.ย.นี้ทำเพื่อทดสอบ Mobile view ของ PageSpeed Insights หากใช้จริงต้องไม่กำหนด 760 ให้ต่ำไปกว่านี้ เพราะใช้จอไม่เต็มที่ หากอยากผ่าน mobile ต้องกำหนด 400 แต่ใช้จริงต้องไปดู Desktop view แทน
ต.ย. สำหรับเข้าตรวจ PageSpeed Insights ส่วน User Experience ได้ 81/100 คะแนน (แก้โดยเปลี่ยน 760 เป็น 400) ส่วน Speed ได้ 100/100 คะแนน โดยมี ข้อความแจ้งปัญหา คือ The page content is 768 CSS pixels wide, but the viewport is only 411 CSS pixels wide.

ย่อหน้าแรก
ข้อมูลในตารางนี้ ไม่ถูกควบคุมโดย class หรือ @media ถ้าขนาดไม่เกิน 768px เพราะกำหนดไว้ว่า max ที่จะควบคุมคือ 768px ตารางอื่นมี class คลุมอยู่ ทำให้เริ่มต้นจะมีขนาดคงที่ชัดเจน แต่ถ้าขนาดจอปัจจุบันไม่น้อยกว่า 768px ก็จะได้รับการควบคุมตามเงื่อนไข ข้อมูลจะขยายจนเต็มจอภาพ ที่เห็นชัด คือ หากไม่มากกว่า 768px ตารางนี้จะมีกรอบสีดำ เมื่อลดขนาดลงไปเรื่อย ๆ ก็จะเห็นการเปลี่ยนสีพื้น ที่ขึ้นกับขนาดของจอภาพ แต่ละขนาด

ย่อหน้าที่สอง
ข้อมูลในตารางนี้ ไม่ถูกควบคุมโดย class หรือ @media ถ้าขนาดไม่เกิน 768px เพราะกำหนดไว้ว่า max ที่จะควบคุมคือ 768px ตารางอื่นมี class คลุมอยู่ ทำให้เริ่มต้นจะมีขนาดคงที่ชัดเจน แต่ถ้าขนาดจอปัจจุบันไม่น้อยกว่า 768px ก็จะได้รับการควบคุมตามเงื่อนไข ข้อมูลจะขยายจนเต็มจอภาพ ที่เห็นชัด คือ หากไม่มากกว่า 768px ตารางนี้จะมีกรอบสีดำ เมื่อลดขนาดลงไปเรื่อย ๆ ก็จะเห็นการเปลี่ยนสีพื้น ที่ขึ้นกับขนาดของจอภาพ แต่ละขนาด