如何使用CSS媒体查询来区分手机和屏幕？
如何使用CSS媒体查询来区分手机和屏幕？
提问于 2017-08-18 02:22:51
我读到大多数媒体查询都使用视窗宽度来确定您是否在手机、平板电脑或PC上。我正在构建一个图像网格，在一个无穷无尽的网格中有1000个小拇指。每个拇指都是125px，在我的笔记本电脑(MacBook 13英寸)上，我可以很容易地将9-10个拇指放在一行中--这给了我很好的用户体验。如果我把同样的代码放在一个跨度为1080px的nexus5上，我会得到6-7个拇指，这是一个糟糕的用户体验。nexus5的跨度是6-7厘米，而MacBook大约有25厘米的差异。
我的方法是检测设备是移动设备还是pc设备，以及拇指的比例-移动设备的大拇指(比方说250px)和pc的小设备(125px)。但是我怎么才能检测到这个设备。如果我使用宽度，我基本上必须使用1100px的最小宽度来捕捉大多数新手机。我也可以选择分辨率，移动电话通常比PC/笔记本电脑有更高的DPI。
还是说我完全搞错了？
我正在用React编写应用程序。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-08-18 02:27:36
这并不是说你的Nexus5以1080px的宽度呈现网页，而是你的网站表现得不适合你的手机屏幕，所以它呈现为一个缩小的桌面网站。
您需要将此视口元标记添加到站点的<head>中
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">一旦安装好了，你的Nexus5应该会以接近400px的宽度呈现网页，你就可以根据这一点进行媒体查询了。
下面是如何在480px以下的屏幕上制作125px宽的缩略图：
@media (max-width: 480px) {
img {
width: 125px;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45742475
复制相关文章
相似问题
腾讯云开发者
