html - 移动像素与桌面像素不同？

Question

我习惯于为台式电脑(10 英寸以上)进行开发。我正在尝试制作一个仅在移动设备上使用的网站。

我的疑问如下:我尝试创建一个简单的大 500x500px。

我在 Chrome 模拟的“Nexus 5”(1920x1080，像素比 3)和真实的 Nexus 5 上都尝试了生成的页面。结果相同:在这两种情况下，div 都比屏幕本身大得多。

我想这与像素比例有关。但我不明白这个链接。有什么线索吗？

提前致谢

Answer 1

当您开发移动网站时(尤其是来自桌面背景)，建议您使用 HTML boilerplate作为起点。移动设备存在重要而微妙的差异，更不用说跨浏览器问题引起的边缘情况了。

对于这个特定问题，我怀疑您只需要设置 viewport meta tag , 图像将显示正确的大小:

<meta name="viewport" content="width=device-width, initial-scale=1">