html屏幕尺寸（html屏幕大小）

今天给各位分享html屏幕尺寸的知识，其中也会对html屏幕大小进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、HTML 获取屏幕、浏览器、页面的高度宽度
• 2、html页面，A4纸竖向打印，网页页面的宽度应该设置成多少？
• 3、HTML怎样获取屏幕尺寸
• 4、html页面怎样能够自适应电脑屏幕宽度？
• 5、移动端的h5页面的尺寸是多少
• 6、html怎么手机自适应屏幕大小

HTML 获取屏幕、浏览器、页面的高度宽度

本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。

1.介绍：介绍页面的容器(屏幕、浏览器及页面)、物理尺寸与分辨率、展示等内容。

2.屏幕信息：介绍屏幕尺寸信息；如：屏幕、软件可用以及任务栏的高度和宽度。

3.浏览器信息：介绍浏览器尺寸信息；如：浏览器、内部页面以及工具栏的高度和宽度。

4.页面信息：介绍HTML页面尺寸信息；如：body总的、展示的高度和宽度。

一个页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身。

HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内。

通过Js的一些对象可以获取这些容器的高度、宽度。

容器的尺寸是指当前分辨率下的高度、宽度，而不是物理高度、宽度。

如：一个22寸的显示器，屏幕分辨率为1366 * 768，那么获取到的屏幕高度为1366px，宽度为768px。

screen.height ： 屏幕高度。

screen.width ： 屏幕宽度。

screen.availHeight ： 屏幕可用高度。即屏幕高度减去上下任务栏后的高度，可表示为软件最大化时的高度。

screen.availWidth ： 屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度，可表示为软件最大化时的宽度。

任务栏高/宽度 ： 可通过屏幕高/宽度 减去 屏幕可用高/宽度得出。如：任务栏高度 = screen.height - screen.availHeight 。

window.outerHeight ： 浏览器高度。

window.outerWidth ： 浏览器宽度。

window.innerHeight ： 浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。

window.innerWidth ： 浏览器内页面可用宽度；此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边贺仿框后的宽度。

工具栏高/宽度 ： 包含了地址栏、书签栏、浏览唯拍差器边框等范围。如：高度，可通过浏览器高度 - 页面可用高度得出，即：window.outerHeight - window.innerHeight。

body.offsetHeight ： body总高度。

body.offsetWidth ： body总宽度。

body.clientHeight ： body展示的高度；表示body在浏览器内显示的区域高度。

body.clientWidth ： body展示的宽度；表示body在浏览器内显示的区域宽度。

滚动条高度/宽度 ： 如高度，可通过指皮浏览器内页面可用高度 - body展示高度得出，即window.innerHeight - body.clientHeight。

html页面，A4纸竖向打印，网页页面的宽度应该设置成多少？

首先要说明一下：

px 是像素，相对于屏幕的分辨率，是相对值

mm 是即毫米，是绝对值，

因为，不同屏幕有不同的像素密度比，所以两者是不可转换的。

A4纸的尺寸是210*297mm。竖向打印，你需要把html页面的内容设置成210mm的宽度。

下面如何设置CSS：

选中要打印的的DIV，点击州皮搜右侧的CSS属性面板“+”号，新建样式

输入CSS样式名，确定

在CSS样式分类处选择“方框”，在右侧的“width”后填入“210”，后面的单位册历一定要选择“mm”。确定。

我们查看代码视握桥图里的原代码多了“width:210mm”这里再打印，就可以正常显示了。

HTML怎样获取屏幕尺寸

html

script

function a(){

document.write(

"屏幕分辨率为："+screen.width+"*"+screen.height //最好是window.screen

+"br /"袜派+

"屏幕可用大小："+screen.availWidth+"*"+screen.availHeight

+"br /"+

"网页可见区域宽："+document.body.clientWidth

+"br /"+

"网页可见区域高："+document.body.clientHeight

+"br /"+

"网页可见区域宽(包告卜贺括边线的宽)："+document.body.offsetWidth

+"br /"+

"网页可见区域高(包括边弊氏线的宽)："+document.body.offsetHeight

+"br /"+

"网页正文全文宽："+document.body.scrollWidth

+"br /"+

"网页正文全文高："+document.body.scrollHeight

+"br /"+

"网页被卷去的高："+document.body.scrollTop

+"br /"+

"网页被卷去的左："+document.body.scrollLeft

+"br /"+

"网页正文部分上："+window.screenTop

+"br /"+

"网页正文部分左："+window.screenLeft

+"br /"+

"屏幕分辨率的高："+window.screen.height

+"br /"+

"屏幕分辨率的宽："+window.screen.width

+"br /"+

"屏幕可用工作区高度："+window.screen.availHeight

+"br /"+

"屏幕可用工作区宽度："+window.screen.availWidth

);

}

function set_bgColor(){

document.body.style.backgroundColor="red";

}

function set_bgImg(){

document.body.style.backgroundImage="url(t/JS获取屏幕大小 - 风飘零 - 博客园.png)";

}

/script

body onLoad="alert('init')"

input type='button' value="set_bgColor" onclick="set_bgColor();" br

input type='button' value="set_bgImg" onclick="set_bgImg()"

/body

/html

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=760trtd/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文件即可。

移动端的h5页面的尺寸是多少

H5的尺寸一般设计为640x1136px

既满足埋逗了显示需求，又能降低用户加载图片需要的带宽。

可以用各种分辨率的移动智能手机查看我们设计的H5页面时，当然，也会出现如下的激丛情况，内容显示不全，甚至一些重要内容和按钮都会被遮挡。

第一：背景图片必须采用background-size:cover;来实现。

第二：我们在进行H5页面内容规划布局设计的时候，不能把重要内容放在太偏下的位置或者偏上，否则前端布局时可能出现内容显示不全的情况。

扩展资料：

标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁。

为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本明液樱应用技术工作组 -WHATWG） 的组织。

WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

参考资料：百度百科－HTML5

html怎么手机自适应屏幕大小

解决方案1：

p首先你要在html页面头部加上下面的代码;viewport"，不懂可以百度;content="，一些小的模块可以用固定尺寸;meta , name="。再就是css中要应用到媒体查询，不能不用固定尺寸。

/，其次你要把页面中的宽度修改为百分比;width=device-width; ，也就是@media;initial-scale=1"

解决方案2：

建议你看一下网上的教程或者亮笑散案例，自己对比学习敬氏再写。

建议：如果是小白的话，要不然不会自适应屏幕大小的，只升灶要你编写的html代码符合html5规则就行html5不是转化的，建议你看一下html5标签文档

解决方案3：

看你之前是怎么做的，最好都调整成百分比的，这样最省事。

关于html屏幕尺寸和html屏幕大小的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。