iPad上有X/Y px分辨率的网站看上去没问题，在同样分辨率的PC上它太可怕了(太大了)

Question

我有一个网站，主要是为移动设备，但不只是为他们。

我已经使用了RWD方法。I在css (无硬编码px)中使用百分比值，I甚至用JavaScript缩放字体大小，因此无论屏幕大小如何，安卓手机、iPhone、iPad.-它看起来很好(菜单是宽度的100%，它的高度保持了比例，文本也是可见的)。

但是，当我在我的电脑上预览那个网站时(屏幕是24‘)，它看起来就像梦魇。但在如此大的屏幕上(与iPhone/iPad相比)，它看起来很糟糕( 5x5厘米大小的菜单按钮.)。

我想在某种程度上停止扩展元素的大小。

注意，以像素为单位的max-width/max-height是，而不是解决方案。这是因为一些移动设备具有很好的px分辨率和非常小的屏幕(相对于24‘)。同时，我可以将显示器(24‘)转换为800x600分辨率。因此，px分辨率显示，没有任何关于屏幕大小的(只是为了澄清它)。

图像，我将使用：max-width: 900px，这解决了PC的问题。但是现在我尝试在小屏幕(小于18'')上渲染这个网站，分辨率大于900 18。我的菜单也被缩小了(当我想让它填充小屏幕时的全部宽度时)。

真实生活示例：

当菜单按钮大约5厘米的时候，菜单按钮看起来没问题，我有5个按钮，每个按钮的宽度都是20% (所以上面的菜单是全宽度的)。当屏幕很大时，我希望有一个左右边距和菜单中心，按钮的大小不超过5厘米。

我可以使用媒体查询或css的最大宽度像max-width: 800px和我的屏幕(24‘，1920x1080)，然后按钮不会变大，然后大约5厘米。

很好。现在有人在三星Galaxy上运行我的网站，它的屏幕大小约为6x3英寸，但分辨率为1600x2560px。我的菜单按钮突然变得如此小，以至于我甚至看不到它(当我使用基于px的max-width时)。

此外，本人不能依赖CSS 单元。他们对dpi做出了一些假设，比如在PC Windows 7上看上去还不错，但在我的HTC Android (另一个例子)上，1x1cm盒与1x1cm box完全不同(没有扩展，涉及到)。

所以-如何处理它？

我基本上想要的是:使我的按钮占屏幕宽度的20% (我将把5个这样的按钮放在屏幕的一行中，作为顶部菜单)，但是如果屏幕大于18''，我想停止扩展它(会出现一些空白空间，但无论如何)。不管px的决议是什么。

Answer 1

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

宽度:设备的虚拟视图的宽度。

设备宽度:设备屏幕的物理宽度.

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

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

初始缩放:访问页面时的初始缩放。1.0不能缩放。

最小比例尺:访问者可以放大页面的最小数量。1.0不能缩放。

最大比例尺:访问者可以放大页面的最大数量。1.0不能缩放。

用户可伸缩:允许设备放大和缩小。价值观是是或不是。