如何在 Retina Macbook 上测试响应式网站？
How do I test a responsive website on a Retina Macbook?
所以我创建了响应式网站。当我在 PC 上测试它并调整浏览器大小以检查较小的屏幕尺寸是否正常工作时，一切都很好。
当我在我的主要机器（MacBook Pro Retina）上进行测试时，如果我将浏览器缩小到更小的尺寸，内容的宽度就会太大。
我想这与我使用的视网膜显示器有关。我的 CSS.
中是否需要做一些不同的事情
我的响应式 CSS 部分看起来像这样...
@media screen and (min-width: 220px) and (max-width: 300px),
handheld and (min-width: 220px) and (max-width: 300px),
screen and (min-device-width: 220px) and (max-device-width: 300px) {
....
}
@media screen and (min-width: 300px) and (max-width: 440px),
handheld and (min-width: 300px) and (max-width: 440px),
screen and (min-device-width: 300px) and (max-device-width: 440px) {
....
}
@media screen and (min-width: 440px) and (max-width: 720px),
handheld and (min-width: 440px) and (max-width: 720px),
screen and (min-device-width: 440px) and (max-device-width: 720px) {
....
}
@media screen and (min-width: 720px) and (max-width: 980px),
handheld and (min-width: 720px) and (max-width: 980px),
screen and (min-device-width: 720px) and (max-device-width: 980px) {
....
}
@media screen and (min-width: 980px) and (max-width: 1600px),
handheld and (min-width: 980px) and (max-width: 1600px),
screen and (min-device-width: 980px) and (max-device-width: 1600px) {
....
}
正如 connexo 所说，在这种情况下您不必使用 device-width。 device-width 基本上是指设备的屏幕分辨率，这意味着如果您在桌面上调整浏览器的大小，媒体查询可能不会生效。
请记住，视网膜显示器的像素数量是普通显示器的两倍。
所以我创建了响应式网站。当我在 PC 上测试它并调整浏览器大小以检查较小的屏幕尺寸是否正常工作时，一切都很好。
当我在我的主要机器（MacBook Pro Retina）上进行测试时，如果我将浏览器缩小到更小的尺寸，内容的宽度就会太大。
我想这与我使用的视网膜显示器有关。我的 CSS.
中是否需要做一些不同的事情我的响应式 CSS 部分看起来像这样...
@media screen and (min-width: 220px) and (max-width: 300px),
handheld and (min-width: 220px) and (max-width: 300px),
screen and (min-device-width: 220px) and (max-device-width: 300px) {
....
}
@media screen and (min-width: 300px) and (max-width: 440px),
handheld and (min-width: 300px) and (max-width: 440px),
screen and (min-device-width: 300px) and (max-device-width: 440px) {
....
}
@media screen and (min-width: 440px) and (max-width: 720px),
handheld and (min-width: 440px) and (max-width: 720px),
screen and (min-device-width: 440px) and (max-device-width: 720px) {
....
}
@media screen and (min-width: 720px) and (max-width: 980px),
handheld and (min-width: 720px) and (max-width: 980px),
screen and (min-device-width: 720px) and (max-device-width: 980px) {
....
}
@media screen and (min-width: 980px) and (max-width: 1600px),
handheld and (min-width: 980px) and (max-width: 1600px),
screen and (min-device-width: 980px) and (max-device-width: 1600px) {
....
}
正如 connexo 所说，在这种情况下您不必使用 device-width。 device-width 基本上是指设备的屏幕分辨率，这意味着如果您在桌面上调整浏览器的大小，媒体查询可能不会生效。
请记住，视网膜显示器的像素数量是普通显示器的两倍。