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

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
}