CSS - 手机/平板电脑的识别

Question

我开始使用网络应用程序并定位手机和平板电脑。

我的应用将包含一个完整的页面显示，无法滚动（例如，所有内容都需要在这些设备上全屏显示）。

我将有四种不同的观点： – 手机：人像 – 手机：风景 – 平板电脑：纵向 – 平板电脑：风景

所以我想我需要确定它是手机还是平板电脑，并获得它们的分辨率，以便能够计算不同元素的大小。 我还需要弄清楚它是纵向还是横向。

此外，我想根据网络浏览器的大小在计算机上显示手机或平板电脑的尺寸（以屏幕为中心）。

有没有人可以帮我写一些代码来完成这个？或者也许将我指向一个支持这个的框架/github？

谢谢。 埃里克

Answer 1

你可以在你的 CSS 中使用 media queries 和 orientation

@media only screen and (min-device-width: /*min width*/) and 
(max-device-width: /*max width*/) and (orientation: /*portrait or landscape*/) 
{
    /* your css */
}