帖子里要求网页能够让不同分辨率的用户都觉得比较舒服。其实这个效果的关键就是获得用户浏览器的分辨率,再根据不同分辨率给网页各部分设置不同的样式。而JavaScript恰恰支持这个功能。
说是分辨率,其实主要就是一个宽度而已。首先,我们可以使用screen.width来获得用户屏幕的宽度。下面用一段示例代码来说明思路:
- <script type="text/javascript">
- var scWidth = screen.width;
- if(scWidth <= 800){
- //应该是800*600的分辨率
- document.write("小屏幕,特殊照顾");
- }else if(scWidth<=1024){
- //应该是1024*768
- document.write("正常情况");
- }else if(scWidth>=1440){
- //大于1440的应该都是宽屏吧
- document.write("哇塞,宽屏啊!");
- }
- </script>
效果如下:
只要将document.write的代码改为设置不同样式的JavaScript代码就可以了。