每日分享

Posted 2020-10-01 Iamgod`

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每日分享相关的知识，希望对你有一定的参考价值。

我们在设计网页的时候一个比较头痛的问题是究竟我们的浏览者的分辨率是多少？如果使我们的浏览者能够更好的去浏览到我的网页，这个是我们设计前必须思考的问题。所以Leying在设计网页的时候第一个想的是兼容现在大多数浏览者的屏幕分辨率，这里头有几种最常用的方法：

    1、硬行把网页先用表格框起来，框的分辨率应该是在760－780象素，其余的空间可以给一个背景图或者空白.
    2、用自动缩放的方法也可以实现，这种方法比较古老，而且很简单，这个不多说了；

    3、用自动判断的方法。

    今天，就第三种方法来说说，如何来判断出浏览者的屏幕分辨率，根据不同的分辨率给予读者不同的浏览内容：

    网络上也有一些能自动判断出你的浏览器是什么类型或者什么版本的代码，集成过来。

  一、既判断分辨率，也判断浏览器，使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码。

<SCRIPT LANGUAGE="javascript">

</SCRIPT>

为了大家明白，这里简单解析一下：

引用内容

var IE1024="";

var IE800="";

var IE1152="";

var IEother="";

引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。

var Firefox1024="";

var Firefox800="";

var Firefox1152="";

var Firefoxother="";

引号里面分别填写，用户使用FireFox（一个也很流行的浏览器）的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。

var Other1024="";

var Other800="";

var Other1152="";

var Otherother="";

引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。

二、不判断分辨率，只判断浏览器实现根据浏览器类型自动调用不同CSS。

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

    解释：（和前面的差不多）

      如果浏览器为IE，则调用default.css

      如果浏览器为Firefox，则调用default2.css

      如果浏览器为其他，则调用newsky.css

    使用方法：

      很简单，放在 “</head>” 前面即可。

页面在不同屏幕分辨率下存在的问题及解决办法

（未考虑800*600或更低分辨率的情况）

一问题

在不同分辨率下，页面布局存在不同程度的差异，特别是页面上的表单控件，其宽度默认是固定值“width:150px”，当分辨率较高时，表格中的空白显得过多，页面布局显得很不协调，在宽屏显示器上尤为明显。

二解决办法

方法1. 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件。样式文件命名格式如：forms[_屏幕宽度].css，样式文件中只需重新定义文本框和下拉框的宽度即可。

在包含的头文件headr.inc中加入js代码：

if(screen.width > 1024){

document.write(\'<link rel="stylesheet" type="text/css" href="${path}/nrmus/etc/css/forms_\'+ screen.width +\'.css">\');

}

forms_1280.css文件内容：

/* 分辨率宽度为1280的时候，文本框和下拉框的宽度属性(width)单独定义

* 参考计算方法为：（分辨率宽度-174）/4 * 0.7

* 左侧菜单栏宽度为174px；右侧页面表格是4列；控件宽度为单元格的70%

* (1280-174)/4*0.7 = 193

input.text

{

background:#FFFFFF;

border:1px solid #B5B8C8;

padding:3px 3px;

height:22px;

line-height:18px;

vertical-align:middle;

padding-bottom:0pt;

padding-top:2px;

width: 193px;

color: #333;

}

select.select{

width: 193px;

}

优点：实现很简单，代码量少；并且可针对不同分辨率做更细粒度的页面控制。

缺点：无明显缺点。

方法2 将整个页面的宽度设置为固定值，并使其居中显示。

优点：可以很大程度的消除不同分辨率下的显示差异。

缺点：分辨率宽度大于这个固定值的时候，页面两边会出现空白。

方法3 用js判断分辨率，修改body的zoom属性（IE特性），即可实现对整个页面进行缩放，类似IE8或其它浏览器提供的缩放功能。

优点：实现简单，页面能进行缩放。

缺点：缩放是宽度和高度的等比缩放，高分辨率下字体、图片看起来会变小，问题解决的不彻底。