iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
0
Modern Web

從Stack Overflow學前端系列 第 13

從StackOverflow上學CODING(13)用js獲取screen, web page 與 browser window大小

  • 分享至 

  • xImage
  •  

Get the size of the screen, current web page and browser window

How can I get windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY which will work in all major browsers?
如何才能獲取windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY的大小,哪一個在所有主流瀏覽器比較能被支援?
https://ithelp.ithome.com.tw/upload/images/20190911/201199215se7GG4eAM.png


If you are using jQuery, you can get the size of the window or document using jQuery methods:
如果你有使用jQuery,你可以用以下方法獲取視窗尺寸:
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document (same as pageWidth in screenshot)
For screen size you can use the screen object in the following way:
如果是要獲取螢幕尺寸,你可以這樣用:
screen.height;
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);
3.
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

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


上一篇
從StackOverflow上學CODING(12)與jQuey 的$(document).ready 相同的語法
下一篇
從StackOverflow上學CODING(14)用JS達成捲動到頁面頂端
系列文
從Stack Overflow學前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言