首页 > JavaScript > 如何获得适用于所有主流浏览器的?

如何获得适用于所有主流浏览器的?

上一篇 下一篇

如何获得适用于所有主流浏览器的?
windowWidth   windowHeight  pageWidth   pageHeight  screenWidth   screenHeight  pageX  pageY  screenX  screenY

分割线

网友回答:

您可以使用jQuery获取窗口或文档的大小:

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

对于屏幕尺寸,您可以使用对象:screen

window.screen.height;
window.screen.width;

分割线
网友回答:

这包含您需要了解的所有内容:获取视口/窗口大小

但简而言之:

var win = window,
    doc = document,
    docElem = doc.documentElement,
    body = doc.getElementsByTagName('body')[0],
    x = win.innerWidth || docElem.clientWidth || body.clientWidth,
    y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);

小提琴

请停止编辑此答案。现在,不同的人已经对其进行了 22 次编辑,以匹配他们的代码格式偏好。还有人指出,如果您只想针对现代浏览器,则不需要这样做 – 如果是这样,您只需要以下内容:

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;
const height = window.innerHeight|| document.documentElement.clientHeight|| 
document.body.clientHeight;

console.log(width, height);

分割线
网友回答:

这是一个使用纯JavaScript的跨浏览器解决方案(来源):

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

模板简介:该模板名称为【如何获得适用于所有主流浏览器的?】,大小是暂无信息,文档格式为.编程语言,推荐使用Sublime/Dreamweaver/HBuilder打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【JavaScript】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 220次
  • 使用软件 Sublime/Dreamweaver/HBuilder
  • 文件格式 编程语言
  • 文件大小 暂无信息
  • 上传时间 03-30
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信公众平台 html5 企业网站 自适应 微信素材 单页式简历模板 响应式 微信文章 微信图片 微信模板
您可能会喜欢的其他模板