了解桌面、Ipad、平板电脑、手机的视口

Question

我想了解我们如何知道用户是否从 IPAD DEKTOP[=18= 访问网站页面] 或 PHONE。我查看了互联网上的一些信息，但我仍然不太了解这是我所知道的：从这个 Question do <meta name="viewport" content="width=880px, initial-scale=1.0, user-scalable=1;" /> return 后面设备的宽度是多少？我如何知道它在哪个设备上并使用该样式-sheet?

Answer 1

您必须使用媒体查询 (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) 来应用不同的样式。这就是响应式设计的工作原理。它不是关于为不同的设备应用不同的样式表。

媒体查询可能如下所示：

p {font-size: 1em;}
@media (min-width: 30em) {
    p {font-size: 1.5em;}
}

此处对于宽度大于30em的设备，字体会更大

meta viewport不是你想的那样，它是为了在移动设备上设置视口宽度。

了解桌面、Ipad、平板电脑、手机的视口

Understand Viewport for desktop,Ipad,tablet,cellphone for a site page

css

width

device

viewport

scaling