如何在特定屏幕尺寸下屏蔽網站？

Question

我的網站無法用於小於10英寸的顯示器。如何確定屏幕尺寸以阻止低於10英寸的分辨率訪問該網站？ 謝謝。

Answer 1

計算機可以並且必須知道其顯示的分辨率 （以像素為單位）。 然后，將通過該分辨率的圖像通過電纜發送到另一台物理顯示該圖像的設備。 這可能是一個很小的LCD屏幕或一個巨大的投影儀。 無論哪種方式，物理屏幕/顯示器的尺寸都完全與屏幕分辨率無關。 輸出的最終物理大小由計算機（尤其是Javascript / CSS）未知。

換句話說：您無法檢測到“ 10英寸”。

Answer 2

您無法檢測到用戶的屏幕尺寸。 可能唯一可用的（並且很容易被欺騙）的是以像素為單位的顯示分辨率。

要僅在您的內容空間超過XYZ px時才應用樣式表，我建議使用width媒體查詢 。

Answer 3

您可以使用CSS Media Queries做到這一點，隱藏網站的所有內容並向被屏蔽的人顯示一條消息。

@media only screen 
and (max-width : YOURWIDTHpx) {
/* Styles */
 YOUR MESSAGE CONTAINER
}

盡管只向這些人展示有用的東西，而不是將他們封鎖在一起是有意義的。

Answer 4

創建一個元素，其.style.width以英寸為.style.width定義，然后測量其.width （以像素為單位）以計算屏幕的DPI。 然后，您只需要使用screen對象來找出屏幕的對角線大小，並根據需要阻止用戶。

var el = document.createElement("div");
el.style.width = "100in";
document.body.appendChild(el);

var dpi = el.clientWidth / 100;
var screenSizeIn = Math.sqrt(screen.width * screen.width +
                             screen.height * screen.height) / dpi;

console.log("Screen size is " + screenSizeIn + " inches.");

document.body.removeChild(el);

if (screenSizeIn < 10) {
  window.location = "/blocked.html";
}

如果設備不知道實際英寸有多大（很多英寸不知道），那么您就不走運了。

Answer 5

用於檢查分辨率。

在javascript中：

if(screen.height < 600 || screen.width < 800)
{
    // Do something to block. i.e. redirect to specific page
}