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

Question

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

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

我将有四种不同的观点： - 手机：肖像 - 手机：风景 - 平板电脑：肖像 - 平板电脑：风景

所以我认为我需要确定它是手机还是平板电脑并获得分辨率以便能够计算不同元素的大小。 我还需要弄清楚它是肖像还是风景。

此外，我想在计算机上显示手机或平板电脑的大小（屏幕中央），具体取决于网络浏览器的大小。

有没有人可以帮我解决一些代码来实现这个目标？或者可以指向一个支持这个的框架/ github？

感谢名单。 的Eirik

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 */
}