如何让网页自动适应显示器不同的“分辨率”? 如何使JSP页面的宽度根据显示器的分辨率自适应?

作者&投稿:曹呢 (若有异议请与网页底部的电邮联系)

这里以魅族浏览器为例,其中的具体步骤如下:

1、手机打开浏览器之后,在中间位置点击【三】。

2、在中间位置点击【三】之后,点击里面的【设置】。

3、点击里面的【设置】之后,继续点击【主页】。

4、这样一来如果没问题,启动【网页自适应屏幕】即可让网页自动适应显示器不同的“分辨率”了。



1、打开一个网页,在网页的右上方找到一个“查看”选项。

2、点击“查看”选项,下面出现一个下拉菜单,找到“网页缩放”选项。

3、把鼠标移动到“网页缩放”选项上,自动弹出一个列表菜单,里面就是缩放的比例,只要选择默认也就是100%就OK了,网页就能满屏适应电脑界面了。



如何让网页适应不同分辨率
解决思路:
在不同分辨率下看到的网页版面格式有很大差别,甚至有可能错位。导致这种差别的原因,主要是因为网页中用了绝对定位的层,并且页面内容设置为居中,这样在分辨率改变时就会导致错位。因此我们可以通过判断用户的分辨率,然后让页面或排版做出相应变化。
方法一:做为不同的分辨率做不同的页,然后做个引导页,获取到客户端屏幕的分辨率后转向到相应页
具体步骤:
1. 先捕获用户的分辨率。

水平分辨率:screen.width
垂直分辨率:screen.height

2.再用页面跳转的方法转到相应页。

location.replace(screen.width+".htm")

或者:

location.replace(screen.height+".htm")

3.完整代码。

<script language="JavaScript">
<!--
location.replace(screen.width+".htm");
//-->
</script>

技巧:screen.width 也可以改成 screen.availWidth。
提示:
l language="JavaScript" 指定脚本所用语言为 JavaScript,大部分浏览器的默认客户端脚本语言就是 JavaScript,所以也可以省略不写。
l <!-- 和 //--> 两个标识的作用是通知不支持 JavaScript 浏览器忽略两标识间的所有 JavaScript 代码,一般情况下可以省略不写。
l JavaScript 语句与 C 语言一样用分号”;”结束,但也可以省略不写,每一新行表示开始一条新语句。
l screen.width+".htm" 在进行字符串连接后得到诸如 800.htm,1024.htm 之类的文件名。
l 可以在把完整代码存成单独一页作为引导页。
试一试:读者可以试着用assign方法实现页面跳转。
方法二:根据文档显示区域宽度重新调整层的定位。
具体步骤:
1. 获取文档显示区域的宽度。

document.body.offsetWidth

2.判断对象是否为层。

function isLayer(obj){
with(obj.currentStyle)
return (position=="absolute"&&left!="")
}

3.完整代码。

<script language="JavaScript">
<!--
function isLayer(obj){ //判断对象是否为层的函数
/*不用 style 而用 currentStyle 的原因是因为有些层不是直接在标签内写 CSS 的,这时用 style 取不到值*/
with(obj.currentStyle) //返回布尔值true或false
return (position=="absolute"&&left!="")
}
//800为800X600分辨率下窗口最大化时document.body.offsetWidth的值
var iWidth=800
window.onload=function init(){
//匹配页面中所有标签名为DIV元素,以数组形式返回对象
var divs=document.getElementsByTagName("DIV")
for(var i=0;i<divs.length;i++)//遍历所有DIV标签
if(isLayer(divs[i]))//判断对象是否为层,是则调整它的 X 坐标
divs[i].runtimeStyle.posLeft=parseInt(divs[i].currentStyle.left)+(document.body.offsetWidth-iWidth)/2
iWidth=document.body.offsetWidth //保存当前文档显示区域的宽度
}
//-->
</script>
<body onresize="init()">
<div id=demo style="position:absolute;left:50px;top:100px;width:200px;height:200px;border:1px solid #000">Layer1</div>
<div id=demo1 style="position:absolute;left:250px;top:50px;width:200px;height:200px;border:1px solid #000">Layer2</div>

注意:
l 必须确保所有层的标签为 DIV。
l 程序中的 demo 和 demo1 两个层只是测试用的,在实际就用时可以删掉。
技巧:如果所有层都是直接在标签内的定义的,可以把 currentStyle 和runtimeStyle 改成 style。
提示:
l JavaScript 的单行注释是以一对正斜杠”//”开始,多行注释以一个正斜杠加一个星号的组合(/*)开始,并以其逆向顺序 (*/)结束。
l window.onload 表示在页面加载完成后触发。
l onresize="init()" 表示在窗口大小改变时触发名为 init 的函数。
分析:屏幕分辨率先是影响到文档显示区域宽度(document.body.offsetWIdth)大小,然后文档显示区域宽度大小进一步影响到层的X轴定位和页面内容居中部分的相对位置,所以只要根据文档显示区域宽度大小来重新调整层的X轴坐标就行了。
特别提示
Javascript脚本的代码原则上是要求放在代码的 <head> 与 </head> 间,但放到其它标签窗口内也可以正常运行,方法二中代码运行后效果如图 3.1 和 3.2 所示:

图 3.1 窗口最大化时层的

图 3.2 窗口缩小后的层的位置

特别说明

方法一中用到了 location 对象的 replace 和 assign 方法来加载目标文档。
1. location对象的replace方法是将指定的文档替换当前文档。
2. location对象的assign方法是装入新的HTML文档。
方法二中用了 currentStyle、runtimeStyle 和 style 三个对象来捕获目标对象的样式设置。
1. currentStyle对象代表在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。
2. runtimeStyle对象代表居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式。
3. style对象代表给定元素所有可能的内嵌样式的当前设置

如何让网页自适应所有屏幕宽度~

“自适应网页设计”到底是怎么做到的?其实并不难。

1.首先,在网页代码的头部,加入一行viewport元标签。
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0
,即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。

2、不使用绝对宽度由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。具体说,CSS代码
不能指定像素宽度:width:xxx px;
只能指定百分比宽度:
width: xx%;
或者
width:auto;
3、相对大小的字体
字体也不能使用绝对大小(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)。
三、流动布局(fluid grid)
“流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
另外,绝对定位(position: absolute)的使用,也要非常小心。
四、选择加载CSS
“自适应网页设计”的核心,就是CSS3引入的Media Query模块。
它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。
除了用html标签加载CSS文件,还可以在现有CSS文件中加载。
五、CSS的@media规则
同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。
六、图片的自适应(fluid image)
除了布局和文本,”自适应网页设计”还必须实现图片的自动缩放。
这只要一行CSS代码:
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
img, object { max-width: 100%;}
老版本的IE不支持max-width,所以只好写成:
img { width: 100%; }
此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:
img { -ms-interpolation-mode: bicubic; }
或者,Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById(“content”).getElementsByTagName(“img”);
imgSizer.collate(imgs);
});

一、 自然拉伸
如果你的网站结构没有用到大量的图形来衔接,主要由表格来定结构,那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时,只要你把表格的宽度属性定义为100% ,表格就会根据分辨率的不同自行调整宽度。
二、 固定居中
在800×600分辨率下制作的网页在1024×768分辨率的机器上打开,整个网页就会跑到左边;1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧?做起来费劲。所以目前普遍采用的方法是固定居中法!
现在大多数网民都还在用800*600的分辨率,所以我们一般可以以此分辨率为主。只要在网页原代码的后紧加一句,前加一句就OK了。不过有几个问题这是要注意一下,第一个要注意的是上面说到的百分比的问题,表格、单元格的宽度单位最好要使用像素单位,而不要用百分比。例如width=770。如果你的表格宽度设的是百分比,那么使用大于800×600的像素时,网页就会拉宽,这样网页可能会变形。在中加入leftmargin=0,即这种情况下,800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。
三、 兵分两路
如果你的网页不经常更新,而且对页面效果极其在意,那好,你就设计两个页面,分别对应800×600和1024×768两种分辨率。然后根据不同的分辨率进行跳转就行了。

电脑显示器怎么调自适应尺寸
答:在外观与个性化命令的下方,点击一下调整分辨率。然后查看一下自己的电脑分辨率设置情况,显示器,分辨率和方向一般都是默认的,系统也会自动检测推荐一下。点击分辨率的调节杠杆对分辨率的数值进行修改,然后点击确定就可以进行设置的保存了。15英寸:1024×768;17英寸:1280×1024;19英寸:1280×1024;20...

运用js代码改变网页大小自动适应显示器分辨率
答: if (document.all) { window.resizeTo(screen.availWidth,screen.availHeight); }

如何设置网页背景图片自适应屏幕宽度
答:可以先用js获取页面窗口大小,然后再调用不同的背景css样式 就看具体需求了,或者说是对背景的理解上 几年前做过类似的应用,思路跟这差不多。1.将body归零,margin,padding,overflow等 2.设定一个引入背景src (根据实际需要静态或者动态设定尺寸)3.建立一个div作为新的内容容器,以替代body 最后根据...

自动调节,让你的屏幕随光而变!
答:但是,即使关闭自动调节,屏幕还是会偷偷变暗,这是为什么呢?环境光传感器很多显示器和电视都藏有一个环境光传感器,它时刻监测着周围环境的光线,默默为你调整屏幕亮度。即使你关闭了自动调节,环境光传感器还是在默默工作,守护你的视觉舒适。自动调节功能自动调节功能真的很棒,让屏幕适应各种环境,给你最佳的观影...

如何让易语言程序打开时自动将屏幕最大化,能自动适应不同尺寸的显示屏...
答:.版本 2 .程序集 窗口程序集1 .子程序 __启动窗口_创建完毕 _启动窗口.顶边 = 0 _启动窗口.左边 = 0 _启动窗口.高度 = 取屏幕高度 ()_启动窗口.宽度 = 取屏幕宽度 ()

asp自动适应显示器问题
答:但别人看得惯啊,因为他们也在天天看自己的电脑,已经习惯了那个尺寸,不会产生视觉差!当然,如果你非要去适应显示器也不是不可以,只是麻烦一些!取得访客的显示器分辨率,然后根据分辨率的不同而调用不同的css样式 只是,你想想,你得写多少css啊?况且,别人也许看惯了,你冒出个忒大的网站,也许...

自适应网页制作所碰到的问题
答:即使是相当不错的页面,换了屏幕较小的平板电脑或者手机等移动设备浏览时,也难免会让内容布局显得不自然。因此为了客户体验,有必要制作移动端网页或者用自适应布局来设计。自适应页面布局的比较适用各种不同配置的浏览设备,符合当下的情况,可以在电脑、平板、手机等多终端访问,并适应各种屏幕大小。自适应...

怎么调浏览器的分辨率
答:如果你用的是css控制的页面就简单了,判断哪个分辨率就调哪个css.是页面的话就再做一个转向页,判断完后跳转 问题六:jquery怎么获取浏览器屏幕分辨率 原生js即可,screen.width,screen.height 问题七:IE浏览器的分辨率怎么调小 按着键盘的Ctrl键!然后滑动鼠标的滚轮!问题八:怎么让网页自动适应用户...

电脑显示器上的auto键的作用
答:详细来说,当我们连接电脑和显示器,或者更换了不同的显示输入源(比如从电脑切换到游戏机),显示器的显示内容可能会出现大小不合适、位置偏移或者形状失真等问题。这时,我们可以按下显示器上的“Auto”键,让显示器自动进行一系列的调整。这些调整可能包括自动调整图像的水平和垂直位置,自动...