浏览器 视口的理解

首先，视口坐标是表示物理坐标的，窗口坐标是表示逻辑坐标的，并且，任何时候视口坐标和窗口坐标都是一一对应的（即：左上角坐标和右下角坐标是一一对应的）。比如：设置视口坐标(0,0,50,50)（表示:(左上角X,左上角X,宽度,高度)），设置窗口坐标为(-100,-100,100,100)，那么，窗口坐标(-100,-100)对应视口坐标(0,0)，窗口坐标(0,0)对应视口坐标(50,50)，第二，...

element.clientWidth && element.clientHeight element.clientLeft && element.clientTop element.offsetParent element.offsetHeight && element.offsetWidth element.offsetLeft && element.offsetTop element.scrollHeight && element.scrollWidth getBoundingClientRect()

转载：http://www.cnblogs.com/wmmang-blog/p/4708351.html 本文记录学到的有关视口的内容，不足之处请指正。 1、视口 有时会使用百分比来声明宽度,如： html,body{} div{width:30%;} 假设div是body的子元素，这段css就表示该div占body宽度的30%.body没有显示声明宽度...

获取浏览器视口的方法   function getView(){     var width = window.innerWidth;     var height = window.innerHeight;     if(typeof width != 'number'){         if(document.compatMode == 'CSS

窗口与视口一向是初学者比较难以理解的难点，本人以前也是糊里糊涂的，不过最近有时间去深入研究之后，才彻底弄明白，摆脱了以前很多错误的观念。弄清楚了这些才会更好的使用不同的坐标影射模式，更灵活的为自己的绘图带来便利：现将其关键点归纳如下：1、 视口等同客户区，使用设备坐标。2、 窗口与视口为同一区域，但使用逻辑坐标。3、 窗口与视口使用不同的坐标系，但是两套坐标系的原点始终为同一点。但

浏览器的窗口： 打开浏览器时整个窗口的大小 随着用户的放大缩小而改变 浏览器视口的大小： viewport就是视口的大小 随着用户的放大缩小而改变 页面的大小： 页面的原始宽高 不会随着用户的操作而改变 浏览器的窗口： 可通过window.outerWidth, window.outerHeight来获取 浏览器视口的大小： // 需要判断浏览器使用的模式 if(do...

摘要: 由于浏览器的差异，许多信息的获取都要考虑兼容性，窗口中文档可用尺寸是一个经常需要用到的信息，由于浏览器不同甚至版本不同，获取的方法也不一样，本文介绍的函数能够兼容各种浏览器，获取这一信息。同时，文章中对浏览器处理这一信息的差异也做了详细说明。 归类: Javascript, 关键词: window, 文档, offsetHeight, clientHeight, innerHeig

移动WEB基础知识（上）（基本概念，视口，移动浏览器） 基础知识 屏幕 移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。 屏幕尺寸：通常我们所指的屏幕尺，实际上指的是屏幕对角线的长度（一般用英寸来度量）如下图所示 屏幕分辨率：而分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有19...

             innerWidth       innerHeight outerWidth outerHeight   document.doucument.Element.clientWidth  / clientHeight document.body.clientWidth /clie...

框架： 在网络上我们可以看到很多WEB应用程序都是使用框架（frame）来分隔浏览器窗口的，就想一块块玻璃隔板把窗口分隔成好几个小窗口，并且可以在不同的小窗口中加载显示不同的页面，这样在我们看来好像是一个完整的页面，但实际上它是由几个页面组合而成的。 javascript允许我们操作框架，在一个框架中定义的变量和函数可以在另一个框架中使用。这样做可以实现两个优点。 代码模块化...

笔记

移动端设计视口 PPI(像素密度) PPI(Pixels Per Inch)表示的是每英寸所拥有的像素(Pixels)数目。 PPI值越高，画面的细节就越丰富 PPI与DPI的区别 “素”（P）PI:只存在于计算机显示领域 “点”（D）PI:只出现于打印或印刷领域 PC端页面与移动端页的相互跳转 var a=navigator.userAgent; if( a.indexOf("Android")!=-1 || ...