各个平台自适应解决方案 1Word格式.docx
- 文档编号:17472526
- 上传时间:2022-12-01
- 格式:DOCX
- 页数:18
- 大小:24.83KB
各个平台自适应解决方案 1Word格式.docx
《各个平台自适应解决方案 1Word格式.docx》由会员分享,可在线阅读,更多相关《各个平台自适应解决方案 1Word格式.docx(18页珍藏版)》请在冰豆网上搜索。
/b&
+screen.width+&
X&
+screen.height+&
内部窗口&
:
+w+&
+h
/script&
不知道是不是这个屏幕分辨率:
pc上的桌面分辨率。
手机上是一个型号固定的分辨率比如
华为8813的分辨率是480*854。
。
内部窗口是改变窗口大小刷新一下就有新的数据
屏幕的有效宽高:
window.screen.availHeight
window.screen.availWidth
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
HTML精确定位:
scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight:
获取对象的滚动高度。
scrollLeft:
设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:
设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:
获取对象的滚动宽度
offsetHeight:
获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的高度
offsetLeft:
获取对象相对于版面或由offse
tParent属性指定的父坐标的计算左侧位置
offsetTop:
获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置
event.clientX相对文档的水平座标
event.clientY相对文档的垂直座标
event.offsetX相对容器的水平坐标
event.offsetY相对容器的垂直坐标
document.documentElement.scrollTop垂直方向滚动的值
event.clientX+document.documentElement.scrollTop相对文档的水平座标+垂直方向滚动的量
IE,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth=width+padding
clientHeight=height+padding
offsetWidth=width+padding+border
offsetHeight=height+padding+border
IE5.0/5.5:
clientWidth=width-border
clientHeight=height-border
offsetWidth=width
offsetHeight=height
(需要提一下:
CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
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
-------------------
技术要点
本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。
要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:
若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;
在IE下需要深入Document内部对body进行检测;
在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。
Window对象的innerWidth属性包含当前窗口的内部宽度。
Window对象的innerHeight属性包含当前窗口的内部高度。
Document对象的body属性对应HTML文档的标签。
Document对象的documentElement属性则表示HTML文档的根节点。
document.body.clientHeight表示HTML文档所在窗口的当前高度。
document.body.clientWidth表示HTML文档所在窗口的当前宽度。
实现代码
!
DOCTYPEhtmlPUBLIC&
-//W3C//DTDXHTML1.0Transitional//EN&
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&
htmlxmlns=&
//www.w3.org/1999/xhtml&
head&
title&
请调整浏览器窗口&
/title&
metahttp-equiv=&
content-type&
content=&
text/html;
charset=gb2312&
/head&
body&
h2align=&
center&
请调整浏览器窗口
大小&
/h2&
hr&
formaction=&
#&
method=&
get&
name=&
form1&
id=&
--显示浏览器窗口的实际尺寸--&
浏览器窗口的实际高度:
&
inputtype=&
text&
availHeight&
size=&
4&
br&
浏览器窗口的实际宽度:
availWidth&
/form&
scripttype=&
text/javascript&
--
varwinWidth=0;
varwinHeight=0;
functionfindDimensions()//函数:
获取尺寸
{
//获取窗口宽度
if(window.innerWidth)
winWidth=window.innerWidth;
elseif((document.body)&
amp;
(document.body.clientWidth))
winWidth=document.body.clientWidth;
//获取窗口高度
if(window.innerHeight)
winHeight=window.innerHeight;
(document.body.clientHeight))
winHeight=document.body.clientHeight;
//通过深入Document内部对body进行检测,获取窗口大小
if(document.documentElement&
document.documentElement.clientHeight&
document.documentElement.clientWidth)
winHeight=document.documentElement.clientHeight;
winWidth=document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value=winHeight;
document.form1.availWidth.value=winWidth;
findDimensions();
//调用函数,获取数值
window.onresize=findDimensions;
//--&
/body&
/html&
源程序解读
(1)程序首先建立一个表单,包含两个文本框,用于显示窗口当前的宽度和高度,并且,其数值会随窗口大小的改变而变化。
(2)在随后的JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口的高度值和宽度值。
(3)然后,在函数findDimensions()中,使用window.innerHeight和window.innerWidth得到窗口的高度和宽度,并将二者保存在前述两个变量中。
(4)再通过深入Document内部对body进行检测,获取窗口大小,并存储在前述两个变量中。
(5)在函数的最后,通过按名称访问表单元素,结果输出至两个文本框。
(6)在JavaScript代码的最后,通过调用findDimensions()函数,完成整个操作。
JQuery:
$(document).ready(function(){
alert($(window).height());
//浏览器当前窗口可视区域高度
alert($(document).height());
//浏览器当前窗口文档的高度
alert($(document.body).height());
//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));
//浏览器当前窗口文档body的总高度包括borderpaddingmargin
alert($(window).width());
//浏览器当前窗口可视区域宽度
alert($(document).width());
//浏览器当前窗口文档对象宽度
alert($(document.body).width());
//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));
//浏览器当前窗口文档body的总宽度包括borderpaddingmargin
})
网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的
地方。
1、使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。
首先解释该标签的含义:
metaname=&
viewport&
width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&
/&
如果你完全不了解这个标签的使用需要先XX一下。
解释:
content中的“width”这个width指的是什么宽度,我看过的文章对这个都没有解释的很清楚,有几个备选:
虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等?
经试验这个指的是虚拟窗口的宽度。
了解宽度之后,对后续的各种scale,就应该知道是谁与谁的比例,是虚拟窗口宽度/页面宽度,这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为3204807201080等各种尺寸而以上标签只能支持一种尺寸,当然有些浏览器会自动缩放使其适应屏幕,但这不是统一标准,正确的做法是用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标签的一些小体会,分享给大家。
2、第二种自适应屏幕尺寸的方法是将页面做成980宽度,在没有viewport标签的情况下,移动设备屏幕范围会显示页面980的宽度,如果页面大于980,则在屏幕范围内显示页面一部分,如果页面小于980,则页面居中两侧显示空白,那么你猜,如果页面宽度等于980会出现什么情况呢?
3、百分比法,首先应明确一个概年,CSS中的百分比中的百指的是什么,我告诉你指的是父元素,所有百分比都是这样的。
子元素宽度50%,那么父元素的宽度就是百,子元素的padding-left:
50%,父元素的宽度是百,子元素的margin-top:
20%,那么父元素的高是百。
所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的
页面实现很困难。
4、使用css3单位rem,有人这样解释rem,root-em,就是根部的em,想必em大家都懂的,那么rem就是将根节点html的font-size的值作为整个页面的基准尺寸,默认html的font-size是16px,即1rem=16px,如果某div宽度为32px你可以设为2rem。
当我们把html的font-size设为20px时,1rem=20px,那么32px=1.6rem了。
到这里我们也就了解了rem的用法了,那么怎么用rem来实现不同尺寸屏幕的自适应呢?
在页面载入开始时首先判断window的宽度(是window的宽度($(window).width()),不是屏幕分辩率的宽度(screen.width),两者的差别请自行查阅),假设宽度为W,一个div在宽度为640px的设计稿的下的宽度为dW1,这样如果html的font-size为100px,那么这个div的宽度用rem表示是多少呢?
计算:
div宽度dW2=dW1/100,px与rem之间很好换算,除以100就可以,这是假定屏幕宽度为640的,而不同宽度的屏幕怎么处理,为了能保证换算容易那就要为html设置一个合适的font-size,计算:
100/640=fontSize/W,fontSize=W/640*100=W/6.4;
解释一下为什么把100作为一个缩放比例,用10或1不是更方便吗,这是因为大多数浏览器font-size的最小值为12px,所以只能用100了。
5、媒体查询,媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生,媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等,比如我们要为宽度小于480px的页面中的class=&
icon&
的元素设置样式,可以这样写,@mediascreenand(max-width=480px){.icon{somestyles}};
这里仅介绍这种思路,关于媒体查询的详细用法请参阅css手册。
综上,至今,我没有找到一种完全适应各种屏幕的方法,只能根据页面特点选择不同的方法。
1.四种浏览器对document.body的clientHeight、offsetHeight和scrollHeight的解释。
这四种浏览器分别为IE(InternetExplorer)、NS(Netscape)、Opera、FF(FireFox)。
clientHeight
大家对clientHeight都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。
offsetHeight
IE、Opera认为offsetHeight=clientHeight+滚动条+边框。
NS、FF认为offsetHeight是网页内容实际高度,可以小于clientHeight。
scrollHeight
IE、Opera认为scrollHeight是网页内容实际高度,可以小于clientHeight。
NS、FF认为scrollHeight是网页内容高度,不过最小值是clientHeight。
简单地说
clientHeight就是透过浏览器看内容的这个区域高度。
NS、FF认为offsetHeight和scrollHeight都是网页
内容高度,只不过当网页内容高度小于等于clientHeight时,scrollHeight的值是clientHeight,而offsetHeight可以小于clientHeight。
IE、Opera认为offsetHeight是可视区域clientHeight滚动条加边框。
scrollHeight则是网页内容实际高度。
同理
clientWidth、offsetWidth和scrollWidth的解释与上面相同,只是把高度换成宽度即可。
但是
FF在不同的DOCTYPE中对clientHeight的解释不同,xhtml1trasitional中则不是如上解释的。
其它浏览器则不存在此问题。
2.JS取clientHeight与scrollTop
先来段数据,下表的值为document.body.clientHeight/document.documentElement.clientHeight
IEFF
Html608/0630/11096
Xhtml10942/59111076/630
在html/xhtml与ie/ff这4种排列组合下,取得的clientHeight几乎没有一样的,可见写一段兼容3种浏览器两种页面标准的js脚本有多头疼。
暂时总结的判断方法如下:
varh1=document.body.clientHeight;
varh2=document.documentElement.clientHeight;
varisXhtml=(h2&
=h1&
h2!
=0)?
true:
false;
//判断当前页面的Doctype是否为Xhtml
varbody=isXhtml?
document.documentElement:
document.body;
alert(body.clientHeight);
//最终结果比较一致
安全的取到scrollTop:
document.body.scrollTop+
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 各个平台自适应解决方案 各个 平台 自适应 解决方案