Chào các bạn, nếu các bạn đang là một lập trình viên thiết kế Website ắt hẳn các bạn đều muốn Website của mình có thể hiển thị tốt trên mọi kích thước màn hình đúng không nào. Hiện nay các chủng loại LCD của máy bàn và laptop có độ phân giải khá cao cao nhất phổ biến là 1440 x 900, nhưng bên cạnh đó cũng còn không ít người dùng vẫn sử dụng những màn hình có độ phân giải truyền thống là 1024x768 điều này khiến Website của chúng ta hiển thị không tốt trên những màn hình ấy.
Trước tiên bạn chuẩn bị 02 file CSS dùng cho 2 trường hợp (màn hình lớn và nhỏ) tôi đặt tên là homepage.css và homepage1024.css.
Ở file chạy chính của Website tôi ví dụ là index.php tôi sẽ thêm đoạn mã kiểm tra và đổi CSS như sau:
HTML:
<script type="text/javascript" src="../modules/jquery-1.7.1.min.js"></script>
<div id="TestWidthScreen" style="width:100%"></div>
<script>
var h = $("#TestWidthScreen").css("width");
alert(h);
h = parseInt(h);
$.get("view.php",{width:h});
</script>
<span><link id='css' href=<?php if($_GET[width]<=1024){echo '../template/css/homepage1024.css';}else{echo '../template/css/homepage.css';}?> rel='stylesheet' type='text/css' /></span>
Trong đoạn code trên tôi sử dung Jquery và PHP:
- Đầu tiên tôi chèn Jquery vào trang Web.
- Tôi tạo một thẻ DIV và set chiều rộng nó 100% để fix full chiều rộng màn hình.
- Tôi dùng Jquery lấy kích thước của thẻ DIV trên và gửi dữ liệu đến chính trang đang chạy dưới dạng $_GET.
- Sau đó ở phần chèn CSS vào trang Web, tôi viết mã PHP để kiểm tra và nếu chiều rộng nhỏ hơn hoặc bằng 1024px thì tôi sẽ chọn file CSS phù hợp với màn hình của người dùng.