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

Question

My site is not available for displays smaller than 10". How can I determine the size of the screen to block access to the site at resolutions below 10"? Thanks.

Answer 1

A computer can and has to know the resolution (in pixel) that it is displaying. The image in this resolution is then send across a cable to another device which physically displays it. This could be a tiny LCD screen or a giant projector. Either way, the physical screen/display size is entirely independent of the screen resolution. The final physical size of the output is unknown by the computer and especially Javascript/CSS.

In other words: you cannot detect "10 inches".

Answer 2

You can't detect the user's screen size. The only thing that might be available to you (and can be easily spoofed) is the display resolution in pixels.

To apply a stylesheet only if your content has more than XYZ px room, I recommend use of width media queries .

Answer 3

You could do it with CSS Media Queries, hide all the content of your site and display a message to blocked people.

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

Though it would make sense to just show something useful to these people rather than block them all together.

Answer 4

Create an element with its .style.width defined in inches, then measure it's .width (in pixels) to figure out the screen's DPI. Then you just need to use the screen object to figure out the screen's diagonal size and block users however you want.

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";
}

If the device doesn't know how big an inch actually is (and many don't), you're out of luck.

Answer 5

For checking on resolution.

In javascript:

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