当前位置: 网站建设 > 网页设计 > 建站经验 >

如何让网页自动适应显示器不同的“分辨率”

时间:2013-03-02 04:00来源:未知 作者:admin 点击:

标签:如何让网页自动适应显示器不同的“分辨率” 显示器(1)分辨率(2)网页(168)网站建设(1202)如何(201)自动(25)不同(24)适应(10)
--> [网站建设之]如何让网页主动适应显示器不同的“分辨率” 如何让网页自动适应显示器不同的分辨率? 解决思路: 在不同分辨率下看到的网页版面格式有很大差异,甚至有可能错位。导致这种差别的起因,重要是由于网页中用了相对定位的层,并且页面内容设置为居中,这样在分辨率改变时就会导致错位。因而咱们可以通过判定用户的分辨率,然后让页面或排版做出相应变更。 办法一:做为不同的辨别率做不同的页, 如何让网站访客变成你的顾客 ,而后做个引诱页,获取到客户端屏幕的分辩率后转向到相应页 详细步骤: 1. 先捕获用户的分辨
如何让网页自动适应显示器不同的“分辨率”》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302340b2013.htm
--> [网站建设之]如何让网页主动适应显示器不同的“分辨率”

如何让网页自动适应显示器不同的“分辨率”?
解决思路:
在不同分辨率下看到的网页版面格式有很大差异,甚至有可能错位。导致这种差别的起因,重要是由于网页中用了相对定位的层,并且页面内容设置为居中,这样在分辨率改变时就会导致错位。因而咱们可以通过判定用户的分辨率,然后让页面或排版做出相应变更。
办法一:做为不同的辨别率做不同的页,如何让网站访客变成你的顾客,而后做个引诱页,获取到客户端屏幕的分辩率后转向到相应页
详细步骤:
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"&amp;amp;&amp;amp;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对象代表给定元素所有可能的内嵌款式确当前设置
Tag:   网页自动适   显示器   分辨率     网页自动适   显示器   分辨率  
(责任编辑:网站建设)
如何让网页自动适应显示器不同的“分辨率”相关文章
上一篇:如何让网站访客变成你的顾客 下一篇:如何让自己的网站更优秀
回到顶部