เกริ่นนำ
ในแต่ละเบราว์เซอร์นั้นจะทำการแสดงผล CSS ต่างกัน จีงทำให้ในบางครั้งเราเขียนโค้ดใน Chrome สวยงาม แต่อาจจะแสดงผลในเบราว์เซอร์อื่นๆไม่สวยงามได้ ในบทความนี้จะมาแนะนำวิธีการแก้บักในส่วนนี้กัน
Internet Explorer
@media screen and (min-width:0\0) {
Your Code for Internet Explorer
}
เริ่มต้นตด้วย IE ซึ่งถือว่าเป็นเบราว์เซอร์ในตำนานถึงปัจจุบันได้หยุดพัฒนาไปแล้วแต่ก็ยังมีคนใช้อยู่พอสมควร เพียงใส่โค้ดตามด้านบนในไฟล์ style.css ก็สามารถปรับการแสดงผลได้เลย
Firefox
@-moz-document url-prefix() {
Your Code for Firefox
}
เป็นอีกหนึ่งเบราว์เซอร์ที่มีคนใช้เป็นอันดับต้นๆ ก็ว่าได้ เพียงใส่โค้ดตามด้านบนในไฟล์ style.css ก็สามารถปรับการแสดงผลได้เลย
Chrome
ส่วน Chrome จะต้องใช้ javascript ในการช่วยเช็คด้วยซึ่งจะขอแยกตัวอย่างแยกเป็น Chrome on PC และ Chrome on Mac ตามตัวอย่างด้านล่างนี้
Chrome on PC ใน footer.php
<script type="text/javascript">
jQuery(document).ready(function() {
var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
var is_mac = navigator.userAgent.indexOf('Mac') > 0;
if ((is_chrome)&&(!is_mac)) {jQuery('body').addClass('chrome-on-pc');}
});
</script>
Chrome on PC ใน style.css
body.chrome-on-pc {
Your Code for Chrome on PC
}
Chrome on Mac ใน footer.php
<script type="text/javascript">
jQuery(document).ready(function() {
var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
var is_mac = navigator.userAgent.indexOf('Mac') > 0;
if ((is_chrome)&&(is_mac)) {jQuery('body').addClass('chrome-on-mac');}
});
</script>
Chrome on Mac ใน style.css
body.chrome-on-mac {
Your Code for Chrome on Mac
}
Narongchai Suphiratwanich (K)
นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ SeedWebs & SeedThemes และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย