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

标签 html mobile

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

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

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

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

提前致谢

最佳答案

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

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

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

关于html - 移动像素与桌面像素不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24019421/

相关文章:

javascript - 在小屏幕上使用 Canvas 为图像添加注释,无需调整大小

android - 如何将依赖项添加到 build.gradle?

blackberry - 如何在 BlackBerry 上获取后台进程列表

html - 在图像悬停时 - 鼠标显示为文本图标?

java - 如何在jsp中将本地视频放到我的本地主机上

ios - Facebook iOS 设置 "iPhone Store Id"和 "iPad Store Id"有什么区别

mobile - 如何使用 Ionic 框架进行 Web 应用程序开发?

javascript - 隐藏点击表上的行

html - 在缩略图和网格中使用 Bootstrap 的垂直居中图像

javascript - 我应该在移动网站中内联 CSS 和 JS 以节省带宽吗?