導航:首頁 > 編程語言 > js橫屏獲取高度

js橫屏獲取高度

發布時間:2023-08-01 18:52:13

js 獲取當前瀏覽器寬高

JQuery獲取:

console.log($(window).width()); //瀏覽器當前窗口可視區域寬度

console.log($(window).height()); //瀏覽器當前窗口可視區域高度

console.log($(document).width());//瀏覽器當前窗口文檔對象寬度

console.log($(document).height()); //瀏覽器當前窗口文檔的高度

console.log($(document.body).width());//瀏覽器當前窗口文檔body的寬度

console.log($(document.body).height());//瀏覽器當前窗口文檔body的高度

console.log($(document.body).outerWidth(true));//瀏覽器當前窗口文檔body的總寬度 包括border padding margin

console.log($(document.body).outerHeight(true));//瀏覽器當前窗口文檔body的總高度 包括border padding margin

JS獲取:

窗口可視區域寬度 : document.documentElement.clientWidth || document.body.clientWidth;

窗口可視區域高度 : document.documentElement.clientHeight || document.body.clientHeight;

窗口可視區域寬度+邊線和滾動條 : document.body.offsetWidth ;

窗口可視區域高度+邊線和滾動條 : document.body.offsetHeight ;

實際內容的寬度 : document.body.scrollWidth;

實際內容的高度 : document.body.scrollHeight;

滾動條下拉被捲起來的距離 :document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

滾動條側拉被捲起來的距離 :document.body.scrollLeft || document.documentElement.scrollLeft ;

網頁正文部分上 :window.screenTop;

網頁正文部分左 :window.screenLeft;

元素的寬度 :obj.offsetWidth;

元素的高度 :obj.offsetHeight;

相對於父元素的上位移 :obj.offsetTop;(在元素的包含元素不含滾動條的情況下)

相對於父元素的左位移 :obj.offsetLeft;(在元素的包含元素不含滾動條的情況下)

② android 開發中 怎麼用js獲取手機屏幕高度

webview.addjavascriptinterface可以調用android代碼
android可以獲得屏幕高度
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int height = dm.heightPixels//這個就是屏幕高度了。

webView.addJavascriptInterface(new WebAppInterface(this), "Android");
這個就創立了一個介面名,叫「Android」,運行在WebView中的JS代碼可以通過這個名字調用WebAppInterface類中的showToast()方法:
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
<script type="text/javascript">
function showAndroidToast(toast)
{
Android.showToast(toast);
}
</script>

③ js如何判斷手機或平板 旋轉屏幕 後的 高度和寬度

window.addEventListener("orientationchange", function(){
alert('得到的是旋轉之前DIV的高和寬')
setTimeout(function () { alert('延時一秒後得到的是旋轉之後DIV的高和寬') }, 1000);
})
我是這樣解決的,延時一秒後可以得到旋轉之後的高和寬,但我總感覺這方法不太好 萬一是性能不好的設備 一秒過後還沒完成相應的設置 此方法就無效了,題主你是用什麼方法解決的?

④ JS獲取body的高度

1、document.body.clientWidth;//網頁可見區域寬

2、document.body.clientHeight;//網頁可見區域高

3、document.body.offsetWidth;//網頁可見區域寬(包括邊線的寬)

4、document.body.offsetHeight;//網頁可見區域高(包括邊線的高)

5、document.body.scrollWidth;//網頁正文全文寬

6、window.screen.availHeight;//屏幕可用工作區高度

7、window.screen.availWidth;//屏幕可用工作區寬度

8、alert($(document.body).outerWidth(true));//瀏覽器時下窗口文檔body的總寬度 包括border padding margin

9、alert($(document.body).width());//瀏覽器時下窗口文檔body的高度

(4)js橫屏獲取高度擴展閱讀:

1、alert($(window).height()); //瀏覽器時下窗口可視區域高度

2、alert($(document).height()); //瀏覽器時下窗口文檔的高度

3、alert($(document.body).height());//瀏覽器時下窗口文檔body的高度

4、alert($(document.body).outerHeight(true));//瀏覽器時下窗口文檔body的總高度 包括border padding margin

5、alert($(window).width()); //瀏覽器時下窗口可視區域寬度

6、alert($(document).width());//瀏覽器時下窗口文檔對於象寬度

7、alert($(document).scrollTop()); //獲取滾動條到頂部的垂直高度

8、alert($(document).scrollLeft()); //獲取滾動條到左邊的垂直寬度

⑤ javascript如何獲取頁面的高度和寬度

window.outerHeight 窗口總高度 和window.screen.availHeight一樣
window.innerHeight 窗口可視區域高度
window.screen.height 顯示器屏幕高版度
另外:權jquery獲取高度
$(".thisCrumbs").height()

元素本身高度
$(".thisCrumbs").innerHeight()

元素高度+內邊距
$(".thisCrumbs").outerHeight()

元素高度+內邊距+邊框
$(".thisCrumbs").outerHeight(true)
元素高度+內邊距+邊框+外邊距

⑥ js 如何獲得瀏覽器的高度

要在js中獲得瀏覽器的高度可以參考以下步驟(具體代碼見最後):
1、outerHeight屬性設置或返回一個窗口的外部高度,包括所有界面元素(如工具欄/滾動條)。
2、outerWidth屬性設置或返回窗口的外部寬度,包括所有的界面元素(如工具欄/滾動)。
3、innerheight 返回窗口的文檔顯示區的高度。
4、innerwidth 返回窗口的文檔顯示區的寬度。
補充:
在瀏覽器兼容方面:
1、所有主流瀏覽器都支持 outerWidth 和 outerHeight 屬性。
注意:IE 8 及更早 IE 版本不支持該屬性。
2、所有主流瀏覽器都支持 innerWidth 和 innerHeight 屬性。
注意:IE 8 及更早 IE版本不支持這兩個屬性。

獲取代碼:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<title>請調整瀏覽器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">
</meta></head>
<body>
<h2 align="center">請調整瀏覽器窗口大小</h2><hr />
<form action="#" method="get" name="form1" id="form1">
<!--顯示瀏覽器窗口的實際尺寸-->
瀏覽器窗口 的 實際高度: <input type="text" name="availHeight" size="4"/><br />
瀏覽器窗口 的 實際寬度: <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函數:獲取尺寸
{
//獲取窗口寬度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//獲取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通過深入Document內部對body進行檢測,獲取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//結果輸出至兩個文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//調用函數,獲取數值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>

⑦ js如何獲取滾動條的高度

給你貼兩復個JS函數,專門用來獲取制網頁滾動高度和滾動寬度的://獲取網頁縱向滾動高度function
getScrollTop(){
var
D
=
document;
return
Math.max(D.body.scrollTop,
D.documentElement.scrollTop)}//獲取網頁橫向滾動寬度function
getScrollLeft(){
var
D
=
document;
return
Math.max(D.body.scrollLeft,
D.documentElement.scrollLeft)}應該可以解決你的問題。
查看原帖>>

⑧ javascript js 如何在手機屏幕旋轉後 獲取一個對象的新高度和寬度,不是屏幕的

偵聽「屏幕旋轉」事件,一旦屏幕旋轉就在回調函數中重新獲得元素的寬和高。
如果你用jquery的話可以這樣寫:

$(window).on('orientationchange', function() {
var $el = $("#el"); // 需要重新獲得寬和高的元素
var newWidth = $el.width(); // 新的寬
var newHeight = $el.height(); // 新的高
});

⑨ 用javascript 怎樣才能很好的獲取手機的屏幕寬度和高度

無論是手機端還是 PC 端,瀏覽器的寬高使用
document.documentElement.clientWidth
document.documentElement.clientHeight
都是兼容性很好的

screen.width啥的應該也版沒問題
可以上w3school網站找權找相關的資料

閱讀全文

與js橫屏獲取高度相關的資料

熱點內容
微信打碼賺錢安卓軟體 瀏覽:608
蘋果官換機買什麼版本 瀏覽:979
visio數據模型怎麼用 瀏覽:179
關於駕駛的app 瀏覽:92
多線程編程有什麼特點 瀏覽:453
iso文件系統 瀏覽:116
蘋果932攔截騷擾電話 瀏覽:765
盲盒開箱app有哪些 瀏覽:422
win10激活腳本之家 瀏覽:191
魔鬼作坊工具包 瀏覽:185
ae源文件下載 瀏覽:520
如何將照片內容轉換成pdf文件 瀏覽:137
浙里辦app如何更換手機號碼 瀏覽:244
電子資料文件有哪些 瀏覽:241
猥瑣貓表情教程 瀏覽:599
android音頻文件格式 瀏覽:458
漫畫臉app哪裡可以下載 瀏覽:959
購買歡樂升級歡樂豆 瀏覽:282
學習智能機器人用什麼編程最好 瀏覽:655
蘋果手機如何管控app 瀏覽:633

友情鏈接