iPad上X / Y px分辨率的网站看起来不错，而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问题。 但是现在我尝试在分辨率小于900px的小屏幕（小于18英寸）上呈现网站。 而且我的菜单已经按比例缩小（当我希望在小屏幕的情况下，它可以填满整个宽度）。

现实生活中的例子：

大约5厘米时，菜单按钮看起来不错，我有5个按钮，每个按钮的宽度为20％（因此顶部菜单为全角）。 当屏幕很大时，我想使左右边距和菜单居中，并且按钮的宽度不要超过5厘米。

我可以使用media-query或css max-width，例如max-width: 800px并在我的屏幕（24英寸，1920x1080）上，按钮不会变大，只有约5厘米。

精细。 现在有人在Samsung Galaxy Note Edge上运行我的网站，它的屏幕尺寸约为6x3英寸，但分辨率为1600x2560px。 而且我的菜单按钮突然变得很小，以至于我什至都看不到它（当我使用基于px的max-width ）。

---

而且， 我不能依靠CSS cm unit 。 它们是根据有关dpi的一些假设做出的，例如在PC Windows 7上看起来可以，但是在我的HTC Android（例如）上， 1x1cm盒子与1x1cm盒子完全不同（并且不涉及缩放 ）。

---

那么- 如何处理呢？

我基本上想让：将我的按钮设置为屏幕宽度的20％（我将把5个这样的按钮放在屏幕的第一行中，作为顶部菜单），但是如果屏幕大于18英寸，我想停止扩展它（会出现一些边距空间，但无论如何）。 绝对与px分辨率无关。

Answer 1

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

width：设备的虚拟视口的宽度。

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

height：设备“虚拟视口”的高度。

设备高度：设备屏幕的物理高度。

initial-scale：访问页面时的初始缩放。 1.0无法缩放。

最小比例尺：访问者可以在页面上放大的最小比例。 1.0无法缩放。

最大比例：访问者可以在页面上放大的最大数量。 1.0无法缩放。

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