CSS - mobile/tablet 的标识

Question

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

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

我有四种不同的看法： – 手机 Phone：肖像 – 手机 Phone：横向 – 平板电脑：纵向 – 平板电脑：风景

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

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

有没有人可以帮我写一些代码来完成这个？或者也许给我指出一个支持这个的 framework/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 */
}