javascript - X/Y px 分辨率的 iPad 上的网站看起来不错，但在具有相同分辨率的 PC 上它太可怕了(太大)

Question

我有一个主要针对移动设备的网站，但不仅限于移动设备。

我已经使用了RWD 方法。 我在 css 中使用百分比值(没有硬编码 px)并且我什至用 JavaScript 缩放字体大小，所以结果总是同样，无论屏幕尺寸如何 - 在 Android 手机、iPhone、iPad 上...... - 它看起来不错(菜单是宽度的 100%，它的高度保持比例，文本也可见)。

但是，当我在我的 PC 上(使用 24 英寸屏幕)预览该网站时，它看起来就像噩梦。一切仍然保持比例等，但在这么大的屏幕上(与 iPhone/iPad 相比)，它看起来很糟糕(5x5 厘米大小的菜单按钮......)。

我想在某个时候以某种方式停止扩展元素的大小。

---

请注意，以像素为单位的 max-width/max-height 不是解决方案。这是因为某些移动设备具有很高的 px 分辨率，但屏幕仍然非常小(与 24 英寸相比)。同时，我可以转动我的显示器 (24'') 以 800x600 分辨率进行渲染。所以 px 分辨率对屏幕尺寸没有任何影响(只是为了澄清一下)。

我将使用的图像:max-width: 900px 并且它解决了 PC 的问题。但现在我尝试在分辨率大于 900 像素的小屏幕(小于 18 英寸)上呈现网站。而且我的菜单已经按比例缩小(当我希望它在小屏幕的情况下填满整个宽度时)。

现实生活中的例子:

菜单按钮在大约 5 厘米时看起来没问题，我有 5 个按钮并给每个按钮 20% 的宽度(因此顶部菜单是全宽)。当屏幕很大时，我希望左/右边距和菜单居中，按钮不超过 5 厘米。

我可以使用 media-query 或 css max-width 像 max-width: 800px 并且在我的屏幕上 (24'', 1920x1080) 然后按钮不会变大超过 5 厘米。

很好。现在有人在三星 Galaxy Note Edge 上运行我的网站，它的屏幕尺寸约为 6x3 英寸，但分辨率为 1600x2560 像素。我的菜单按钮突然变小了，我什至看不到它(当我使用基于像素的 max-width 时)。

---

此外，我不能依赖 CSS cm 单位。它们是在一些关于 dpi 的假设下制作的，在 PC Windows 7 上看起来不错(例如)，但在我的 HTC Android 上(另一个例子)1x1cm box 与 1x1cm 框(并且不涉及缩放)。

---

那么 - 如何处理呢？

我基本上想要即:让我的按钮占屏幕宽度的 20%(我将在屏幕上一行放置 5 个这样的按钮，作为顶部菜单)，但是如果屏幕大于 18''，我想要停止扩展它(会出现一些边距空间，但无论如何)。而且它绝对与 px 分辨率无关。

Answer 1

您是否使用 header 标签:<meta name="viewport" content="initial-scale=1.0, width=device-width" /> ？

width:设备虚拟视口(viewport)的宽度。

device-width:设备屏幕的物理宽度。

height:设备“虚拟视口(viewport)”的高度。

device-height:设备屏幕的物理高度。

initial-scale:访问页面时的初始缩放比例。 1.0 不缩放。

最小比例:访问者可以在页面上缩放的最小量。 1.0 不缩放。

maximum-scale:访问者可以在页面上缩放的最大量。 1.0 不缩放。

用户可缩放:允许设备放大和缩小。值为是或否。