Dra*_*eer 6 html css mobile html5 css3
我是HTML5和CSS3的新手,所以我正在开发一个简单的项目来更好地学习它.我最近发现了响应式设计,因此我创建了一个可扩展到手机的页面.我使用媒体查询,我创建了两个状态,一个用于屏幕640px(移动)和更小,一个用于屏幕641px和更大(桌面).该网站工作正常,当我缩放窗口并在我的手机上查看时显示正确的样式时,在我的桌面上显示正确的样式.
然而,在运行该网站后,我决定检查我的HTC One的分辨率 - 它是1080p.我的手机显示640px网站,无论方向如何.我想知道为什么会这样; 手机的更高分辨率不应该触发移动状态,但确实如此.我想我可能会对分辨率如何实际工作感到困惑.
那么,我如何确定手机(和平板电脑)的真实分辨率,以便我可以为它们创建适当缩放的网站？
//Mobile
@media screen and (max-width: 640px) {
...
}
//Desktop
@media screen and (min-width: 641px) {
...
}
编辑 感谢下面的JoshCs评论,我意识到我在教程中使用了视口元标记.我想修改我的问题:viewport标签如何确定为任何给定设备显示的分辨率(如何根据设备的尺寸确定视口分辨率)？
<meta name="viewport" content="width=device-width; initial-scale=1.0">
CSS像素是一个抽象概念，与屏幕上的实际像素无关。具体来说，它是一个与密度无关的像素。取决于设备的物理像素密度，逻辑CSS像素相对于物理像素的大小会缩放。例如，在许多设备中，屏幕宽度640的CSS像素比率为2。因此，两个像素用于绘制单个CSS像素。
使用视口元标记时，可以指示浏览器使用像素比率缩放CSS像素。
您可以使用window.devicePixelRatio在Webkit浏览器中确定设备的像素比率。加上物理像素数可以用来确定视口分辨率。
参考文献