如何建立与我的第 8 代 iPad 具有相同分辨率的网站？
Posted
技术标签:
【中文标题】如何建立与我的第 8 代 iPad 具有相同分辨率的网站？【英文标题】：How do I build a website that has the same resolution as my 8th gen iPad? 【发布时间】：2021-01-01 10:15:02 【问题描述】：我的 iPad 8 的分辨率是 2160x1620。当我用 1000 像素宽的 div 构建网站时，该 div 在我的 iPad 屏幕上几乎 90% 宽。这不是我所期望的。
在我的 iMac（全高清）上，div 以正确的宽度显示。我该如何解决这个问题？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="width: 1000px; background-color: aqua; height: 10px"></div>
</body>
</html>
【问题讨论】：
【参考方案1】：尝试在您页面的<head> 部分设置此设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这应该可以让您的文档根据您设备的屏幕分辨率正确缩放。
您可以在W3Schools 上阅读更多关于它的工作原理。
【讨论】：
我完全按照您的建议进行了尝试，但我的 ipad 仍然显示相同的 div 宽度。我编辑了我的示例代码。 @PeterKarlsson 你在使用 safari 吗？ 是的，我真的很讨厌它。也许我应该使用 Firefox？ @PeterKarlsson 好吧，您应该在 FF 中检查一下，以确保问题是特定于 Safari 的。如果您的项目是个人项目，那么请使用您喜欢的项目，并且不要费心解决问题，如果它只出现在 safari 中。如果您正在制作一个公共网站，那么无论如何您都必须修复它：D 但首先请检查它是否适用于 FF。我听说过 safari 处理视口的一些错误，但我自己没有见过。 我刚刚安装并测试了 Firefox。相同的行为。奇怪。以上是关于如何建立与我的第 8 代 iPad 具有相同分辨率的网站？的主要内容，如果未能解决你的问题，请参考以下文章
为什么响应式网页设计在具有相同分辨率但不同ppi的屏幕上有不同的响应？