css - 了解网站页面的桌面、Ipad、平板电脑、手机的视口(viewport)

标签 css width device viewport scaling

我想了解我们如何知道用户是从 IPAD DEKTOP 还是 PHONE 访问网站页面。我查看了互联网上的一些信息,但我仍然不太了解这是我所知道的:来自这个 Question<meta name="viewport" content="width=880px, initial-scale=1.0, user-scalable=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 不是你想的那样,它是用来在移动设备上设置视口(viewport)宽度的。

关于css - 了解网站页面的桌面、Ipad、平板电脑、手机的视口(viewport),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49821622/

相关文章:

C#/WPF - DataGrid - 将 RowDetails 中 TextBox 的宽度绑定(bind)到包含 DataGrid 的宽度

Android:升级后手机无法被 ADT 识别

android - 在android中更改Wifi Direct名称

javascript - 在 html/mvc 中实现对表列的拖放

javascript - 页面和 iframe 加载前白屏闪烁

html - 无法在 HTML 表单的输入字段中输入文本

Android 和 Eclipse : I can't able to find my device LG-E720 from Run/Debug Configuration/Android Device

javascript - 改变输入值的颜色

javascript - 在父元素上切换溢出属性时

jQuery 将元素的宽度设置为数组的值