怎么引用设备屏幕宽度
⑴ js 中怎么获取当前屏幕的宽度
document.documentElement.clientWidth 这个方法返来回页源面在当前窗口中可见部分的宽度(不包括滚动条宽度)；
window.innerWidth 这个方法返回页面在当前窗口中可见部分宽度(包括滚动条宽度);
window.outerWidth 返回浏览器窗口自身宽度，包括菜单和边框；
screen.width 返回设备的(屏幕宽度)
⑵ html页面怎样能够自适应电脑屏幕宽度
在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。
第一种方法：做一个网页解决问题（长了点）
如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使自己精心制作的网页变得"面目全非"，那多令人沮丧！下面我们以网页爱好者的常用工具Dreamweaver（以下简称DW）为例，列出几个网页制作初学者较常见的网页布局问题以及解决方法，希望对初学者们有所帮助。
一、消除任意缩放浏览器窗口对网页的影响
一番辛苦做出来的网页，在全屏状态下浏览一切正常。但在改变浏览窗口大小之后，网页就变得"不堪入目"了，这是个很值得注意的问题。
问题的根源还得从网页的布局说起，在DW中，网页内容的定位一般是通过表格来实现的，解决表格的问题也就成功了大半。
大家应该注意到，在DW中表格属性面板的高宽设定选择上提供了两种不同类型：百分比和像素值。百分比的使用将会产生前面说到的那个毛病。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比，如在一个表格单元的宽度是600，在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，依此类推，如果在一个表格不是嵌于另一个表格单元中，则其百分比是相对于当时窗口的宽度的。IE浏览器中，随便改动主页窗口的大小时，表格的内容也随之错位、变形，就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。
自然，解决这个问题的办法就是将表格宽度设置成固定宽度（也就是像素值）。另外如果外层表格已做好固定宽度设置，内层表格也可以适当使用百分比设置。清楚这个原则以后，如果出现类似的问题大家也知道怎么解决。
二、让网页居中
说到了窗口大小就会顺着路子想到分辨率的问题，在800×600分辨率下制作的网页在1024×768分辨率的机器上打开，整个网页就会跑到左边；1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧？做起来费时，看起来也费劲。怎么办呢？
现在大多数网民都还在用800*600的分辨率，所以我们一般可以以此分辨率为主，要想让网页在1024*768时居中，只要在网页原代码的<body>后紧加一句<center>，</body>前加一句</center>就OK了。不过有几个问题这是要注意一下，第一个就是上面说到的百分比的问题，表格、单元格的宽度单位最好要使用像素单位，而不要用百分比。例如width=770。如果你的表格宽度设的是百分比，那么使用大于800×600的像素时，网页就会拉宽，这样网页可能会变形。在<body>中加入leftmargin=0，即<body leftmargin=0>这种情况下，800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。
<html>
<head></head>
<body topmargin=0 leftmargin=0>
<center>
<table cellspacing cellpadding width=760><tr><td></td></tr></table>
</center>
</body>
</html>
三、定义固定大小的文字
大家都知道,在IE浏览器的功能设置中，有一个可以自由设置窗口内容字体大小的功能，这样由于不同访问者的设置习惯不同，呈现在他们面前的网页有时也会不不相同。比如你可能本来设计时用的是2号字体，结果由于用户对浏览器的额外设定，变的更大了，这时你的网页也可能变得"不堪入目"。虽然不是你的错，但客户是上帝。
如果使用了网页中的CSS样式表技术，就不会出现上述情况了。使用快捷键"Shift+F11"打开样式表"CSS style"编辑器，在窗口中单击鼠标右键执行"New CSS style..."命令新建一个样式表，然后在给出的列表中选择"类型"选项，定义文字属性参数（一般文字的大小选择12px较为适宜）。完成后选择网页编辑窗中的文本，单击新的样式表名称，可以看到选中的文本发生了变化。预览时试试定义的文本字体尺寸还会不会随浏览器的选择字体大小而改变。
四、让网页适应不同的浏览器
浏览器的格局现在是两分天下，一分是IE，另一分是NetScape，在国内Ie有绝对的占有率，在这种情况下我们设计的网页只要兼容它就行了，但NetScape在国外还是有很多人使用，毕竟它是浏览器的元老。
虽然没有办法做出让所有浏览器都兼容的网站，但只要注意以下几点，做出来的网页在各个浏览器都中能达到比较好的显示效果：
不要混合使用层和表格排版，如果是父子关系，如层中表格，不在此原则范围内。
内联式的 CSS 在 Netscape Navigator 中经常会出现问题，使用链式或内嵌式。
有时需要在空层插入表格或者透明图片，以保证在 Netscape Navigator 里的效果。
对于只有几个像素宽度或高度的层，改用图片来实现。
避免使用 W3C 组织不推荐的排版属性，用 CSS 代替。
第二种方法：做两个适合不同分辨率的页面，一个是800×600，一个是1024×768，在800×600的页面中加入一下代码就可以实现跳转了：
解决分辨率问题在Dreamweaver中没有此项功能，我们只能手动加入一段Javascript代码。首先在change－ie.html或change－nc.html页面代码中的< head>和< /head>中加入以下代码：
< script language=JavaScript>
< !－－
function redirectPage(){
var url800x600=〃index－ie.html〃; //定义两个页面，此处假设index－ex.html和1024－ie.html同change－ie.html在同一个目录下
var url1024x768=〃1024－ie.html〃;
if ((screen.width==800) ＆＆ (screen.height==600))//在此处添加screen.width、screen.height的值可以检测更多的分辨率
window.location.href= url800x600;
else if ((screen.width==1024) ＆＆ (screen.height==768))
window.location.href=url1024x768;
else window.location.href=url800x600;
}
// －－>
< /script>
然后再在< body…>内加入onLoad=〃redirectPage()〃
最后，同样地，在< body>和< /body>之间加入以下代码来显示网页的工作信息：
< script language=JavaScript>
< !－－
var w=screen.width
var h=screen.height
document.write(〃系统已检测到您的分辨率为:〃);
document.write(〃< font size=3 color=red>〃);
document.write(w＋〃×〃＋h);
document.write(〃< /font>〃);
document.write(〃正在进入页面转换,请稍候…〃);
// －－>
< /script>
判断读者浏览器类型和屏幕分辨率，自动调用不同CSS
我们在设计网页的时候一个比较头痛的问题是究竟我们的浏览者的分辨率是多少？如果使我们的浏览者能够更好的去浏览到我的网页，这个是我们设计前必须思考的问题。所以Leying在设计网页的时候第一个想的是兼容现在大多数浏览者的屏幕分辨率，这里头有几种最常用的方法：
1、硬行把网页先用表格框起来，框的分辨率应该是在760－780象素，其余的空间可以给一个背景图或者空白.
2、用自动缩放的方法也可以实现，这种方法比较古老，而且很简单，这个不多说了；
3、用自动判断的方法。
今天，就第三种方法来说说，如何来判断出浏览者的屏幕分辨率，根据不同的分辨率给予读者不同的浏览内容：
网络上也有一些能自动判断出你的浏览器是什么类型或者什么版本的代码，集成过来。
一、既判断分辨率，也判断浏览器，使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码。
<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";
ScreenWidth(IE1024,IE800,IE1152,IEother)
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
//如果浏览器为Firefox
var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";
ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
}else{
//如果浏览器为其他
var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
ScreenWidth(Other1024,Other800,Other1152,Otherother)
}
}
function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
if ((screen.width == 1024) && (screen.height == 768)){
setActiveStyleSheet(CSS1);
}else{
if ((screen.width == 800) && (screen.height == 600)){
setActiveStyleSheet(CSS2);
}else{
if ((screen.width == 1152) && (screen.height == 864)){
setActiveStyleSheet(CSS3);
}else{
setActiveStyleSheet(CSS4);
}}}
}
function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+title;
}
//-->
</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">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
//如果浏览器为IE
setActiveStyleSheet("default.css");
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
//如果浏览器为Firefox
setActiveStyleSheet("default2.css");
}else{
//如果浏览器为其他
setActiveStyleSheet("newsky.css");
}
}
function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+title;
}
//-->
</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或其它浏览器提供的缩放功能。
优点：实现简单，页面能进行缩放。
缺点：缩放是宽度和高度的等比缩放，高分辨率下字体、图片看起来会变小，问题解决的不彻底。
三 总结
推荐方法1。页面布局的变化和分辨率的宽度有密切关系，和高度关系不大；常用的分辨率宽度也就几种，做几个简单的css文件即可。
⑶ web网站怎么获取访问的移动设备的屏幕大小
相比较桌面端，用户越来越多的从移动设备端访问网页，这已经不是什么新鲜事。然而开发者还是需要努力去让网站更好的适应现在的移动设备，与此同时，从谷歌最近宣布的消息可以看出，它可能会惩罚那些不能为移动设备用户提供良好用户体验的网站，这也迫使开发者努力做好这方面事宜。本文介绍了一些技巧可以帮助你更好的提供良好的移动用户体验。 以下为译文： 最近，谷歌员工暗示，不能提供友好用户体验的网站将受到来自谷歌搜索通信量的惩罚，谷歌在最近几年已经介绍了多个算法的变化，伤害了许多网站的流量。 不过谷歌的惩罚不应该是你努力使网站友好的主要动机，你的主要动机应该是为你的用户提供他们想要的东西，为他们提供最好的用户体验。所以确保你的网站友好的对象是移动用户，而不是谷歌。 选择一个移动方案，着眼于更好的满足网站用户的需求 这里主要有四个方法可以为用户提供更好的移动用户体验： 1. 创建一个单独的手机网站 如果你想提供一个不同于桌面网站用户体验的移动用户体验，创建一个单独的网站，让移动用户只有一个选择。 这个解决方案可能在某些情况下有意义，但是由于其过程类似于建立一个全新的网站，因此许多Web开发者都避免这种方法。 由于谷歌认为这样的移动用户网站是不同于桌面网站的另一个网站，所以你应该在桌面网站设置一个rel=alternate链接tag，类似于： 而在移动网站页面应包含rel=canonical链接tags，类似于： 2. 动态服务 移动和桌面网站不同URL的存在可能会给用户造成一些混淆。另一方面，仅从屏幕宽度来判断用户设备是否是移动设备并不是一个可靠的方法。 因此你或许可以考虑动态服务，它可以用相同的URL服务于移动和桌面网站，只需根据用户设备提供不同的HTML。 这种方法有点复杂，因为你需要有能力检测用户所使用设备的类型，如User-Agent(浏览器向服务器发送的数据头)。你可以在PHP中实现它(variable $_SERVER['HTTP_USER_AGENT'])，然后你需要查询数据库来确定设备尺寸，以此来计算设备是否是一个小屏幕。 当你通过相同的URL为不同的设备提供不同的HTML时，你还需要发送HTTP Vary响应，让谷歌机器人知道你依赖用户设备的网站，其工作是不同的，你可以使用下面的方法实现： Header('Vary: User-Agent'); ?> 3. 响应Web页面 响应Web页面是指页面在Web页面尺寸中适应性的调整变化。这意味着，如果Web页面改变其尺寸，使用相同HTML代码的页面布局将在某种程度下适应本身。 在实践中，不仅不同尺寸屏幕上出现的页面纬度不同，而且这些页面也需要适应设备方向的变化。比如说，当用户旋转设备的时候，如果开启了重力感应，其页面也会随之改变。因为屏幕的宽度和高度发生了改变。 这种方法被称为响应，因为它使用相同的HMTL动态的适应屏幕的变化，所以它非常的灵活。这种响应通常是使用CSS media查询来实现，这里有个示例： .c640 { display: block; } @media (max-width: 640px) { .c640 { display: none; } } 4. 移动应用 这种方法可以说是一种互补的解决方案，它包含在可以安装在用户设备上的移动应用中，有利用本地设备的能力。而且有些原生功能，用户无法通过访问你的网站来获得，例如向他们的设备发送一些推送通知等。 十个网站响应的技巧 1. 从网站访问次数最多的页面开始 如果你使用的是类似Wordpress这样的常见内容管理系统，你的工作将简单很多，因为你只需要通过一个响应站点更换主题即可。 如果你有一个基于定制开发的网站，比如说是PHP类的情况下，你将需要为适应移动用户做一些定制开发。 如果你有一个拥有上千页面的大网站，还要适应PHP类。你的工作将是巨大的，可能需要数月时间才能完成。因此你需要为这些影响更多用户的页面制定一个标准。 在PHP类网站的情况下，很容易确定影响更多用户的页面是发布于网站上的包，因为它们获得更多的访问量。除此之外，其他被访问最多的网页类型就不是很明确了。 因此你需要考虑站点谷歌分析报告，如果你担心谷歌启动算法更新，处罚非移动友好站点，那么最好看一下网站管理员工具报告，特别是Search Queries和Top Pages。 你可以使用PHP网站管理员工具API类来提取你所需要的页面报告。 2. 使用浏览器开发者工具在小屏幕上预览你的页面 一旦你找到了首要处理的页面，你需要掌控目前可能出现的问题，防止它们呈现在移动设备的屏幕上。 现在的浏览器(如Chrome)会提供工具，可以上你在不同的屏幕尺寸上预览页面。 3. 使视窗适应屏幕尺寸 在这一点中，你首先要做的事是定义一个可以根据屏幕尺寸调整的视窗。(视窗是指一个页面的可见部分)，如果一个页面太大，不适应当前的屏幕分辨率，这时可能需要滚动条。 定义视窗可以通过窗口宽度匹配设备宽度来实现，可以通过HTML标记指定的视窗参数。下面的这个例子里，我们定义窗口宽度匹配设备宽度，初始缩放范围从1开始。这意味着移动浏览器将调整页面宽度缩放比例来适应设备宽度。 4. 从页眉页脚开始 当你通过窗口宽度匹配设备宽度定义视窗后，你可能会注意到针对桌面的页面不适应小型移动设备屏幕，会出现溢出问题。这是你需要构建HTML响应。通常情况下，所有的网站都有带有页面和页脚HTML的页面。你可以从这里开始，因为你改变这些页面和页脚将影响所有的页面。 5. 使用菜单按钮收缩导航栏 PHP类网站下，可以使用两个水平菜单：一个常见的导航，另一个用于记录用户操作。 横向菜单可以利用可用的水平空间的优势，所以基本上所有的响应页面，其导航菜单都会有两个版本：一个是宽屏幕时，整个菜单选项可以水平显示，另一个则是菜单搜索按键加一个搜索栏。 网站使用media查询来显示单一类型的导航(或另一个)，下面代码演示的是HTML和CSS实现该功能的简化版本： Desktop menu here Mobile menu here @media (max-width: 1024px) { .c1025 { display: none; } } @media (min-width: 1025px) { .u1025 { display: none; } } 用PHP类构建的菜单按钮使用了一个很好的技巧来避免对JavaScript的需求。它使用一个隐藏的表单复选框来控制下拉菜单的可见性。 下面是使用HTML和CSS渲染这类菜单的简化版本： All class groups Latest entries Top 10 charts Blog Forums Help FAQ Icon Image here .menu-items { position: absolute; z-index: 1001; background-color: #103754; border-color: #cccccc; border-style: solid; border-width: 1px; padding: 4px; top: 32px; line-height: 36px; } .menu-items a { color: #C3F0FF; font-weight: bold; text-decoration: none; } #navigation-menu { display: inline-block; padding: 6px 10px 0px 10px; } #navigation-menu .menu-items { display: none; } #navigation-button:checked + .menu-items { display: inline-block; } #navigation-menu input[type="checkbox"], #navigation-menu ul span.drop-icon { display: none; } 6. 牺牲不重要页面元素 完成页眉页脚，你还要继续你的步伐，穿梭于网站每个类型页面中，按照页面访问优先级(参照前文)。 使用浏览器开发工具在小屏幕上预览页面，减少视窗分离器宽度，直到页面元素溢出视窗。 这时你需要找出哪些不重要的页面元素，你可以使用CSS样式通过media查询牺牲和隐藏它们。 下面演示的是media查询定义逐渐减少点，用于隐藏不同页面元素： @media (max-width: 1024px) { .c1025 { display: none; } @media (min-width: 1025px) { .u1025 { display: none; } } @media (max-width: 499px) { .c499 { display: none; } } @media (max-width: 799px) { .c799 { display: none; } } @media (max-width: 640px) { .c640 { display: none; } } @media (max-width: 360px) { .c360 { display: none; } } 7. 使用Google Page Speed Insights来解决悬而未决的问题 谷歌验证一个网站是否移动友好的标准有什么?在视窗上显示恰好的可见内容只是其中的一个标准，还有其他一些不太好评估的，比如接触点的距离(如链接和按钮)。 幸运的是，谷歌提供了一个工具来帮助我们发现需要修复的问题，这只是Google Page Speed Insights工具的一部分。 你只需要输入一个你制作的页面URL，它会向你展示一个等级(0%-100%)，让你知道你的页面在手机上的可用性等级，它还会显示该页面目前所存在的问题。 8. 图像适应页面宽度限制 你可能会遇到这样一个问题，需要适应小屏幕的页面存在很多的图片元素。这时你有两种选择，一是如前面提到的，牺牲图片元素;二是自动的调节图片的宽度和高度，该方法适用于有可用的空间。 第二种方法可以通过将图片的宽度设置为100%(或其他百分比)来实现，然后将图片高度设置为自动，以此来保证原始图片的比例。如下段代码所示例的那样： @media (max-width: 55em) { .blog-post-body p img { width: 100%; height: auto; } } 与图像相关的另一个方面是，如果你的菜单和图标使用的是小图像时，当浏览器缩放视窗来匹配设备宽度，那些小图片看起来会很大，如果那些图片分辨率很低的时候，更是会破坏整个页面的质量。而解决这种问题的一个方法是使用高分辨率图片，设置较小值的宽度来匹配设备。 9. 安全“填充”链接和按钮四周 谷歌工具可能会报告的另一个典型问题是，你的链接或按钮太接近对方了，这很容易导致错误操作。你可以利用CSS样式表“填充”这些链接和按钮的空间，下面是一个简单的示例： .safe-padding { padding: 2px; line-height: 200%; } 10.使用谷歌网站管理员工具：移动可用性报告 谷歌在Google Webmaster Tools网站上为我们提供了另一种工具：Mobile Usability(移动可用性)。它可以给你一个进程的概念，以及任何你可能或者你认为没有解决的问题。 这个工具显示不同类型的问题：触摸元素太近、小字体尺寸、宽度固定窗口……。它可以给你提供拥有这些问题的页的总数以及URL。不过工具不会实时报告这些，实际报告大概会延迟一个星期，所以它的报告中或许会存在你已修复的问题。尽管如此，它也是很有用处的，任何页面的问题都会有一个链接，你对此会一目了然。 总结 对Web开发者来说，调整网站以适应移动设备是乏味和无聊的任务，远没有前端工作给人带来的兴奋。然而这是必须的进行的一项任务。 移动适应工作仍在继续，只有部分页面适应了移动设备，所以在未来我们会看到更多的变化。 无论如何，本文是为了分享一些有用的信息给那些正处于网站适应移动设备过程的人们。如果您已经经历过类似的过程，或者您有其他相比较本文所分享的技巧而言更好的方法。您可以留下您的观点，分享您的经验。
⑷ 网页怎么根据用户屏幕大小自动调整网页宽度
方法：
1、在网页头部加上这样一条meta标签：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
解释：
width=device-width ：宽度等于设备屏幕的宽度
initial-scale=1.0：表示：初始的缩放比例
minimum-scale=0.5：表示：最小的缩放比例
maximum-scale=2.0：表示：最大的缩放比例
user-scalable=yes：表示：用户是否可以调整缩放比例
另外：如果想控制字体的大小的话，应该使用相对大小，可以用下面这段代码，一般不用也可，这里只是说明一种方法。
相对大小的字体
字体也不能使用绝对大小px，而只能使用相对大小em。
body {font: normal 100% Helvetica, Arial, sans-serif;}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 {font-size: 1.5em; }
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small {font-size: 0.875em;}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
2、让网页适应不同的浏览器
浏览器的格局现在是两分天下，一分是IE，另一分是NetScape，在国内Ie有绝对的占有率，在这种情况下我们设计的网页只要兼容它就行了，但NetScape在国外还是有很多人使用，毕竟它是浏览器的元老。
虽然没有办法做出让所有浏览器都兼容的网站，但只要注意以下几点，做出来的网页在各个浏览器都中能达到比较好的显示效果：
a、不要混合使用层和表格排版，如果是父子关系，如层中表格，不在此原则范围内。
b、内联式的 CSS 在 Netscape Navigator 中经常会出现问题，使用链式或内嵌式。
c、有时需要在空层插入表格或者透明图片，以保证在 Netscape Navigator 里的效果。
d、对于只有几个像素宽度或高度的层，改用图片来实现。
e、避免使用 W3C 组织不推荐的排版属性，用 CSS 代替。
⑸ 移动端，获取手机屏幕的宽，应该怎么做
网上关于这方面的文章有很多，重复的东西本文不再赘述，仅提供思路，并解释一些其他文章讲述模糊的地方。 1、使用meta标签，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 首先解释该标签的含义： <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 如果你完全不了解这个标签的使用需要先网络一下。 解释：content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚，有几个备选：虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等？经试验这个指的是虚拟窗口的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的比例，是 虚拟窗口宽度 / 页面宽度，这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸，当然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准，正确的做法是用js动态生成此标签，当然，应该先获取屏幕尺寸。 对于此标签还有以下需要分享： 1)、user-scalable=no就一定可以保证页面不可以缩放吗？NO，有些浏览器不吃这一套，还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。 2)、initial-scale=1.0 初始缩放比例受user-scalable控制吗？不一定，有些浏览器会将user-scalable理解为用户手动缩放，如果user-scalable=no，initial-scale将无法生效。 3)、手机页面可以触摸移动，但是如果有需要禁止此操作，就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。 4)、如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。 以上是使用viewport标签的一些小体会，分享给大家。
⑹ js中怎么获取当前屏幕宽度
1、js中获取当前屏幕宽度方法如下：
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth （包括边线的宽）
网页可见区域高： document.body.offsetHeight （包括边线的高）
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
⑺ 网页怎么根据用户屏幕大小自动调整网页宽度
1 js可以用检测屏幕分辨率然后跳转的方法. 检测屏幕宽度为800的时候跳转到800目录或者index1.html 检测屏幕宽度为1024的时候跳转到1024目录或者index2.html 检测屏幕宽度为1280的时候跳转到1280目录或者index3.html 检测屏幕宽度为1440的时候跳转到1440目录或者index4.html 你自己写好相应的几种宽度的网页即可. 在asp网页制作中，根据分辨率自动调整网页宽度，无须用js编制类似以下的脚本： <script LANGUAGE="JavaScript" <!-- Begin function redirectPage(){ var url800*600 = "800*600页面"; var url1024*768 = "1024*768页面"; var url1440*900 = "1440*900页面"; if ((screen.width == 800) && (screen.height == 600)) window.location.href= url800x600; else((screen.width == 1024) && (screen.height == 768)) window.location.href= url1024x768; else((screen.width == 1440) && (screen.height == 900)) window.location.href= url1440x900;}// End -- 定义表格宽度为100%:width:100%