2

我有这个问题：我想编写一个根据使用的设备显示不同的网站。我想要的是这样的：

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

现在的问题是，当我为移动设备编写代码时，javascript 报告的屏幕宽度是我使用元标记视口设置的。所以如果我创建一个文件：

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

那么当使用javascript（window.screen.width和document.documentElement.clientWidth）时，返回的值正好是410。这个值不反映真实的显示大小......

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

有什么办法吗？谢谢

4

1 回答 1

0

我知道这是标记为 JavaScript，但我认为这不是合适的解决方案。CSS 内置了这一点。最好将您的设计层尽可能地保留在脚本之外。查看 CSS 响应式设计/媒体查询。

例子：

@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 的屏幕不准确的问题，它并没有那么简单和干燥，需要一些解释差异的空间。

于 2013-03-15T19:13:48.257 回答