Question

我的网站不适用于小于10英寸的显示器。如何在低于10英寸的分辨率下确定阻止访问网站的屏幕大小？感谢。

Answer 1

计算机可以并且必须知道它正在显示的分辨率（以像素为单位）。然后，此分辨率的图像通过电缆发送到另一个物理显示它的设备。这可能是一个小型液晶屏或巨型投影仪。无论哪种方式，物理屏幕/显示尺寸完全独立于屏幕分辨率。输出的最终物理尺寸是计算机未知的，尤其是Javascript / CSS。

换句话说：你无法检测到“10英寸”。

Answer 2

您无法检测用户的屏幕尺寸。您可以使用的唯一可能（并且可以轻易欺骗）的是显示分辨率（以像素为单位）。

仅当您的内容超过XYZ px会议室时才应用样式表，我建议使用width media queries。

Answer 3

您可以使用CSS媒体查询执行此操作，隐藏您网站的所有内容并向被屏蔽的人显示消息。

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

虽然只展示对这些人有用的东西而不是一起阻止它们是有意义的。

Answer 4

创建一个以英寸为单位定义.style.width的元素，然后测量它的.width（以像素为单位）来计算屏幕的DPI。然后你只需要使用the screen object来计算屏幕的对角线大小，然后根据需要阻止用户。

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
}

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

5 个答案: