Question

我有这个问题：我想根据使用的设备对显示不同的网站进行编码。我想要的是：

if (screen.width < 400) useLayout(1);
else if (screen.width >=400 and screen.width < 800) useLayout(2);
else useLayout(3);

现在的问题是，当我为移动设备编码时 javascript报告的屏幕宽度是我使用metatag视口设置的屏幕宽度。因此，如果我创建一个文件：

<meta id='viewport' name='viewport' content='width=410'>

然后当使用javascript（window.screen.width和document.documentElement.clientWidth）时，返回的值恰好是410.此值不反映REAL显示大小......

我真正需要的是了解该设备上有多少英寸（或厘米）为100像素......

有什么办法吗？感谢

Answer 1

我知道这是标记的JavaScript，但我认为它不是合适的解决方案。 CSS内置了这个功能。尽可能多地保护设计层不受脚本影响。查看CSS响应式设计/ Media Queries。

示例：

@media screen and (max-width:399px) { 
    body {
        background-color : 'red';
    }
}
@media screen and (min-width:400px) and (max-width:799px) { 
    body {
        background-color : 'blue';
    }
}
@media screen and (min-width:800px) { 
    body {
        background-color : 'green';
    }
}

您还可以将这些文件隔离到自己的CSS文件中，以最大限度地减少不适用用户的冗余CSS数据传输：

<link rel="stylesheet" media="screen and (max-width:399px)" href="layout1.css" />
<link rel="stylesheet" media="screen and (min-width:400px) and (max-width:799px)" href="layout2.css" />
<link rel="stylesheet" media="screen and (min-width:800px)" href="layout3.css" />

要使用JS回答有关屏幕不准确的问题，请not so cut and dry，interpretation variances需要一些空间。

如何获得设备的实际尺寸？

1 个答案: