怎麼判斷裝置的瀏覽器尺寸

不同的屬性

  • clientHeight
    • 完整可以顯示的高度
  • offsetHeight
    • 包含瀏覽器的 padding 就是那些邊框
  • scrollHeight
    • 包含邊框還有滾軸展開的高度

在行動裝置下取得尺寸

<html>
<head>
<title>取得尺寸</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {
$("#spanClientHeight").text(document.documentElement.clientHeight);
$("#spanClientWidth").text(document.documentElement.clientWidth);
});
</script>
</head>
<body>
<div>
高度:<span id="spanClientHeight"></span>
<br />
寬度:<span id="spanClientWidth"></span>
</div>
</body>
</html>

這邊取得到的會是行動裝置解析度的寬度,而不是真實寬度。

image

利用 ViewPort 取得真實寬度

<meta name="viewport" 
content="width=device-width, initial-scale=1.0,
user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" />

設定 viewport 之後瀏覽器就不是根據解析度去顯示而是實際螢幕大小

image

Demo 頁面

連結

image


clientHeight/clientWidth returning different values on different browsers

CSS / JavaScript – How do you get the rendered height of an element?

element.clientHeight – MDN

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *