[CSS] แก้ปัญหาแสดงผลบน TV หลายขนาด

ปัจจุบัน TV นั้นมีทั้งขนาด 720p , 1080p รวมไปถึง 4K
ทำให้เกิดปัญหาตามมา
เนื่องจาก Design ถูก Fixed ที่ 1080p
จะทำ Responsive นั้น ก็ไม่สามารถทำได้ (แก้ยาว ฮาๆ)

ดังนั้น การแก้ปัญหาที่ง่ายและตอบโจทย์ที่สุดก็คือ CSS Transform
เราต้องคำนวณ Scale จากขนาดของการ Design คือ width=1920px (คือ 1080p)
ดังนั้นจะได้

• TV Cinema 4K (width 4096px) = Scale 2.133 เท่า
• TV UHD 4K (3840px) = Scale 2 เท่า
• TV Full HD 1080p  (1920px) = Scale 1 เท่า
• TV HD 720p (1280px) = Scale 0,666 เท่า

เมื่อได้ขนาด Scale แล้ว

มาถึง CSS เราจะใช้ @media only screen ใน การแยกขนาดจอ
โดยใช้ Script ดังนี้ .....

<style>
body {

     transform-origin: 0 0;

-moz-transform-origin: 0 0;

-webkit-transform-origin: 0 0;

}

@media only screen and (min-width: 4095px) {

   body {

        transform: scale(2.133);

-moz-transform: scale(2.133);

-webkit-transform: scale(2.133);

   }

  }

  @media only screen and (min-width: 3839px) {

   body {

        transform: scale(2);

-moz-transform: scale(2);

-webkit-transform: scale(2);

   }

  }

  

  @media only screen and (max-width: 1280px) {

   body {

        transform: scale(0.666);

-moz-transform: scale(0.666);

-webkit-transform: scale(0.666);

   }

  }

 </style>    

** transform : scale(x) นั้นเปรียบเสมือนการ Zoom
** transform-origin : x y นั้นเปรียบเสมือนจุดหมุน


เพียงเท่านี้เราก็ได้ขนาดตาม TV แต่ละขนาดแล้ว

ทำให้โปรเจคผ่านไปด้วยดี ^^