目前我正在为一个使用 Retina Ready Coding 的网站工作。视网膜显示屏(新 iPad)的分辨率为 2048 x 1536 像素，而普通 iPad/Tab 的分辨率为 1024x768 像素。根据视网膜定律，每当我在
中使用 body width/container width 1536px@media only screen and (min-device-width: 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) { body{ width: 1536px !important; }, .container{ width: 1536px !important; } }.这应该将 width:1536px 自动调整为 768px(作为其 pixel-ratio-2)。但它显示将整个站点放大到 iPad 中。每当我触摸 iPad 时，它的宽度都会从 1536 像素变为 768 像素。 有人对此有任何解决方案吗？我在 Retina 显示屏移动设备上遇到了同样的问题。
最佳答案
您是否使用元标记设置视口(viewport)？这种行为看起来好像没有视口(viewport)元标记。尝试使用此元标记更改/添加视口(viewport)设置:
<meta name="viewport" content="width=device-width">
或者这个:
<meta name="viewport" content="initial-scale=1.0">
或两者兼而有之:
<meta name="viewport" content="width=device-width, initial-scale=1">
同时检查 this link for解释
关于html - 使用设备宽度时，Retina 显示设备宽度不会自动适应 ipad，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39573798/