• Responsive และข้อมูลอ้างอิงความกว้างหน้าจอในอุปกรณ์ต่าง ๆ

    วันนี้ได้รับมอบหมายงานเกี่ยวกับ Responsive มา โดยการทำเว็บไซต์ที่ยังไม่รองรับการทำงานแบบนี้ ปรับเปลี่ยนให้สามารถทำงานได้ในลักษณะความหมายที่กำหนดมา ถอนหายใจ 1 ครั้ง เพราะเป็น TYPO3 ไงหล่ะ แล้วเริ่มวางแผนการทำงาน โดยการตั้งโจทย์เป็นข้อ ๆ ดังนี้ 1) ความกว้างของหน้าจอของอุปกรณ์นั้น มีอะไรบ้าง มันกว้างเท่าไหร่ x เท่าไหร่ 2) วิธีการเขียนโค้ดให้สามารถทำงานได้แบบยืดหยุ่น ไม่ต้องแก้ไรมาก เพียง import เข้าไปกำหนดเลยได้ไหม จะได้ไม่กระทบต้องไป map ใหม่ให้เสียเวลา แล้วก็เริ่มเปิดเครื่องมือค้นหา เลยไปเจอเว็บไซต์นี้ ยอดเยี่ยมไปเลย ตรงเผง มันก็คือการตอบโจทย์ข้อ 1) ของเรานั่นเอง ไปดูกันว่ายังไงกันบ้าง การแสดงผลหน้าจอ กxย (px) => อุปกรณ์ 2880 x 1800 => 15-inch Apple MacBook Pro with Retina display 2560 […]

    Read more »
  • วิธีแก้ปัญหาฟังก์ชั่น Zoom ใน Firefox

    หากไม่ได้สังเกตอะไร ก็คงจะผ่านเลยไปและไม่รู้ถึงปัญหาที่เกิดขึ้น สำหรับการใช้ฟังก์ชั่น zoom ใน css เพื่อสร้างสีสัน ให้กับเว็บไซต์ของเรา ปัญหาก็คือ zoom property ไม่สามารถใช้งานได้ใน Firefox ก็เลยต้องหาวิธีแก้ปัญหา ให้สามารถทำงานได้เหมือนกับ browser ตัวอื่น CSS Zoom property จะสามารถทำงานได้ใน IE 5.5+ Opera Safari 4 และ Chrome เท่านั้น ส่วน Firefox ตั้งแต่เวอร์ชั่น 3.5 ขึ้นไปจะใช้ -moz-transform property แทน มาดูตัวอย่างกันเลย div.mytestzoom { zoom: 1.2; /* all browsers */ -moz-transform: scale(1.2); /* Firefox */ }

    Read more »

Back to Top