css - 将站点分辨率调整为移动设备屏幕尺寸时出现问题

Question

我正在重新设计我的网站，使其具有两种基于屏幕分辨率的布局。一个为 1010 像素或更大的屏幕设置 1000 像素，另一个为较小的屏幕设置 675 像素。现在我正在使用以下视口(viewport)标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

此设置在桌面浏览器和 iPad 上运行良好。但是，Android 和 iPhone 浏览器都不能正确显示页面，它们从不同级别的缩放开始。相反，我希望 675px 显示正确显示缩放，以便在屏幕上显示整个宽度。我尝试使用:

<meta name="viewport" content="width=675px, user-scalable=yes">

它在一定程度上改进了 iPhone 版本，但强制 iPad 显示较小的尺寸，即使它具有 1024 像素宽的屏幕。不太确定如何解决这个问题。

顺便说一句，网站是http://dendory.net

Answer 1

您是否尝试过删除 initial-scale=1.0 并将您的视口(viewport)设置为:

<meta name="viewport" content="width=device-width">

然后使用媒体查询作为设计中的断点。