`
iaiai
  • 浏览: 2195452 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于跨平台browser窗口大小的问题

 
阅读更多
最近看到一篇文章,是讲浏览器的。其中有一点是讲窗口大小的,我感觉很好,我这里也分析一下

窗口大小:

跨浏览器确定一个窗口的大小不是一个简单的事。IE9,FF,safari,Opera,Chrome均为此提供了4个属性:innerWidth,innerHeight,outerWidth,outerHeight
在IE9 safari和FF中,outerwidth和outerHeight 返回浏览器窗口本身的尺寸。但在Opera中,这两个属性的值却表示页面的视图容器的大小,也就是viewport的大小,很奇怪的是
innerWidth和innerHeight则表示该容器中页面视图区的大小。在Chrome这两点都返回同样的值,即viewport的大小。

那么确定窗口的大小就是一点很难的事情了。那么怎么办呢?
在IE,ff,Opera,Chrome,safari中,document.documentElement.clientWidth和docuemnt.documentElement.clientHeight中保存了视图页面的视口的消息。但在IE6中,
这些属性必须是标准模式下才有效,如果是混杂模式,就必须通过document.body.clientWidth和document.body.cilentHeight取得相同信息。而对于混杂模式下的Chrome,则无论通过
document.documentElement,还是document.body中的clientWidth和clientHeight属性,都可以取得视窗的大小。


下面提供跨平台的代码

var pageWidth  = window.innerWidth,  
      pageHeight = window.innerHeight;  
if(typeof pagewidth != "number"){  
      if(document.compartMode == "CSS1Compat"){  
             pageWidth = document.documentElement.clientWidth;  
             pageHeight = document.docuemntElement.clientHeight;  
      }else{  
             pageWidth = document.body.clientWidht;  
             pageHeight = document.body.clientHeight;  
      }  
}  
分享到:
评论

相关推荐

    Embedded Browser.rar

    8. **跨平台兼容性**:虽然这里提到的是PC平台,但了解其在其他平台(如移动设备)上的表现和兼容性也很重要。可能需要针对不同平台进行适当的调整。 总的来说,"Embedded Browser"插件为Unity开发者提供了一种强大...

    Embedded Browser 3.1.0.7z

    5. **跨平台兼容**:作为Unity的一部分,Embedded Browser 3.1.0能够在多种平台上运行,包括Windows、Mac、iOS、Android等,这使得开发者能够创建统一用户体验的多平台应用。 在实际使用过程中,开发者需要将...

    unity浏览器插件 Embedded Browser 3.1.0(ZFBrowser)

    由于Unity的跨平台特性,理论上也可以在其他支持Unity的桌面平台上使用。 - 插件明确指出不支持WebGL平台,这是因为WebGL是一个基于JavaScript和WebGL API的Web渲染技术,用于在浏览器中展示3D图形,而嵌入式浏览器...

    2D WebView for WebGL Web Browser IFrame

    通过2D WebView插件,开发者可以将WebGL技术引入Unity,这意味着他们可以利用WebGL的强大力量来创建更复杂、更互动的游戏元素或者UI组件,同时保持Unity引擎的高性能和跨平台特性。 2D WebView for WebGL Web ...

    Embedded Browser 2.1.0

    Unity,作为一款全球范围内广泛应用的游戏开发引擎,以其强大的跨平台能力和丰富的资源库深受开发者喜爱。在Unity的生态系统中,各种插件扮演着不可或缺的角色,它们扩展了Unity的功能,提升了开发效率。其中,...

    In-AppWebBrowser1_7_4_.rar

    1. **全屏与窗口模式**:In-App Web Browser支持全屏显示和窗口化操作,用户可以根据需求选择合适的浏览方式,窗口大小可自定义调整,适应不同应用场景。 2. **网址输入与导航**:用户可以在内置浏览器中直接输入...

    Embedded Browser(ZFBrowser)3.1.0

    2. **配置浏览器**:设置浏览器的初始参数,如窗口大小、位置、是否显示UI元素等。 3. **加载网页**:通过调用相应的API,指定要加载的URL,插件会自动处理加载过程。 4. **交互处理**:监听并处理网页的事件,如...

    很不错的js弹出窗口的类

    JavaScript是一种解释型、跨平台的编程语言,主要应用于客户端的网页开发,用于控制和操作网页元素。它与HTML和CSS一起构成Web开发的三大核心技术。JavaScript能够动态更新页面内容,处理用户事件,甚至可以创建复杂...

    java应用程序登录窗口

    7. **跨平台兼容性**:Java应用程序的一大优势是其跨平台性。使用JDIC加载Web页面的方式可以确保登录窗口在不同操作系统上保持一致的外观和行为。 综上所述,通过Java Swing的JFrame结合JDIC库,我们可以创建一个...

    cj-file-browser:一个跨平台的javascript文件浏览器前端

    修复了一个长期存在的问题,而如果在 tinyMCE 中选择图像时激活浏览器,浏览器窗口将指向索引文件或 webroot 文件。 饼干,饼干饼干。 拖放文件上传应该功能齐全。 添加了一个拖动栏,允许您调整侧边栏/浏览器的...

    electron-browser:电子浏览器,使用chrome标签样式和BrowserView

    在IT领域,Electron是一个非常受欢迎的开源框架,它允许开发者使用Web技术(HTML、CSS、JavaScript)构建跨平台的桌面应用程序。标题提到的"electron-browser"是一个基于Electron的项目,专注于创建一个具备Chrome...

    QT5用代码生成一个窗体,并弹出显示窗体

    QT是一个强大的跨平台应用程序开发框架,它提供了丰富的API和工具来帮助开发者创建美观且功能丰富的应用。在这个过程中,我们将讨论如何通过编写代码来生成一个QT窗体,并让它在程序运行时显示出来。 首先,你需要...

    ZFBrowser.zip

    3. 设置参数与加载网页:在创建Browser对象后,可以设置窗口大小、位置等参数,并加载指定URL的网页。示例代码如下: ```csharp browser.SetSize(800, 600); browser.SetPosition(50, 50); browser.LoadURL(...

    openBrowser:打开浏览器以显示应用程序,就像它是本机一样

    具体实现可能包括如何处理窗口大小和位置、菜单栏定制、快捷键绑定等,这些都是为了让Web应用更接近本机应用的体验。 总之,"openBrowser:打开浏览器以显示应用程序,就像它是本机一样"是一个涉及多方面技术的议题...

    Embeded Browser 2.0.0

    **1.3 跨平台调用能力** - **从Unity调用JavaScript**: 可以通过Unity脚本直接调用网页中的JavaScript函数,这为实现复杂交互提供了便利。 - **从JavaScript调用Unity**: 同样支持反向调用,即JavaScript代码可以...

    fltk 总体架构及类的关系

    FLTK(Fast Light ToolKit)是一个轻量级的、跨平台的GUI库,它为创建图形用户界面提供了高效且简洁的API。FLTK的设计目标是快速、小巧并且易于使用,适用于各种应用程序,从简单的控制台工具到复杂的多媒体应用。...

    用WebBrowse显示PDF和WORD文档

    在IT领域,尤其是在Windows应用程序开发中,有时候我们需要在应用程序内部集成文档查看功能,而无需依赖外部...为了确保跨平台兼容性,可以考虑使用其他第三方库,如PDFium或Apache POI,但这已经超出了本主题的范围。

    基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能

    - **PyQt5**: 是一个强大的GUI工具包,基于Qt框架,适用于Python环境,能够帮助开发者快速构建跨平台的应用程序。 - **QtDesigner**: 是一个可视化的界面设计工具,用于设计PyQt或PySide应用程序的用户界面。 #### ...

    ENVI中文培训教程

    - **跨平台的文件可移植性**:确保ENVI文件可以在不同的操作系统之间共享。 - **ENVI支持的输入文件格式**:列举了ENVI可以读取的各种遥感数据格式。 - **ENVI支持的输出文件格式**:列举了ENVI可以导出的数据...

    ENVI遥感影像处理专题与实践\用户指南与实习指南.pdf

    - **跨平台的文件可移植性**:确保ENVI文件可以在不同操作系统之间传输。 **1.10 ENVI支持的输入/输出文件格式** - 列出了ENVI支持的多种输入和输出文件格式,包括但不限于遥感格式、图像处理格式、通用图像格式、...

Global site tag (gtag.js) - Google Analytics